자바 스크립트와 <p:ajax> 이상한 행동

나는 address에서 데이터를 처리하고 fullAddress과 validField의 값을 업데이트하는 js-function codeAddress()을 가지고 있습니다.
fullAddress과 validField의 데이터는 <p:ajax>에 의해 뒷받침 빈에 전달되지만 설정 메소드는 하나의 요청을 지연시킨 것으로 간주됩니다.
끝에있는 alert()의 끝에 올바른 새 데이터가 표시됩니다.
address의 값이 onchange="test()" 인 경우 모든 지연이 발생하지 않으므로 backing beans setter 메서드가 제대로 호출됩니다.
나는 여기서 무엇이 잘못 되었을지 모릅니다.자바 스크립트와 <p:ajax> 이상한 행동

내 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"> 
     <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>

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

출처

2013-02-13 Lester

가능 중복 [코더는 이전에 저장된 값을 반환 마커를 클릭 (http://stackoverflow.com/questions/11543621/geocoder-is-이 기능은 단순히 지오 콜백 함수로부터 호출 이전에 저장된 값 반환 - 마커 클릭시) – geocodezip

@geocodezip 힌트를 보내 주셔서 감사합니다. 문제는 실제로 내 것과 비슷합니다. 하지만 콜백 함수의 결과를 사용하지 않습니까? 경고는 항상 올바른 값을 표시합니다. 나는 무엇을 놓치나요? 지연이 필요하거나 적극적으로 응답을 기다리는 것이 있습니까? – Lester

"콜백 함수의 결과를 사용하지 않습니까?"라는 의미는 무엇입니까? 그게 유일한 곳입니다. – geocodezip

이 중복 질문이 아니다.
첫 번째 오류는 <p:ajax>을 사용하여 JS가 변경 한 데이터를 제출했습니다. 왜냐하면 스크립트가 실행되는 동안 ajax 요청이 이미 준비 되었기 때문입니다. 두 번째 실수는 비 크로스 브라우저 호환 jsf.ajax.request을 사용하는 것이 었습니다. 이제 <p:ajax>을 삭제하고 jQuery와 함께 솔루션을 사용합니다.

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

출처

2013-02-13 22:42:33 Lester

자바 스크립트와 <p:ajax> 이상한 행동

답변

관련 문제