Question

I need to create links on webpage which call a javascript function with different parameters on being triggered by onclick event. Thus function needs to be passed a paramter.

In my code as shown below, I am passing a parameter to wr() function when calling from onclick within commandLink. Howver the code doesnt successfully execute if I pass i as parameter to wr() function within onclick, but is successful if I pass a constant ie, wr(4). How can I successfully pass a variable parameter to this javascript function ?

            <h:form>
                <ui:repeat value="#{bean.list}" var="i">
                    <p:commandLink onclick="wr(i)" value="#{i}" /><br/>
                </ui:repeat>
            </h:form>

            <p id="e">fd</p>

            <script type="text/javascript" >
                function wr(i){
                    document.getElementById("e").innerHTML="this is "+i+ " !";
                }
            </script>

Answer 1

Shouldn’t your markup for the onclick attribute evaluate the variable ‘i’ using #{i} instead of just passing ‘i’?

So it should be:

<ui:repeat value="#{bean.list}" var="i">
  <p:commandLink onclick="wr(#{i})" value="'#{i}'" /><br/>
</ui:repeat>

Have you used something like FireBug to see what ‘i’ is evaluting too inside of your JS function?

Edit: Updated the markup above to enclose the #{i} expression in single ” quotes