10 Replies Latest reply on Sep 19, 2007 8:37 AM by melvinhil

    RichFaces 3.1.0:  IE 6 JavaScript errors after successful AJ

    melvinhil

      After upgrading to 3.1.0 and retesting everything, I'm getting an interesting scripting error in IE6:

      Line: 1485
      Error: Object doesn't support this property or method


      Note that I have the org.ajax4jsf.COMPRESS_SCRIPT parameter set to false in my web.xml....

      The error actually seems to occur on line 1476 of the a4j_3_1_0org.ajax4jsf.javascript.AjaxScript resource. The JavaScript code on that line is:

      window.document.write(req.getResponseText());


      In the Script debugger I can see that the req object has a valid responseText field, so I'm wondering if the window.document.write call is related to the problem.

      Here's my JSF - the commandButton I'm clicking is in bold:

      
      <a4j:region id="reg1">
       ... a separate form here with is own AJAX requests that reRender elements in reg2...
      </a4j:region>
      
      <a4j:region id="reg2">
       <rich:panel id="personResultPanel">
       <h:panelGrid id="personResultGrid" columns="2">
       <h:panelGrid id="formPanel" columns="1" rendered="#{addRoomOccupant.personResults != null}">
       <h:selectOneMenu id="personResultBox" value="#{addRoomOccupant.personId}" validator="#{addRoomOccupant.validateAssignment}">
       <f:selectItems value="#{addRoomOccupant.personResults}" />
       </h:selectOneMenu>
       <h:panelGrid id="buttonMsgGrid" columns="2" style="width:100%" columnClasses="left, right"> <a4j:commandButton id="saveButton" action="#{addRoomOccupant.savePersonAssignment}" value="Save" type="button"/> <h:messages id="errors" style="color:red;font-weight:bold" />
       </h:panelGrid>
       </h:panelGrid>
       </h:panelGrid>
       </rich:panel>
      </a4j:region>
      


      The request executes successfully, all updates are performed and the application is successfully invoked. I even get the correct response -- it's just accompanied by the JS error mentioned above.

      Here's a4j Logger output for the entire request:

      debug[9:50:13,456]: Start XmlHttpRequest
      debug[9:50:13,456]: Reqest state : 1
      debug[9:50:13,471]: QueryString: AJAXREQUEST=addEmpForm%3Areg2&addEmpForm%3Alname=leish&addEmpForm%3Afname=&addEmpForm%3ApersonResultBox=45232&addEmpForm=addEmpForm&addEmpForm%3AsaveButton=addEmpForm%3AsaveButton&
      debug[9:50:13,893]: Reqest state : 2
      debug[9:50:13,893]: Reqest state : 3
      debug[9:50:13,909]: Reqest state : 4
      debug[9:50:13,925]: Reqest end with state 4
      debug[9:50:13,925]: Response with content-type: text/html; charset=ISO-8859-1debug[9:50:13,925]: Full response content: ... correctly rendered content from the action's success outcome... debug[9:50:13,940]: Header Ajax-Response not found, search in <meta>
      debug[9:50:13,956]: Header Ajax-Expired not found, search in <meta>
      warn[9:50:13,956]: No ajax response header
      debug[9:50:13,971]: Header Location not found, search in <meta>
      debug[9:50:13,987]: replace all page content with response
      debug[9:50:13,987]: setup custom document.open method
      debug[9:50:14,003]: call selectSingleNode for id= org.ajax4jsf.oncomplete
      debug[9:50:14,034]: window.document has opened for writing


      This output seems to support my theory that something's wrong with the window.document.write call, given that the last line in the log is the one immediately preceding that call. After that call, the logger quits working, and I get the IE error shown above. Furthermore, the response shown in the call is the correctly rendered response for the success outcome I was looking for.

      Any ideas what I'm doing wrong here?

      Thanks!!!

        • 1. Re: RichFaces 3.1.0:  IE 6 JavaScript errors after successfu

          What the "#{addRoomOccupant.savePersonAssignment}" method return ?

          • 2. Re: RichFaces 3.1.0:  IE 6 JavaScript errors after successfu
            melvinhil

            Thanks for replying...

            It returns one of two faces outcomes, both of which are forwarded to other JSF/JSPs that process fine. I can see the actual responses in the a4j log. I seem to be getting the error regardless which outcome the method returns.

            Here's a sample response from the a4j log (as you can see it's nothing fancy - just a standard JSF form, no javascript of its own or anything):

            debug[12:27:21,543]: Full response content:
            <html>
            <head>
            <title>promptForPrimary</title>
            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
            <meta name="GENERATOR" content="Rational Application Developer">
            <link rel="stylesheet" href="../theme/infowindow.css" type="text/css">
            </head>
            <body class="info">
            You successfully added
            <span id="personName" style="font-weight:bold">S Vincent Hilton</span>
            to
            <span style="font-weight:bold">Admin C/1/502.</span>
            This person now has more than one location.
            <br>
            <br>
            <strong>Which is this person's primary location?</strong>
            <form id="chooseLocForm" method="post"
             action="/Locator/admin/choosePrimaryLoc.faces" class="info"
             enctype="application/x-www-form-urlencoded">
            <table id="chooseLocForm:changePrimary" class="info">
             <tr>
             <td><label for="chooseLocForm:changePrimary"><input
             type="radio" name="chooseLocForm:changePrimary" value="11">
             Admin C/1/502</label></td>
             </tr>
             <tr>
             <td><label for="chooseLocForm:changePrimary"><input
             type="radio" name="chooseLocForm:changePrimary" value="10">
             Admin C/1/503</label></td>
             </tr>
             <tr>
             <td><label for="chooseLocForm:changePrimary"><input
             type="radio" name="chooseLocForm:changePrimary" value="3">
             Admin C/1/603</label></td>
             </tr>
            </table>
            <p style="text-align:center"><input id="chooseLocForm:button"
             type="submit" name="chooseLocForm:button" value="Submit" /></p>
            <input type="hidden" name="chooseLocForm" value="chooseLocForm" /></form>
            </body>
            </html>
            


            • 3. Re: RichFaces 3.1.0:  IE 6 JavaScript errors after successfu

              If you want to have an Ajax Response (with partial page update) , the action method must return null.

              If you want to have a full page update as a response on Ajax button clicking, you need to have a declared for the navigation rule.

              Read more about Ajax and Non-Ajax responses at:
              http://livedemo.exadel.com:8091/richfaces-demo/richfaces/ajaxAttributes.jsf?c=ajaxattributes (Action and Navigation section)


              So, what do you want in this particular case?

              • 4. Re: RichFaces 3.1.0:  IE 6 JavaScript errors after successfu
                melvinhil

                Full page update. Here's my navigation...

                <navigation-rule>
                 <from-view-id>/admin/addRoomOccupant.jsp</from-view-id>
                 <navigation-case>
                 <from-outcome>success</from-outcome>
                 <to-view-id>/admin/roomOccupants.faces</to-view-id>
                 </navigation-case>
                 <navigation-case>
                 <from-outcome>choosePrimary</from-outcome>
                 <to-view-id>/admin/choosePrimaryLoc.faces</to-view-id>
                 </navigation-case>
                </navigation-rule>
                


                The response you saw was fro the "choosePrimary" outcome.

                I noticed the a4j:include paragraph in the link you sent. My scenario is wizard-like - but I've been using iframes and doing full-page instead of partial page updates. I don't know that I really need an include-like functionality, though I'll certainly try it if that's your recommendation.

                Again, thanks!

                • 5. Re: RichFaces 3.1.0:  IE 6 JavaScript errors after successfu

                  It is another store. If you use a4j:include (you did not show it in your code snippet), you do not have to use

                  So, the important part is missing in your previous posts.

                  What exactly is wrapped with a4j:include? Do you use facelets?

                  • 6. Re: RichFaces 3.1.0:  IE 6 JavaScript errors after successfu
                    melvinhil

                    I'm not using a4j:include right now.

                    I'm not using facelets either, though I think I'd like to go that route, based on what I've seen...

                    Here's the whole JSP from the first post (sorry for not including the whole thing earlier!):

                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
                    <%-- jsf:pagecode language="java" location="/src/com/atk/locator/view/admin/AddRoomOccupantBean.java" --%><%-- /jsf:pagecode --%>
                    <%@page language="java" contentType="text/html; charset=ISO-8859-1"
                     pageEncoding="ISO-8859-1"%>
                    <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
                    <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
                    <%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
                    <%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                    <html>
                    <head>
                    <title>addRoomOccupant</title>
                    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
                    <meta name="GENERATOR" content="Rational Application Developer">
                    </head>
                    <f:view>
                     <body>
                    
                     <h:form id="addEmpForm">
                    
                     <h:panelGrid id="outerGrid" columns="1"
                     style="position:absolute; top:0px; left:0px;">
                    
                     <a4j:region id="reg1">
                     <rich:panel id="personSearchPanel">
                     <h:panelGrid id="personSearchFormOuterPanelGrid" columns="1">
                     <h:panelGrid id="personSearchFormInnerPanelGrid" columns="3">
                     <h:outputText id="lnamelabel" value="Last Name" />
                     <h:outputText id="fnamelabel" value="First Name" />
                     <h:outputText id="blanktxt1" value=" " />
                     <h:inputText id="lname" size="10"
                     value="#{addRoomOccupant.lastName}">
                     </h:inputText>
                     <h:inputText id="fname" size="10"
                     value="#{addRoomOccupant.firstName}">
                     </h:inputText>
                     <a4j:commandButton id="searchButton" value="Search"
                     action="#{addRoomOccupant.search}" reRender="personResultGrid"/>
                     </h:panelGrid>
                     <rich:spacer id="spacer1" height="1" width="375"></rich:spacer>
                     </h:panelGrid>
                     </rich:panel>
                     </a4j:region>
                    
                     <a4j:region id="reg2">
                     <h:panelGrid id="personResultGrid" columns="2">
                     <h:panelGrid id="formPanel" columns="1"
                     rendered="#{addRoomOccupant.personResults != null}">
                     <h:selectOneMenu id="personResultBox"
                     value="#{addRoomOccupant.personId}"
                     validator="#{addRoomOccupant.validateAssignment}">
                     <f:selectItems value="#{addRoomOccupant.personResults}" />
                     </h:selectOneMenu>
                     <h:panelGrid id="buttonMsgGrid" columns="2" style="width:100%"
                     columnClasses="left, right">
                     <a4j:commandButton id="saveButton"
                     action="#{addRoomOccupant.savePersonAssignment}" value="Save"
                     type="button"/>
                     <h:messages id="errors" style="color:red;font-weight:bold" />
                     </h:panelGrid>
                     </h:panelGrid>
                     <h:outputText id="noResults" value="No results found."
                     style="font-weight:bold;"
                     rendered="#{addRoomOccupant.isResultsEmpty}" />
                     </h:panelGrid>
                     </a4j:region>
                     </h:panelGrid>
                    
                     <a4j:log level="ALL" popup="true" width="400" height="400"/>
                    
                     </h:form>
                    
                     </body>
                    </f:view>
                    </html>
                    


                    Thanks again...

                    • 7. Re: RichFaces 3.1.0:  IE 6 JavaScript errors after successfu

                      Ok. I am lost on the way.

                      if you have reRender, you want to have partial page update. In this case, the action method must return null

                      If you have an outcome in the action method, it will be the whole page update. Having reRender in this case doe s not make a sense.

                      • 8. Re: RichFaces 3.1.0:  IE 6 JavaScript errors after successfu
                        melvinhil

                        OK - maybe that's why I left the gory details of region 1 out the first time.

                        The problem I'm having is strictly on the whole-page update I'm doing in region 2 - that region is like its own form, and has no reRender on its action.

                        Here's the page's workflow:

                        1) User sees the page the first time, and only sees region 1 form.
                        2) User submits region 1 form, which queries a list of employees, and does a reRender in region 2 (partial update).
                        3) User chooses one of the results now showing in region 2, and submits the form in region 2 for a whole-page update
                        4) Both regions 1 and 2 disappear (the whole page), and an entirely different page is returned by the response.

                        This is all working correctly, except for the JS error I get after the whole page update. That error only occurs in IE 6 (no errors in FireFox, Safari, etc).

                        Maybe the whole thing is too complex.... then again, AJAX is complex by nature.

                        Once again, I really appreciate your replies...




                        • 9. Re: RichFaces 3.1.0:  IE 6 JavaScript errors after successfu
                          ilya_shaikovsky

                          please use

                          <redirect/>
                          


                          In your navigation rule. If the error disappears?

                          • 10. Re: RichFaces 3.1.0:  IE 6 JavaScript errors after successfu
                            melvinhil

                            Wow - that was too easy. Next time give me a more complicated solution so I don't feel so stupid. ;)

                            Thanks Sergey & Ilya! [/img]