1 Reply Latest reply on May 6, 2010 6:25 PM by Nikos Paraskevopoulos

    Call component method via AJAX

    Heiko Tappe Newbie

      Hopefully the right place to ask!?


      I managed to call a method action in a seam component handler via AJAX:


      A4J.AJAX.Submit("#{handler.action(1)}", null, null);
      



      And the action argument 1 arrives as a Long.


      Now I would like to provide some JavaScript variable as the function argument.


      Something like this (though this example doesn't work of course):


      var myNumber = 1;
      A4J.AJAX.Submit("#{handler.action(myNumber)}", null, null);
      



      How can I achieve that?



      --Heiko

        • 1. Re: Call component method via AJAX
          Nikos Paraskevopoulos Novice

          Hello,


          You are using Ajax4JSF, so I suggest you use this super-cool feature: <a:jsFunction>. Combined with the data attribute of A4J, it integrates the JSF and Javascript worlds seamlessly. Example:


          <a:jsFunction name="myAction" action="#{handler.action}" data="#{handler.resultData}" onComplete="doClientSideStuff(data)">
            <a:actionParam assignTo="#{handler.someProp}" name="xxx" value="xxx" noEscape="true" />
          </a:jsFunction>
          



          This snippet will create a JS function taking 1 argument, like:


          function myAction(xxx) { ... }
          



          The function will submit the form (unless you specify ajaxSingle), and will tranfer its argument (named xxx here) to the property someProp of the handler backing bean. At the render response phase, the value of #{handler.resultData} will be serialized to JSON and put in the client-side variable called data. This variable will be used as argument of the doClientSideStuff() JS function. This function, doClientSideStuff(), will be called in addition to any reRendered components.


          We are using this in my current project to bind rich client-side components with JSF, without the need of refreshing and full server-side rendering. You will more in the documents, and it may need a little experimenting. Good luck!