4 Replies Latest reply on Jul 6, 2010 6:48 AM by Heiko Tappe

    Update component's javascript function upon ajax request

    Heiko Tappe Newbie

      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

        • 1. Re: Update component's javascript function upon ajax request
          Nick Belaevski Master

          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.

          • 2. Re: Update component's javascript function upon ajax request
            Heiko Tappe Newbie

            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

            • 3. Re: Update component's javascript function upon ajax request
              Nick Belaevski Master

              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 

              • 4. Re: Update component's javascript function upon ajax request
                Heiko Tappe Newbie

                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