使用JSF和primefaces通过JavaScript将表单数据传递到支持bean

Question

我正在尝试使用采用Google提供的地理编码服务的JavaScript方法处理几行输入数据，并将处理后的数据放入后备bean中。

向用户显示一个登录页面，在其中输入其地址详细信息。 单击提交按钮后，我尝试通过调用JavaScript方法对地址进行地理编码。 此方法读取用户输入的数据，并将其发送到地址解析服务。 这项服务需要花费几毫秒的时间才能完成。 完成后，我希望将找到的数据存储在登录页面的后备bean中。

以下JavaScript函数用于对地址进行地址解析。

    function codeAddress() {
        alert('coding address');
        geocoder = new google.maps.Geocoder();
        postcode = document.getElementById('loginForm:address').value;

        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              alert('setting location: '+results[0].geometry.location);
              document.getElementById('loginForm:location').value = results[0].geometry.location;
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }

它将其值存储在位于表单内部的隐藏字段中。 我不知道这是否是最好的方法，这只是我在许多示例中看​​到的。 我假设设置此组件的值将调用loginBean中的相应位置设置器。

    <h:inputHidden id="location" value="#{loginBean.location}" />

我正在尝试使用提交表单的按钮来实现所有这一切。

        <p:commandButton id="submitButton" value="login"
            action="#{loginBean.doLogin}"
            styleClass="blue login" update="growl">
                <p:ajax event="click" onstart="codeAddress()" />
        </p:commandButton>

我必须补充一点，我不确定这种结构。 按下提交按钮可能会立即加载下一页，甚至不会给ajax调用一个机会。

试图做到这一点给我带来了几个问题。 使用上面的代码，永远不会调用JavaScript函数。 为了简单起见，我在脚本标签的页面顶部声明了此函数。 第二个问题是，我不清楚将这种值从JavaScript方法传递到loginBean的最佳方法是什么。 我是否应该在表单中放置一些隐藏标签并将其value标签链接到loginBean属性？ 我应该在ajax组件中添加一个侦听器吗？

Answer 1

服务的JavaScript回调函数应触发表单提交（成功后）。 这样一来，提交之前总会有时间完成。

Answer 2

我假设您擅长javascript。

您可以尝试技巧。

1. 与命令按钮一起使用简单的html按钮，该按钮将可见，而命令按钮则隐藏在div中。
2. 当用户单击简单的html按钮执行地理定位ajax调用时，成功后以及在更新隐藏字段之后，只需调用javascript以编程方式单击隐藏的命令按钮即可。

希望这可以帮助。

Answer 3

<p:ajax/>是不必要的，并且是未调用javascript函数的根本原因。 一种快速而肮脏的方法可以完成此任务。 摆脱<p:ajax/> 。 <p:commandButton/>足以满足您的使用情况。

    <p:commandButton id="submitButton" onclick="codeAddress();" value="login" action="#{loginBean.doLogin}" styleClass="blue login" update="growl"/>

您传递变量的方式可以使用，但是效率不高或不安全。

另一种方法是使用primefaces的javascript API addSubmitParam将生成的值作为请求参数发送到支持bean。

    function codeAddress() {
    alert('coding address');
    geocoder = new google.maps.Geocoder();
    postcode = document.getElementById('loginForm:address').value;

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          alert('setting location: '+results[0].geometry.location);
         PrimeFaces.addSubmitParam(results[0].geometry.location); //addSubmitParam sends a request parameter
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

Answer 4

我建议类似的东西：

<h:form>
<p:inputText widgetVar="widget_postcode" value="#{backingBean.address}"/>
<p:inputText style="display:none;" widgetVar="widget_geocode" value="#{backingBean.geocode}"/>
<p:commandButton id="submitButton" value="login" type="button" 
            styleClass="blue login" onclick="codeAddress();">
        </p:commandButton>
<p:remoteCommand name="sendData" process="@form" update="growl"/>
</h:form>



function codeAddress() {
    alert('coding address');
    geocoder = new google.maps.Geocoder();
    postcode = widget_postcode.getJQ().val();

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          alert('setting location: '+results[0].geometry.location);
         widget_geocode.getJQ().val(results[0].geometry.location);
         sendData();
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

这种方法使用PF小部件，而不是依赖可以更改的ID。

另外，请考虑使用Google地址自动填充API。 有一个JSF组件。