jquery에서 AJAX 호출 후 변수 업데이트하기

Question

사용자가 (Django ModelChoice) 양식을 선택했는지 여부에 관계없이 다른 양식의 Ajax 업데이트가 발생하면 추가 Ajax 업데이트가 트리거 될 수 있습니다. 내 초보적인 자바 스크립트 기술은 작업까지하지 않습니다!

문제는 내가 업데이트 된 폼의 값을 올바르게 읽을 수 없다는 것입니다. 문제는 그것이 항상 있어야한다고 생각하는 것보다 한 발 앞선 것입니다. 아래의 단순화 된 예에서는 Jquery가 first_var와 동시에 second_var의 값을 계산하는 것 (즉, Ajax 호출로 업데이트하기 전)입니다. #id_first_metric에서 두 옵션을 계속 전환하면 second_var는 업데이트되지만 마지막 업데이트 전에 항상 #id_second_metric 값을 가리키고 있습니다.

어떻게 second_var에 새로 업데이트 된 값을 정확하게 포함시킬 수 있습니까?

function first_function(first_var){ 
    console.log('first var:' + first_var); 
    // correctly states the value of first var 
    var update_url = '/ajax/update_second_metric/first_var'; 
    $('#id_second_metric').load(update_url); 

$('#first_metric_selector').change(function() { 
    var first_var = $('#id_first_metric').val(); 
    first_function(first_var); 
    $('#second_metric_selector').change(); 
}); 

$('#second_metric_selector').change(function() { 
    var second_var = $('#id_second_metric').val(); 
    console.log('second var' + second_var); 
    // fails to detect the new value of second var created by the first 
    // AJAX call 
}); 

답변

function first_function(first_var){ 
    console.log('first var:' + first_var); 
    // correctly states the value of first var 
    var update_url = '/ajax/update_second_metric/'; 
    $('#id_second_metric').load(update_url, function(){ 
     $('#second_metric_selector').change(); 
    }); 

Answer 1

"$ ('#의 id_second_metric').로드 (UPDATE_URL)는"비동기 적으로 발생합니다. "$ ('# id_second_metric') .load (update_url)"이 완료되기 전에 "$ ('# second_metric_selector'). change()"가 호출된다는 보장이 없습니다.

로드에서 제공하는 콜백 함수를 사용하여 순서를 보장 할 수 있습니다. http://api.jquery.com/load/