我有一个js函数codeAddress()，如果可以识别完整地址，它会通过Google Maps JavaScript API完成地址并设置全局js变量valid = true。它还用完成的地址更新<p:inputText>的值。
现在我有一个<p:commandButton>
执行codeAddress()
如果valid = true提交表单，则<p:inputText>中的地址保存在addressBean中，并且
导航到下一页
如果valid = false触发jsf-validator消息
不幸的是，我的设置仍然无法使用valid作为确定是否下一页的基本值。似乎该值提交给bean的时间太晚了。
这是我的jsf代码：
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
</h:head>
<h:body>
<h:outputScript name="jsf.js" library="javax.faces" target="head"/>
<h:outputScript library="js" name="bugMaps.js" />
<body onload="initialize()" />
<h:form id="addressForm" onsubmit="codeAddress();">
<p:inputText id="address" required="true"
validatorMessage="Please enter a valid address." validator="#{addressBean.validate()}">
<p:ajax update=":addressForm:addressValidate" />
</p:inputText>
<h:message id="addressValidate" for=":addressForm:address"/>
<p:commandButton value="submit"
onclick="codeAddress();"/>
<p:inputText id="fullAddress" value="#{addressBean.fullAddress}" />
<p:inputText id="valid" value="#{addressBean.valid}" />
</h:form>
</h:body>
</html>
这是bugMaps.js：
var geocoder;
var map;
var valid;
function initialize() {
geocoder = new google.maps.Geocoder();
}
function codeAddress() {
var address = (document.getElementById('addressForm:address').value + ", Germany");
geocoder.geocode({'address' : address},function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latLong = results[0].geometry.location;
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var country, postal_code, locality, street_number, route;
for (i = 0; i < results[0].address_components.length; ++i) {
var component = results[0].address_components[i];
if (!locality && component.types.indexOf("locality") > -1)
locality = component.long_name;
else if (!postal_code && component.types.indexOf("postal_code") > -1)
postal_code = component.long_name;
else if (!country && component.types.indexOf("country") > -1)
country = component.long_name;
else if (!street_number && component.types.indexOf("street_number") > -1)
street_number = component.long_name;
else if (!route && component.types.indexOf("route") > -1)
route = component.long_name;
}
if (typeof latLong != "undefined"
&& typeof latitude != "undefined"
&& typeof longitude != "undefined"
&& typeof route != "undefined"
&& typeof street_number != "undefined"
&& typeof postal_code != "undefined"
&& typeof locality != "undefined"
&& typeof country != "undefined"){
valid = true;
}
else{
valid=false;
};
document.getElementById('addressForm:fullAddress').value = results[0].formatted_address;
jsfSubmit();
}
else{
alert('Geocode was not successful for the following reason: '+ status);
valid=false;
}
});
};
function navigateToAnotherPage(data){
if(valid){
document.location.href='nextPage.xhtml';
}
};
function jsfSubmit(){
jsf.ajax.request(this, event, {execute:"@form", onevent:navigateToAnotherPage});
alert("nothing"); // FIXME: without this useful alert bean keeps old values and display them on nextPage
};
这是我的AddressBean.java：
package hoho.main.managebean;
import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.component.UIInput;
import javax.faces.context.FacesContext;
import javax.faces.validator.ValidatorException;
import javax.inject.Named;
import com.sun.faces.util.MessageFactory;
@Named
@SessionScoped
public class AddressBean implements Serializable {
private static final long serialVersionUID = 1L;
private String fullAddress;
private boolean valid = false;
public void validate(FacesContext context,
UIComponent toValidate, Object value) {
if(!valid){
String client = toValidate.getClientId(context);
FacesMessage msg = MessageFactory.getMessage(UIInput.REQUIRED_MESSAGE_ID, client);
throw new ValidatorException(msg);
}
}
public String getFullAddress() {
return fullAddress;
}
public void setFullAddress(String fullAddress) {
this.fullAddress = fullAddress;
}
public boolean isValid() {
return valid;
}
public void setValid(boolean valid) {
this.valid = valid;
}
}
这是nextPage.xhtml：
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:outputText value="#{addressBean.fullAddress}" />
</h:body>
</html>
最佳答案
您可以在JavaScript中使用jsf.ajax.request提交表单。一个例子是
function navigateToAnotherPage(data){
//When the request is completed, we are safe to navigate to another page.
if(data.status == "success"){
alert("callback is invoked");
//Go to another page
document.location.href='destpage.xhtml';
}
}
function jsfSubmit(){
alert("Do your logic here");
jsf.ajax.request(this, event, {execute:"@form", onevent:navigateToAnotherPage});
}
并将此函数绑定到jsf组件
<h:commandButton type="button" value="javascriptSubmit" onclick="jsfSubmit()"/>
完整的参考资料在这里：http://docs.oracle.com/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/js-api/symbols/jsf.ajax.html
但是，我不知道如何通过javascript调用backing bean方法。所以我总是使用两个按钮。当我单击第一个按钮时的javascript处理逻辑，然后触发第二个按钮上的click事件，该事件提交表单并导航到另一个页面。当然，第二个按钮是
display:none。此外，它还比较简单。此外，验证不起作用，因为验证总是在更新支持Bean之前进行。我没有看到javascript中的javascript
var valid和后备bean中的boolean valid之间的任何链接。但是，如果使用javascript更新<p:inputText id="valid" value="#{addressBean.valid}" />，提交输入字段，更新后备bean valid，并使用此布尔变量进行验证，则验证将始终失败。这是因为在更新boolean valid之前（例如，为true），首先调用了验证方法（因此，验证方法可能正在使用过期的valid。到处走走是，将验证器附加到
<p:inputText id="valid" value="#{addressBean.valid}" />而不是<p:inputText id="address" required="true"...../>。现在，您可以使用value中的validate(FacesContext context, UIComponent toValidate, Object value)获取输入字段的值。这里的值是您在页面的输入字段中放入（或javascript放入）的值（因此，它始终是最新的）。请注意，此时支持Bean中的
valid尚未更新。如果验证通过，则valid将更新并设置为您刚得到的value。如果验证失败，则不会更新valid。一言以蔽之，流程为0。构建/恢复组件树。 1.转换，验证。 2.更新后备bean中的值。 3.调用后备bean方法4.渲染页面。
关于javascript - 如何使用一个按钮通过javascript计算和验证，然后提交和导航，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14716606/