How to call managed bean methods with parameters via JavaScript

Question

I am developing a web application and I use JSF and PrimeFaces frameworks and external Geo Map API.

The Map API gives me POI_id when I clicked on a POI on the map. But it's not enough for me, I want to get information about POI from a servlet and display it in a pop-up window. (fields like address, name, phone number, etc.).

So, I need to send an HTTP request to the servlet in my managed bean when I click the POI on the map.

I can get poi_id, but I cannot send this id to the backend managed bean, so getting the POI information does not seem possible.

How can I send poi_id to my managed bean and handle the response to display in a popup window?

Answer 1

You can use PrimeFaces remote command component (<p:remoteCommand>).

RemoteCommand enables executing backing bean methods and do partial update triggered by custom client side script.

Add it to the view it in a following way:

<p:remoteCommand name="myRemote" actionListener="#{myBean.listen}"/>

And use it in Javascript like so:

<script type="text/javascript">
   myRemote(); //makes a remote call
</script>

or call it from an event handler like so:

<div onclick="myremote();">...</div>

If you additionally want to pass parameters to the server make a following call:

<script type="text/javascript">
   myRemote([{name:'param1', value:150}, {name:'param2', value:220}]); //makes a remote call with parameters
</script>

The listener could be like:

public void listen(){
    FacesContext context = FacesContext.getCurrentInstance();
    Map<String,String> params = context.getExternalContext().getRequestParameterMap();
    System.out.println(params.get("param1"));
    System.out.println(params.get("param2"));
}

One of the comments asked to return a Value to Javascript.
Well in that case you can use Primeface's Request Context's execute() method to execute any javascript you want.

RequestContext.getCurrentInstance().execute("your javascript code");

Answer 2

Just to add to Kishor's (halfway) answer, you need to have a to-be-updated component in your view (popup window as you call it) and ajax-update it after the request has been successfully completed.

You can use remote command to send the AJAX request with an extra parameter attached and ajax-update the JSF component responsible to be a popup window. Like so (for PrimeFaces 3.x):

<p:remoteCommand name="myRemote" actionListener="#{myBean.listen}" 
                 update="dialog" oncomplete="dlg.show()" />
...
<div onclick="myremote([{name:'poi_id', value:poi_id}]);">...</div>
...
<p:dialog id="dialog" widgetVar="dlg">
    <h:outputText value="#{myBean.address}" />
    ...(display other information)
</p:dialog>

with

String address;
public void listen(){
    String poi_id = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("poi_id");
    address = getAddress(poi_id);
}

The alternative to using a remote command is to have a hidden form with a hidden input that will be used to transmit the parameter to the backing bean, that could be separated from other beans to handle the retrieval of necessary information based on your poi_id:

<h:form id="poi-form" styleClass="invisible">
    <h:inputHidden id="poi" value="#{poiBean.poi}" />
    <p:commandButton id="info" action="#{poiBean.info}"
                     update="dialog" oncomplete="dlg.show()" />
</h:form>
<div onclick="document.getElementById('poi-form:poi').value = poi_id; 
              document.getElementById('poi-form:info').click();">...</div>
...
<p:dialog id="dialog" widgetVar="dlg">
    <h:outputText value="#{poiBean.address}" />
    ...(display other information)
</p:dialog>

with

@ManagedBean
@RequestScoped
public class PoiBean {

    private String poi;//getter+setter
    private String address;//getter
    //other properties

    public void listen(){
        address = getAddress(poi);
        //other properties
    }

}