4 Replies Latest reply on Sep 19, 2009 2:24 PM by Alexander Smirnov

    how <a4j:jsFunction> really works?

    JLuis - Newbie

      I don't know if I've understand properly how <a4j:jsFunction> works.

      The next example runs ok:

      <table width="400">
       <tr>
       <td onmouseover="updateStyle('#CDEB8B', '16')">Mint, 14px</td>
       <td onmouseover="updateStyle('#FFFF88', 20)">Yellow, 20px</td>
       <td onmouseover="updateStyle('#6BBA70', 24)">Green, 24px</td>
       </tr>
      </table>
      <h:panelGrid id="showname">
       <h:outputText value="I love Ajax"
       style="font-size:#{jsFunctionBean.size}px;background-color:#{jsFunctionBean.name}" />
      </h:panelGrid>
      <a4j:jsFunction name="updateStyle" reRender="showname">
       <a4j:actionparam name="param1" assignTo="#{jsFunctionBean.name}" />
       <a4j:actionparam name="param2" assignTo="#{jsFunctionBean.size}" />
      </a4j:jsFunction>
      


      ... But if I include the JavaScript function declaration, it isn't got called:

      <script>
      function updateStyle(color, size) {
       alert(color + ' ' + size);
      }
      </script>
      


      Does somebody know why?
      Thanks.


        • 1. Re: how <a4j:jsFunction> really works?
          liumin hu Master


          a4j:jsFunction is not for that.

          i think what u need is a a4j:support on your td

          or jquery.

          • 2. Re: how <a4j:jsFunction> really works?
            Nick Belaevski Master

             

            "SvenHassel" wrote:
            I don't know if I've understand properly how <a4j:jsFunction> works.

            The next example runs ok:

            <table width="400">
             <tr>
             <td onmouseover="updateStyle('#CDEB8B', '16')">Mint, 14px</td>
             <td onmouseover="updateStyle('#FFFF88', 20)">Yellow, 20px</td>
             <td onmouseover="updateStyle('#6BBA70', 24)">Green, 24px</td>
             </tr>
            </table>
            <h:panelGrid id="showname">
             <h:outputText value="I love Ajax"
             style="font-size:#{jsFunctionBean.size}px;background-color:#{jsFunctionBean.name}" />
            </h:panelGrid>
            <a4j:jsFunction name="updateStyle" reRender="showname">
             <a4j:actionparam name="param1" assignTo="#{jsFunctionBean.name}" />
             <a4j:actionparam name="param2" assignTo="#{jsFunctionBean.size}" />
            </a4j:jsFunction>
            


            ... But if I include the JavaScript function declaration, it isn't got called:

            <script>
            function updateStyle(color, size) {
             alert(color + ' ' + size);
            }
            </script>
            


            Does somebody know why?
            Thanks.

            Hello,

            This code creates two functions named "updateStyle". Only one is left in the variables scope and it is being called.

            a4j:support wont' work with plain HTML tags because they're not components; so try jQuery.

            • 3. Re: how <a4j:jsFunction> really works?
              JLuis - Newbie

              Thank you both.
              I misunderstood this tag functionality.

              • 4. Re: how <a4j:jsFunction> really works?
                Alexander Smirnov Master

                a4j:function itself defines JavaScript function with given name:

                <script >
                function updateStyle(param1,param2) {
                 // AJAX call
                }
                </script>
                

                So you call it from your code:
                ........
                updateStyle("foo","bar");
                .........