webtier@glassfish.java.net

JSF2 - Page not updating on Ajax Events

From: Lincoln Baxter, III <lincolnbaxter_at_gmail.com>
Date: Mon, 16 Mar 2009 23:06:51 -0400

Hi JSF2 Ajax Gurus,

Got a weird one... seems like ajax updates are partially broken (were
working in the 1.29.2009 build, but no longer in 3.16.2009)... not
submitting this as a bug because I'm guessing something changed that I
haven't heard about, but, here goes.

The XML comes back fine, but the DOM is sometimes not updated (changes
are never seen client side, and the following JavaScript exception is
thrown)... everything else works fine.
        [Exception... "'Error: jsf.ajax.response: TPLmessages not found'
        when calling method: [nsIDOMEventListener::handleEvent]"
        nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)"
        location: "<unknown>" data: no]



Here is the composite component which refuses to be re-rendered (we give
it the global HTML id of "TPLmessages")


        <!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:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:composite="http://java.sun.com/jsf/composite">
        
        <composite:interface>
                <composite:attribute name="globalOnly" required="false"
        type="Boolean" />
                <composite:attribute name="name" required="false"
        type="Boolean" />
        </composite:interface>
        
        <composite:implementation>
                <h:outputStylesheet name="ocpcommon/TPLmessages.css" />
                <h:outputStylesheet name="ocpcommon/ui.theme.css" />
                <div id="TPLmessages"><h:messages id="messages"
                        globalOnly="#{compositeComponent.attrs.globalOnly}"
                        errorClass="ui-state-error ui-corner-all"
        fatalClass="TPLmessagesFatal"
                        infoClass="ui-state-highlight ui-corner-all"
        warnClass="TPLmessagesWarning" /></div>
        </composite:implementation>
        
        </html>
        
        

Here is where we use the component in our Facelets Template:

        <div id="TPLcontent" class="foreground"><ui:insert
                name="bodyheader">Default Body Header</ui:insert> <ui:insert
                name="messages">
                <ocp:messages id="TPLmessages" globalOnly="true" />
        </ui:insert> <ui:insert name="body">Default Body</ui:insert></div>
        </div>


Here is the relevant generated HTML source from the page:

        
        <td><select
        id="myTasks:pTable:0:j_id162:sTable:2:tTable:0:status"
        name="myTasks:pTable:0:j_id162:sTable:2:tTable:0:status"
        size="1" onchange="jsf.ajax.request(this, event,
        {execute:'myTasks:pTable:0:j_id162:sTable:2:tTable:0:status',render:'TPLmessages'});"> <option value="NOT_STARTED">Not Started</option>
                <option value="IN_PROGRESS" selected="selected">In
        Progress</option>
                <option value="IMPEDED">Impeded</option>
        </select></td>


Here is the XML HTTP response:
--------------------------------------------

        
        <partial-response>
        <changes>
        <update id="TPLmessages">
        <link type="text/css" rel="stylesheet"
        href="/ocpsoft-social-pm/javax.faces.resource/ocpcommon/ui.theme.css.xhtml" /> <div id="TPLmessages"><ul id="TPLmessages:messages"><li class="ui-state-highlight ui-corner-all"> Hours updated: 1 </li></ul></div>
        </update>
        <update id="myTasks:pTable:0:j_id162:sTable:0:tTable:0:hours">
        <input id="myTasks:pTable:0:j_id162:sTable:0:tTable:0:hours"
        type="text"
        name="myTasks:pTable:0:j_id162:sTable:0:tTable:0:hours"
        value="1" size="1" onchange="jsf.ajax.request(this, event,
        {execute:'myTasks:pTable:0:j_id162:sTable:0:tTable:0:hours',render:'myTasks:pTable:0:j_id162:sTable:0:tTable:0:hours TPLmessages'});" />
        </update>
        <update id="javax.faces.ViewState"> ... viewstate
        here ...</update>
        </changes>
        </partial-response>
        
        

Here is the XML HTTP request:

        (Request-Line) POST /ocpsoft-social-pm/home HTTP/1.1
        Host localhost:8080
        User-Agent Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.7)
        Gecko/2009030422 Ubuntu/8.10 (intrepid) Firefox/3.0.7
        Accept text/html,application/xhtml
        +xml,application/xml;q=0.9,*/*;q=0.8
        Accept-Language en-us,en;q=0.5
        Accept-Encoding gzip,deflate
        Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
        Keep-Alive 300
        Connection keep-alive
        Faces-Request partial/ajax
        Content-Type application/x-www-form-urlencoded; charset=UTF-8
        Referer http://localhost:8080/ocpsoft-social-pm/home
        Content-Length 21772
        Cookie com.sun.faces.extensions.flash.PostbackRequest=86;
        JSESSIONID=256aa4e10bac376ddc468860f053;
        SPRING_SECURITY_REMEMBER_ME_COOKIE=bGluY29sbjoxMjM4NDY3ODUwODMwOjllZWNlM2JiZjJlMDM5OTQ2NmYzYjE3MmVmN2UyNTg4
        Pragma no-cache
        Cache-Control no-cache
        
        myTasks myTasks
        myTasks:pTable:0:j_id162:sTable:0:tTable:0:hours 1
        myTasks:pTable:0:j_id162:sTable:0:tTable:0:status NOT_STARTED
        myTasks:pTable:0:j_id162:sTable:1:tTable:0:hours 1
        myTasks:pTable:0:j_id162:sTable:1:tTable:0:status IN_PROGRESS
        myTasks:pTable:0:j_id162:sTable:1:tTable:1:hours 2
        myTasks:pTable:0:j_id162:sTable:1:tTable:1:status NOT_STARTED
        myTasks:pTable:0:j_id162:sTable:2:tTable:0:hours 4
        myTasks:pTable:0:j_id162:sTable:2:tTable:0:status IN_PROGRESS
        javax.faces.ViewState ...viewstate here...
        javax.faces.partial.source
        myTasks:pTable:0:j_id162:sTable:0:tTable:0:hours
        javax.faces.partial.execute
        myTasks:pTable:0:j_id162:sTable:0:tTable:0:hours
        javax.faces.partial.render
        myTasks:pTable:0:j_id162:sTable:0:tTable:0:hours TPLmessages
        javax.faces.partial.ajax true
        myTasks:pTable:0:j_id162:sTable:0:tTable:0:hours 1