Javascript和< p：ajax>表现很奇怪 [英] Javascript and <p:ajax> behave strange
问题描述
我有一个处理来自 address 的数据的js函数 codeAddress（），并更新 fullAddress 和 validField 。
fullAddress 和 validField 通过< p：ajax> 传递给backing bean，但setter方法似乎以延迟调用一个请求。
codeAddress 结尾处的 alert（）显示正确的新数据。
当地址具有 onchange =test（）很好的支持bean setter方法被调用，因为他们应该没有任何延迟。
我无能为力可能是错误的。
我的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：头>
< script src =https://maps.googleapis.com/maps/api/js?v=3&sensor=false>< / script>
< / h：头>
< h：body>
< h：outputScript name =jsf.jslibrary =javax.facestarget =head/>
< h：outputScript library =jsname =bugMaps.js/>
< body onload =initialize（）/>
< h：form id =addressForm>
< p：inputText id =addressonchange =codeAddress（）>
< p：ajax process =fullAddress validField/>
< / p：inputText>
< p：message id =addressValidatefor =：addressForm：validField/>
< p：commandButton value =submit/>
< p：inputText id =fullAddressvalue =＃{addressBean.fullAddress}/>
< p：inputText id =validFieldvalue =＃{addressBean.valid}/>
< / h：表格>
< / h：body>
< / html>
<我的JS：
var geocoder;
var map;
var valid = false;
var fullAddress =none;
函数initialize（）{
geocoder = new google.maps.Geocoder（）;
function test（）{
fullAddress = Math.random（）;
document.getElementById（'addressForm：fullAddress'）。value = fullAddress;
函数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（ 国家）> -1）
国家y = 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
&& amp ; typeof locality！=undefined
&& typeof country！=undefined）{
valid = true;
fullAddress = results [0] .formatted_address;
}
else {
valid = false;
fullAddress =none;
};
}
else {
valid = false;
fullAddress =none;
}
document.getElementById（'addressForm：fullAddress'）。value = fullAddress;
document.getElementById（'addressForm：validField'）。value = valid;
alert（fullAddress +有效）;
}）;
};
这不是一个重复的问题。
第一个错误是使用< p：ajax> 来提交要被JS更改的数据，因为在脚本仍然存在的情况下，ajax请求已经准备好运行。
第二个错误是使用非跨浏览器兼容的 jsf.ajax.request 。
现在我简单地删除< p：ajax> ，并在jQuery中使用解决方案。这个函数只是从geocoders回调函数中调用：
pre $ function jsfSubmit（）{
document.getElementById（'AddressForm ：fullAddress'）。value = fullAddress;
document.getElementById（'addressForm：validField'）。value = valid;
$ .ajax（{type：'POST'，data：$（'＃addressForm'）。serialize（），success：function（response）{
if（valid）{
var destPage ='nextPage.xhtml';
window.location = destPage;
}
}}）;
};
I have a js-function codeAddress() that processess the data from address and updates the values of fullAddress and validField.
The data of fullAddress and validField is passed by <p:ajax> to the backing bean, but the setter methods seem to get called one request delayed.
The alert() at the end of codeAddress shows the correct new data.
When address has onchange="test()" everything works fine an the backing beans setter methods are called as they should without any delay.
I am clueless what might be wrong here.
my jsf code:
<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">
<p:inputText id="address" onchange="codeAddress()">
<p:ajax process="fullAddress validField"/>
</p:inputText>
<p:message id="addressValidate" for=":addressForm:validField"/>
<p:commandButton value="submit" />
<p:inputText id="fullAddress" value="#{addressBean.fullAddress}" />
<p:inputText id="validField" value="#{addressBean.valid}" />
</h:form>
</h:body>
</html>
my JS:
var geocoder;
var map;
var valid = false;
var fullAddress = "none";
function initialize() {
geocoder = new google.maps.Geocoder();
}
function test(){
fullAddress = Math.random();
document.getElementById('addressForm:fullAddress').value = fullAddress;
}
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;
fullAddress = results[0].formatted_address;
}
else{
valid=false;
fullAddress="none";
};
}
else{
valid=false;
fullAddress="none";
}
document.getElementById('addressForm:fullAddress').value = fullAddress;
document.getElementById('addressForm:validField').value = valid;
alert(fullAddress + valid);
});
};
This is not a duplicate question.
The first fault was using <p:ajax> to submit data that was to be altered by JS, because the ajax request is already prepared while the script is still running.
The second mistake was to use the non-cross-browser-compatible jsf.ajax.request.
Now I simply deleted the <p:ajax> and use a solution with jQuery. This function is simply called from the geocoders callback function:
function jsfSubmit(){
document.getElementById('addressForm:fullAddress').value = fullAddress;
document.getElementById('addressForm:validField').value = valid;
$.ajax({type:'POST', data:$('#addressForm').serialize(), success: function(response) {
if(valid){
var destPage = 'nextPage.xhtml';
window.location = destPage;
}
}});
};
这篇关于Javascript和< p：ajax>表现很奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
