how <a4j:jsFunction> really works?

[svenhassel]

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.

[liuliu]

a4j:jsFunction is not for that.

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

or jquery.

[nbelaevski]

"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.

[svenhassel]

Thank you both.
I misunderstood this tag functionality.

[alexsmirnov]

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");
.........