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

我正在尝试使用JavaScript方法处理几行输入数据，该方法使用Google提供的地理编码服务，并将处理后的数据放入支持bean中。通过JavaScript将表单数据传递到使用JSF和primefaces的支持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}" />

我试图使用这个按钮来提交表单。我不得不补充说，我不确定这种结构。按提交按钮可能会立即加载下一页，甚至没有给ajax调用一个机会。

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

来源

2013-02-26 malebox

这是打字错误还是你真的有'onstart =“codeAddress”'？如果它是用'onstart =“codeAddress（）”'代替。 – partlov 2013-02-26 11:24:31

对不起，这确实是一个错字。 – malebox 2013-02-26 11:51:40

@malebox如果你的js没有被调用，这意味着你没有将它包含在你的页面中'，把js文件放入WebContent \资源文件夹 – Daniel 2013-02-26 14:25:49

服务的JavaScript回调函数应该触发表单提交（成功时）。这样在提交之前总是有时间完成。

来源

2013-02-26 11:28:43

我假设你很好与JavaScript。

你可以试一下。

随着命令按钮使用简单的HTML按钮，这将是可见的，并命令按钮隐藏在一个div。
当用户点击简单的html按钮执行您的地理定位ajax调用，在成功和更新隐藏字段后，只需调用JavaScript以编程方式单击隐藏的命令按钮。

希望这会有所帮助。

来源

2013-02-26 14:20:38

<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作为请求PARAM

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

来源

2013-02-26 14:34:54 kolossus

我建议是这样的：

<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组件。

来源

2013-02-26 18:18:25 rootkit

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

回答

相关问题