[richfaces-issues] [JBoss JIRA] (RF-13567) JavaScriptService executes javascript before the complete event

Brian Leathem (JIRA) issues at jboss.org
Thu Mar 6 12:48:33 EST 2014


    [ https://issues.jboss.org/browse/RF-13567?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12950827#comment-12950827 ] 

Brian Leathem commented on RF-13567:
------------------------------------

Thanks for the reply [~lfryc]

As per the spec:

{code:title=JSF Spec, section 14.4.1}
begin 
     Occurs immediately before the request is sent.
complete 
     Occurs immediately after the request has completed. For successful
     requests, this is immediately before javax.faces.response is called. For
     unsuccessful requests, this is immediately before the error handling
     callback is invoked.
success 
     Occurs immediately after jsf.ajax.response has completed.
{code}

This implies to me that the "oncomplete" event is fired after the response is received, but before the response is processed.  This is confirmed by Manfred Riem in IRC:

{code}
                │09:34:29   bleathem | the "oncomplete" event occurs "Occurs immediately after the request has completed."
                │09:34:39   bleathem | is that before or after the DOM is updated?
                │09:35:10      mriem | I would assume it would be after  
                │09:35:17      mriem | As it signals completion                
                │09:35:20        --> | bunbury (~bunbury at 207.204.71.18) has joined ##jsf      
                │09:35:29      mriem | Let me check    
                │09:35:39   bleathem | so whhat happens between "complete" and "success"?   
                │09:35:53   bleathem | Success "Occurs immediately after jsf.ajax.response has completed."
                │09:38:21      mriem | Mmm, looks like complete is there so you can do manual processing of the response 
                │09:38:43      mriem | From the docs "If the request completed successfully invoke
                │                    | file:///Users/mriem/Documents/JSF%20Specifcations/JSF%202.2%20Specification/jsdocs/symbols/jsf.ajax.html#.response 
                │                    | passing the request object." 
                │09:38:48   bleathem | so complete is before the response is processed? 
                │09:38:56      mriem | Yes looks like it    
                │09:39:02      mriem | The request completed.
                │09:39:15      mriem | But has not been handled by the response function yet
{code}

Finally this is consistent with descriptions given [on stackoverflow|http://stackoverflow.com/questions/13540298/proccess-onclick-function-after-ajax-call-fajax].

So IMO we need to change the javascript service to execute with the _success_ event, rather than the _complete_ event.
                
> JavaScriptService executes javascript before the complete event
> ---------------------------------------------------------------
>
>                 Key: RF-13567
>                 URL: https://issues.jboss.org/browse/RF-13567
>             Project: RichFaces
>          Issue Type: Bug
>      Security Level: Public(Everyone can see) 
>            Reporter: Brian Leathem
>
> Using the javascript service to execute jQuery plugins ends up with the plugin being executed before the new elements are placed in the DOM.  This results in stale element references during subsequent plugin execution.
> Console log with r:log enabled:
> {code}
> RichFaces: New request added to queue. Queue requestGroupingId changed to form1:richTable:0:collapsibleSubTable log.js:195
> RichFaces: Queue will wait 0ms before submit log.js:195
> RichFaces: richfaces.queue: will submit request NOW log.js:195
> RichFaces: Received 'begin' event from <tbody id=form1:richTable:0:collapsibleSubTable class=rf-cst ...> log.js:195
> Destroy called for sub-table-bridge of element: form1:richTable:0:collapsibleSubTable sub-table-bridge.js:89
> Destroy called for sub-table of element: form1:richTable:0:collapsibleSubTable sub-table.js:71
> RichFaces: Received 'beforedomupdate' event from <tbody id=form1:richTable:0:collapsibleSubTable class=rf-cst ...> log.js:195
> RichFaces: <span>Server returned responseText: </span><span class="rf-log-entry-msg-xml">&lt;partial-response id="j_id1"&gt;&lt;changes&gt;&lt;update id="form1:richTable:0:collapsibleSubTable"&gt;&lt;![CDATA[&lt;tbody id="form1:richTable:0:collapsibleSubTable" class="rf-cst"&gt;&lt;tr id="form1:richTable:0:collapsibleSubTable:f" class="rf-cst-ftr"&gt;&lt;td class="rf-cst-ftr-c" colspan="3"&gt;footer&lt;ul class="data-scroller " id="form1:richTable:0:collapsibleSubTable:subscroller"&gt;&lt;li&gt;&lt;a class="rf-ds-btn rf-ds-btn-first rf-ds-dis" id="form1:richTable:0:collapsibleSubTable:subscroller_ds_f"&gt;««««&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="rf-ds-btn rf-ds-btn-fastrwd rf-ds-dis" id="form1:richTable:0:collapsibleSubTable:subscroller_ds_fr"&gt;««&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="rf-ds-btn rf-ds-btn-prev rf-ds-dis" id="form1:richTable:0:collapsibleSubTable:subscroller_ds_prev"&gt;«&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="rf-ds-btn rf-ds-btn-next rf-ds-dis" id="form1:richTable:0:collapsibleSubTable:subscroller_ds_next"&gt;»&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="rf-ds-btn rf-ds-btn-fastfwd rf-ds-dis" id="form1:richTable:0:collapsibleSubTable:subscroller_ds_ff"&gt;»»&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="rf-ds-btn rf-ds-btn-last rf-ds-dis" id="form1:richTable:0:collapsibleSubTable:subscroller_ds_l"&gt;»»»»&lt;/a&gt;&lt;/li&gt;&lt;script type="text/javascript"&gt;new RichFaces.ui.DataScroller("form1:richTable:0:collapsibleSubTable:subscroller",function(event,element,data){RichFaces.ajax("form1:richTable:0:collapsibleSubTable:subscroller",event,{"parameters":{"form1:richTable:0:collapsibleSubTable:subscroller:page":data.page} ,"incId":"1"} )},{"digitals":{} ,"buttons":{} ,"currentPage":1} )&lt;/script&gt;&lt;/ul&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr id="form1:richTable:0:collapsibleSubTable:sc" style="display: none;"&gt;&lt;td&gt;&lt;input id="form1:richTable:0:collapsibleSubTable:state" name="form1:richTable:0:collapsibleSubTable:state" type="hidden" value="0" /&gt;&lt;input id="form1:richTable:0:collapsibleSubTable:options" name="form1:richTable:0:collapsibleSubTable:options" type="hidden" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;]]&gt;&lt;/update&gt;&lt;update id="j_id1:javax.faces.ViewState:0"&gt;&lt;![CDATA[-7868019542578483246:-4058924891838140372]]&gt;&lt;/update&gt;&lt;extension id="org.richfaces.extension"&gt;&lt;complete&gt;RichFaces.jQuery(document.getElementById('form1:richTable:0:collapsibleSubTable')).subTableBridge({"optionsInput":"form1:richTable:0:collapsibleSubTable:options","formId":"form1","expandMode":"ajax","stateInput":"form1:richTable:0:collapsibleSubTable:state","eventOptions":{"incId":"1"} } );RichFaces.javascriptServiceComplete();;&lt;/complete&gt;&lt;render&gt;form1:richTable:0:collapsibleSubTable at body &lt;/render&gt;&lt;/extension&gt;&lt;/changes&gt;&lt;/partial-response&gt;</span> log.js:195
> RichFaces: <span>Listing content of response <b>changes</b> element:<br>Element <b>update</b> for id=form1:richTable:0:collapsibleSubTable<br><span class="rf-log-entry-msg-xml">&lt;update id="form1:richTable:0:collapsibleSubTable"&gt;&lt;![CDATA[&lt;tbody id="form1:richTable:0:collapsibleSubTable" class="rf-cst"&gt;&lt;tr id="form1:richTable:0:collapsibleSubTable:f" class="rf-cst-ftr"&gt;&lt;td class="rf-cst-ftr-c" colspan="3"&gt;footer&lt;ul class="data-scroller " id="form1:richTable:0:collapsibleSubTable:subscroller"&gt;&lt;li&gt;&lt;a class="rf-ds-btn rf-ds-btn-first rf-ds-dis" id="form1:richTable:0:collapsibleSubTable:subscroller_ds_f"&gt;««««&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="rf-ds-btn rf-ds-btn-fastrwd rf-ds-dis" id="form1:richTable:0:collapsibleSubTable:subscroller_ds_fr"&gt;««&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="rf-ds-btn rf-ds-btn-prev rf-ds-dis" id="form1:richTable:0:collapsibleSubTable:subscroller_ds_prev"&gt;«&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="rf-ds-btn rf-ds-btn-next rf-ds-dis" id="form1:richTable:0:collapsibleSubTable:subscroller_ds_next"&gt;»&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="rf-ds-btn rf-ds-btn-fastfwd rf-ds-dis" id="form1:richTable:0:collapsibleSubTable:subscroller_ds_ff"&gt;»»&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="rf-ds-btn rf-ds-btn-last rf-ds-dis" id="form1:richTable:0:collapsibleSubTable:subscroller_ds_l"&gt;»»»»&lt;/a&gt;&lt;/li&gt;&lt;script type="text/javascript"&gt;new RichFaces.ui.DataScroller("form1:richTable:0:collapsibleSubTable:subscroller",function(event,element,data){RichFaces.ajax("form1:richTable:0:collapsibleSubTable:subscroller",event,{"parameters":{"form1:richTable:0:collapsibleSubTable:subscroller:page":data.page} ,"incId":"1"} )},{"digitals":{} ,"buttons":{} ,"currentPage":1} )&lt;/script&gt;&lt;/ul&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr id="form1:richTable:0:collapsibleSubTable:sc" style="display: none;"&gt;&lt;td&gt;&lt;input id="form1:richTable:0:collapsibleSubTable:state" name="form1:richTable:0:collapsibleSubTable:state" type="hidden" value="0" /&gt;&lt;input id="form1:richTable:0:collapsibleSubTable:options" name="form1:richTable:0:collapsibleSubTable:options" type="hidden" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;]]&gt;&lt;/update&gt;</span><br>Element <b>update</b> for id=j_id1:javax.faces.ViewState:0<br><span class="rf-log-entry-msg-xml">&lt;update id="j_id1:javax.faces.ViewState:0"&gt;&lt;![CDATA[-7868019542578483246:-4058924891838140372]]&gt;&lt;/update&gt;</span><br>Element <b>extension</b> for id=org.richfaces.extension<br><span class="rf-log-entry-msg-xml">&lt;extension id="org.richfaces.extension"&gt;&lt;complete&gt;RichFaces.jQuery(document.getElementById('form1:richTable:0:collapsibleSubTable')).subTableBridge({"optionsInput":"form1:richTable:0:collapsibleSubTable:options","formId":"form1","expandMode":"ajax","stateInput":"form1:richTable:0:collapsibleSubTable:state","eventOptions":{"incId":"1"} } );RichFaces.javascriptServiceComplete();;&lt;/complete&gt;&lt;render&gt;form1:richTable:0:collapsibleSubTable at body &lt;/render&gt;&lt;/extension&gt;</span><br></span> log.js:195
> Create called for sub-table-bridge of element: form1:richTable:0:collapsibleSubTable sub-table-bridge.js:42
> Create called for sub-table of element: form1:richTable:0:collapsibleSubTable sub-table.js:22
> RichFaces: richfaces.queue: ajax submit successfull log.js:195
> RichFaces: richfaces.queue: Nothing to submit log.js:195
> RichFaces: Received 'success' event from <tbody id=form1:richTable:0:collapsibleSubTable class=rf-cst ...> log.js:195
> RichFaces: Received 'complete' event from <tbody id=form1:richTable:0:collapsibleSubTable class=rf-cst ...> log.js:195
> {code}
> Note the "create" debug statements called from the plugin _create methods occur before we get to the complete event.

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira



More information about the richfaces-issues mailing list