将值从 JavaScript 传递到 BackingBean

Question

我想这个问题以前有人问过，但我仍然不明白该怎么做。我的目标是单击 GoogleMaps 中的一个点并存储我在支持 bean 上单击的点的坐标。我的代码如下：

JSF

<h:inputHidden id="lat"         value="#{ChartsBean.lat}" />
<p:commandLink id="updateChart" update="chart" actionListener="#{ChartsBean.lineChart}"/>
<p:lineChart   id="chart"       value="#{ChartsBean.lineChart}" />

JS

google.maps.event.addListener(map, "click", function(event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    document.getElementById('lat').value = '99': //just for testing
    $("#updateChart").click();
});

支持豆

private String       lat,lon;
//getters and setters

元素 'lat' 的值设置正确，但更改似乎没有到达支持 bean。

但是 updateChart 正在工作。我没有把它贴在这里，但是如果我有的话，我会把它贴在 bean 上：

EDIT1： 另一件事，如果在我的支持 bean 上我像这样设置 X 和 Y：

x = (int)(20*Math.random());
y = (int)(20*Math.random());

代替：

x = findX(Double.parseDouble(lat));
y = findY(Double.parseDouble(lon));

当我点击地图上的任意位置时，图表会重新刷新，显然是随机点。

Answer 1

基本上，您的问题是 $("#updateChart") 不起作用，因为真正的按钮 ID 包括 h:form ID（前置）。您可以通过更改 h:form 属性 prependId="false" 来解决此问题。

警告：

在表单上禁用前置将阻止在每个表单中使用相同的 ID。

另一种方法是在您的链接中添加一些类：

<p:commandLink id="updateChart" class="some-unique-class" update="chart" actionListener="#{ChartsBean.lineChart}"/>

并更改您的选择器：

$("a.some-unique-class").click();

一个我忘记的最后一个解决方案，仍然是我认为使用 jQuery 时最好的：

$(PrimeFaces.escapeClientId('#{p:component('updateChart')}')).click();

更多信息：

• PrimeFaces p:component

另请阅读：

• PrimeFaces p:remoteCommand 如果您只想将数据发送到没有按钮的 bean，这真的很有用