Calling Bean Method On Image OnClick Event

I have image and would like to call a method that is store in bean. I was thinking of

Solution 1:

how bout something like this

<h:graphicImage value="DisplayImage?id=1&amp;stuff=photo&amp;mainID=main" 
 onclick="$('#myFormID\\:myButtonID').click();" styleClass="modal"/>
<h:commandButton id="myButtonID" action="#{PersonalInformationDataBean.doSaveImage()}" style="display:none">
    <f:ajax/>
</h:commandButton>

you might have to play a bit with the jquery selector $('#myFormID\\:myButtonID') or $('#myButtonID')

OR

<h:commandLink>
    <f:ajax event="action" listener="#{PersonalInformationDataBean.doSaveImage()}"/>
    <h:graphicImage value="DisplayImage?id=1&amp;stuff=photo&amp;mainID=main" 
    styleClass="modal"/>
</h:commandLink>

Solution 2:

I'm assuming that `#{PersonalInformationDataBean.doSaveImage()}; is a function which you've defined in your server and is not a javascript object method. Correct me if I'm wrong.

The problem here is you're trying to access server side methods from client side javascript. Since HTTP is a stateless protocol, you need some intermediate technology to access those methods.

DWR is a powerful tool that will allow you to achieve exactly this. Check out http://directwebremoting.org/dwr/documentation/index.html .I've used this countless times and it never fails.

Share