2 Replies Latest reply on Dec 1, 2010 7:44 AM by ndrw_cheung

    IE only : Destination page loses style after clicking on commandbutton

    ndrw_cheung

      Hi. 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";
          }