IE only : Destination page loses style after clicking on commandbutton
ndrw_cheung Nov 30, 2010 12:42 PMHi. I have a problem with the a4j command button that only happens in IE. I have 2 pages (home.xhtml and test.xhtml). There is an a4j command button on the home.xhtml page. On clicking the command button, it will go to test.xhtml. (The navigation rule is defined in faces-config.xml file). Both pages use the template common.xhtml). However, the styles defined in common.xhtml affects what's on home.xhtml, but it has NO effect on test.xhtml. If I replace the a4j command button with a regular h:commandButton, the styles defined in common.xhml take effect on test.xhtml. NOTE that the problem doesn't happen if I use firefox. However, I need to have it working in both browsers and cannot use the regular h:commandButton.
Any help is appreciated.
-Andrew
----------------------------------
Here's my setup :
GateIn portal 3.1.0
JSF 1.2
Facelets 1.1.15.b1.jar
RichFaces 3.3.3Final
JBOSS Portlet Bridge 2.0.0
Browser: IE8
The following is the code and configurations:
common.xhtml :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:loadBundle basename="Resource" var="msg" />
<head>
<title><ui:insert name="pageTitle">Page Title</ui:insert></title>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
}
.bottom {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-align: center;
vertical-align: middle;
color: #8E969D;
}
</style>
</head>
<body bgcolor="#ffffff">
<table style="border:1px solid #CAD6E0" align="center" cellpadding="0" cellspacing="0" border="0" width="400">
<tbody>
<tr>
<td class="header" height="42" align="center" valign="middle" width="100%" bgcolor="#E4EBEB">
<ui:insert name="pageHeader">Page Header</ui:insert>
</td>
</tr>
<tr>
<td height="1" width="100%" bgcolor="#CAD6E0"></td>
</tr>
<tr>
<td width="100%" colspan="2">
<table width="100%" style="height:150px" align="left" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="center" width="100%" valign="middle">
<ui:insert name="body">Page Body</ui:insert>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" valign="bottom" height="1" width="100%" bgcolor="#CAD6E0"></td>
</tr>
</tbody>
</table>
</body>
</html>
-------------------
home.xhtml :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<ui:composition template="/templates/common2.xhtml">
<ui:define name="body">
<a4j:form id="testForm">
this is home page
<a4j:commandButton styleClass="alignleft" id="btnGoToTest" action="#{myBackingBean.goToTest}" value="GoToTest"/>
</a4j:form>
</ui:define>
</ui:composition>
</html>
----------------
test.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<ui:composition template="/templates/common.xhtml">
<ui:define name="body">
<a4j:form id="testForm">
this is test page
<h:outputText value="abc"/>
</a4j:form>
</ui:define>
</ui:composition>
</html>
-------------------------
face-config.xml :
<managed-bean>
<description>My Backing Bean</description>
<managed-bean-name>myBackingBean</managed-bean-name>
<managed-bean-class>demo.MyBackingBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/pages/home.xhtml</from-view-id>
<navigation-case>
<from-outcome>goToTest</from-outcome>
<to-view-id>/pages/test.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
---------------
Backing bean:
public String goToTest() {
return "goToTest";
}