How to call managed bean methods with parameters via JavaScript

Question

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

The map API gives me the POI_id when I clicked on the POI on the map. But for me this is not enough, I want to get information about the POI from the servlet and display it in a pop-up window. (fields such as 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 the POI_id , but I can not send this identifier to the managed bean firewall, so getting the POI information is not possible.

How can I send the POI_id to my managed bean and process the response for display in a popup?

Answer 1

To add an answer to Kishor (half), you need to have an updatable component in your view (a pop-up window, as you call it), and ajax-update it after the request completes successfully.

You can use the remote command to send an AJAX request with an additional parameter added and ajax-update the JSF component responsible for the popup. Also (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> 

from

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

An alternative to using a remote command is a hidden form with a hidden input, which will be used to transfer the parameter to the backup bean, which can be separated from other beans in order to handle the search for the necessary information based on 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> 

from

 @ManagedBean @RequestScoped public class PoiBean { private String poi;//getter+setter private String address;//getter //other properties public void listen(){ address = getAddress(poi); //other properties } } 

Answer 2

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

RemoteCommand allows you to back up the bean and perform a partial upgrade caused by the user client side of the script.

Add it to the view as follows:

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

And use it in Javascript as follows:

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

or call it from the event handler as follows:

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

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

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

The listener might look like this:

 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.
In this case, you can use the Primeface query context execute () to execute whatever javascript you want.

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