Update component's javascript function upon ajax request

[tdtappe]

I've got some fairly complex component totally written in javascript. Usually it is initialized by an init-function which is called at page-load time.
Now I wrapped it in a jsf component. Everything's fine and works as expected.
But when I try to rerender the component it just doesn't get/use the updated javascript function for initializing the component.
I checked the ajax response and there I can see that it contains the correct data (two divs: one "empty" div that forms the root of the component which is populated by the javascript function
and another div containing the javascript init-function itself).
Upon "oncomplete" of the ajax request I call the javascript function for re-initializing the component. But obviously it just uses the old javascript function
and not the updated one.

Most probably I did it the wrong way - I am pretty new to ajax stuff. So any help is very much appreciated.

--Heiko

[nbelaevski]

Hi Heiko,

Make sure, that ID of the element containing JS function is included into the list passed in "Ajax-Update-Ids". Also root script elements are not updated, so some kind of wrapper (e.g. SPAN) is necessary.

[tdtappe]

Hi Nick,

thank you for your explanations so far!

Make sure, that ID of the element containing JS function is included into the list passed in "Ajax-Update-Ids".

Yes, I also came across this. But I don't know how to influence the list of these IDs. In my xhtml-page the only ID I have access to is the one of the component itself. And this results in two IDs on html level: The ID of the div that later is populated with further divs and other stuff by the javascript function. And the ID of the div containing the javascript function. And the latter isn't listed in "Ajax-Update-Ids".

I tried to nest the javascript-div into the "main" div. But without success. The javascript function still isn't updated.

--Heiko

[nbelaevski]

I tried to nest the javascript-div into the "main" div. But without success. The javascript function still isn't updated.

This should work. Are there any errors/warnings in a4j:log?

But I don't know how to influence the list of these IDs.

Obtain current AjaxContext and add required IDs into ajaxRenderedAreas 

[tdtappe]

This should work. Are there any errors/warnings in a4j:log?

Cool. Didn't know about a4j:log.

And yes. There were errors. The ID of the component could not be found.

So I switched back to two divs on the same level: main div and javascript div. I then wrapped my component (the two divs) in an a4j:outputPanel. I now reRender the outputPanel and call the javascript function to populate the main div in "oncomplete". No errors in a4j:log. And I get a message "Evaluate script replaced area in document" which mentions my updated version of the javascript function. And... IT WORKS!

But I don't know why it didn't work for me before. That was one of the things I tried at the very beginning.

Obtain current AjaxContext and add required IDs into ajaxRenderedAreas 

I will have a look into this. This would be a better solution than having to wrap my component into another element.

Thank you so much!

--Heiko