I have an application with a client-side image map with multiple sections defined. I need to call a method in the Managed Bean from the <area> onclick attribute.
This doesn't work:
<area id="ReviewPerson" shape="rect" coords="3, 21, 164, 37" href="#"
onclick="#{personBean.method}" alt="Review Person" id="reviewPersonArea"
title="Review Person" />
Since my hands are tied on the image map (unfortunately), how can I call a managed bean method from within the <area> tag?
If you use primefaces, you don't need jquery. You use remoteCommand with a name attribute, and call that name from javascript, so:
<area... onclick="somejavascript();"... />
<p:remoteCommand name="myCommand" actionListener="#{personBean.method}" style="display: none;" />
Javascript:
function somejavascript(){
myCommand();
}
onclick="myCommand();" ?
You have a few options. If you are using JSF 2.0 you can build a composite component around these area tags.
The easiest way however would be to invoke a hidden JSF input button.
<h:commandButton id="hdnBtn" actionListener="#{personBean.method}" style="display: none;" />
This will render as an input HTML element on the page that you can access from Javascript and invoke its click event.
onclick="jQuery('#form:hdnBtn').click();"
If you use Seam, Remoting can do this for you: http://docs.jboss.org/seam/2.2.0.GA/reference/en-US/html/remoting.html
Another approach would be do expose the methods as REST services, and call them from your JavaScript using something like jQuery. Here's a good article on this approach: http://coenraets.org/blog/2011/12/restful-services-with-jquery-and-java-using-jax-rs-and-jersey/
If you want complete ADF Faces solution you can try this:
function doClick(){
var button = AdfPage.PAGE.findComponentByAbsoluteId("aButton");
ActionEvent.queue(button,true);
}
This is the most up to date answer, for Java EE 8 (JSF 2.3)
use <h:commandScript> this will create a javascript function which will under the hood invoke the jsf backing bean method, and because it's a javascript you can invoke it from your js code
example jsf
<h:form>
<h:commandScript id="submit"
name="jsFunction"
action="#{bean.method}"/>
</h:form>
and the js code
</script>
function invoke()
{
jsFunction();
}
</script>
for more visit Ajax method invocation
If you use primefaces, you can use a hidden input field linked to a managed bean, and you can initialize its value using javascript, for PrimeFaces, the PF function can be used to access a widget variable linked to the hidden input, in this way:
<script>
function codeLoginAddress() {
PF('wvLoginLat').jq.val( lat1 ); // set in getLocation
PF('wvLoginLng').jq.val( lng1 )
}
<script>
<p:inputText type="hidden" widgetVar="wvLoginLat" value="#{userSession.lat}" />
<p:inputText type="hidden" widgetVar="wvLoginLng" value="#{userSession.lng}" />
<script>
// at end of page, initialization code
getLocation(); // sets lat1 and lng1
codeLoginAddress(); // sets the value of the widget variables
</script>
