如何通过JavaScript调用带有参数的托管bean方法 [英] How to call managed bean methods with parameters via JavaScript

问题描述

我正在开发一个Web应用程序，我使用JSF和PrimeFaces框架以及外部Geo Map API。

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

当我点击地图上的POI时，Map API为我提供了 POI_id 。但这对我来说还不够，我想从servlet获取有关POI的信息并在弹出窗口中显示它。 （地址，姓名，电话号码等字段）。

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.).

因此，当我点击POI时，我需要向托管bean中的servlet发送HTTP请求在地图上。

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

我可以获得 poi_id ，但是我无法将此id发送到后端托管bean，所以获取POI信息似乎不可能。

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.

如何将 poi_id 发送到我的托管bean并处理响应要在弹出窗口中显示？

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

推荐答案

只需添加到Kishor的（中途）答案，您需要有一个待办事项视图中的更新组件（在调用它时弹出窗口）和ajax - 在请求成功完成后更新它。

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.

您可以使用远程命令发送带有附加参数的AJAX请求和ajax-update负责弹出窗口的JSF组件。像这样（对于PrimeFaces 3.x）：

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);
}

使用远程命令的替代方法是使隐藏的表单隐藏用于将参数传输到辅助bean的输入，可以与其他bean分开，以根据您的 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
    }

}

这篇关于如何通过JavaScript调用带有参数的托管bean方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！