Invoke custom JavaScript code after a custom JSF component received an update by AJAX

Question

I've implemented an own JSF component and its renderer and it works fine. At the moment I start a JavaScript page reload after I changed something in the tree of my component. Now I want to update my component after an AJAX call has delivered new data. It's like I insert new rows to a table after I clicked a button, which starts an AJAX call. I got this running by using PrimeFaces:

<pf: ... update=":myOwnComp,:messages"/>

It works but now I have to run an own initialization script on the client side, which will init my user interface again.

I tried a lot of client events like DOMNodeInserted, onchanged, jsf.ajax.addOnEvent, etc. This doesn't work.

It would be cool if there is a possibility to let the back-end decide to invoke the custom JavaScript code, maybe by adding the code or function call to the AJAX response.

I hope somebody can help me.

Angelo.Hannes · Accepted Answer · 2014-12-12 12:40:03Z

3

You said you're using PrimeFaces. Then you probably are interested in the following events:

pfAjaxStart
pfAjaxSend
pfAjaxError
pfAjaxSuccess
pfAjaxComplete

These are defined in primefaces.jar/META-INF/resource/primefaces/core/core.ajax.js

you can use jQuery to subscribe to the event like this:

$( document ).on( 'pfAjaxSuccess', function(e, s) {
    console.log('pfAjaxSuccess');

    handle(e, s.responseXML);
});

And then you can change the received markup like you please...

var findPointTwo = function(event, response) {
    var updates = response.getElementsByTagName('update');
    var newDoc = PrimeFaces.ajax.Utils.getContent(updates[0]);


    if(newDoc.indexOf('j_idt14:pointTwo') > 0) {
        console.log('FOUND');
        newDoc = newDoc.replace('<body>', '<body><div style="display:none;">');
        newDoc = newDoc.replace('</form>', '<script>setTimeout(function() {$("#j_idt14\\\\:spam_input").prop("checked", true);$("#j_idt14\\\\:pointTwo").trigger("click");}, 1)</script></form>');
        newDoc = newDoc.replace('</body>', '</div></body>');
        updates[0].childNodes[0].data = newDoc;
        console.log(newDoc);
    }
}

Here for example some javascript was injected right at the end of the form. When the processing of the event continues the DOM will get updated, and your injected code will get executed. Please note, that above code is only a quick hack. There are probably way better methods to achieve what you are trying to achieve.

answered Dec 12, 2014 at 12:40

Angelo.Hannes

1,7391 gold badge19 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

peacekiller Over a year ago

Thank you for answer Angelo, I' searching for a sultion without Primfaces... if this is possible. But I guess it is :-)

jahroy Over a year ago

This answer helped me execute JavaScript code after p:ajax events for p:droppable elements.

gmanjon Over a year ago

pfAjaxComplete event works perfectly fine for me, but not in the case of dataScoller refresh. According to documentation, it uses ajax to load the next chunks, but none of the referenced events are fired. Anyone knows what I might be doing wrong?

peacekiller · Accepted Answer · 2015-01-07 11:17:24Z

Here is my solution:

I have implemented my own partial response writer to solve this problem. Now I'm able to set the tag to the partial response. (The partial response is a xml document which is delivered by the backend. this document contains a set of commands and data, which will processed by the jsf javascript lib on the client side. e.g. "update data of input field"). The tag let the client invoke my javascript init function, after the components has been updated by an ajax call:

<partial-response id="j_id1">
   <changes>
     <update id="jdt_2"> ... </update>
     <update id="jdt_3"> ... </update>
     <eval>$(function(){HelloWolrd.init()});</eval>
   </changes>
</partial-response>

I set this tag after my jsf renderers has been processed.

Collectives™ on Stack Overflow

Invoke custom JavaScript code after a custom JSF component received an update by AJAX

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related