2

我有一个 js 函数codeAddress(),它通过 google maps javascript api 完成一个地址并设置一个全局 js-variable valid = true,如果完整地址被识别的话。它还<p:inputText>用完整的地址更新 a 的值。

现在我有一个<p:commandButton>我想要的

  1. 执行codeAddress()
  2. 如果valid = true提交表单,<p:inputText>则地址保存在addressBean
  3. 导航到下一页
  4. 如果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&amp;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>
4

1 回答 1

2

您可以jsf.ajax.request在您的 javascript 中使用来提交您的表单。一个例子是

        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 调用支持 bean 方法。所以我总是使用两个按钮。当我单击第一个按钮时的 javascript 处理逻辑,然后它触发提交表单并导航到另一个页面的第二个按钮上的单击事件。当然,第二个按钮是display:none。此外,它有点简单。

此外,验证不起作用,因为验证总是在更新支持 bean 之前发生。我看不到 javascriptvar valid中的 javascript 和boolean valid支持 bean 中的 javascript 之间的任何链接。但是,如果您<p:inputText id="valid" value="#{addressBean.valid}" />使用 javascript 更新、提交输入字段、更新支持 beanvalid并使用此布尔变量进行验证,那么验证将始终失败。这是因为在boolean valid更新之前(例如,true),首先调用了验证方法(因此验证方法可能使用了过期的valid.

到处走走,您将验证器附加到<p:inputText id="valid" value="#{addressBean.valid}" />而不是<p:inputText id="address" required="true"...../>. value现在,您可以使用in获取输入字段的值validate(FacesContext context, UIComponent toValidate, Object value)。这里的值是您在页面输入字段中输入(或 javascript 输入)的值(因此它始终是最新的)。

请注意,此时validbacking bean 还没有更新。如果验证正常,则valid更新并设置为value您刚刚得到的。如果验证失败,valid则不更新。

总之,流程是 0. 构建/恢复组件树。1.转换,验证。2. 更新支持 bean 中的值。3. 调用后台bean 方法 4. 渲染页面。

于 2013-02-06T04:28:04.200 回答