通過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

回答

相關問題