AJAX 호출이 완료 될 때까지 Jquery 대기

Question

양식 데이터를 저장하기위한 ajax 기능이 있습니다. 사용자가 언제든지 저장할 수 있으므로 비동기 상태로 유지하고 싶습니다. 그러나 양식을 PDF로 변환하는 또 다른 기능이 있으며 사용자가 더 많은 데이터를 추가 한 경우 PDF를 만들기 전에 저장 기능을 실행해야합니다. $('input.submit')을 저장하기 위해 PDF 파일을 열기 전에 완료 될 때까지 기다리는 방법이 있습니까? 아래는 내가 사용하고있는 jQuery를은 다음과 같습니다

요컨대

$("button#save").on('click', function(){ 
       $.ajax({ 
        type: 'POST', 
        url: '<?php echo matry::base_to('utilities/crm/field_day_save');?>', 
        data: $("form#trip_form").serialize(), 
        dataType: 'json', 
        success: function (data) 
        { 
         $("#alerts").html(data.alert); 
         $("#form_id").val(data.id); 
        } 
        }); 
      }); 
     $("input.submit").on('click', function(event){ 
      event.preventDefault(); 
      $("button#save").trigger('click'); 
      window.open('<?php echo matry::base_to('custom_worddocs/field_day');?>' + '&fd_id=' + $("#form_id").val()); 
     }); 

, 나는 $('button#save').click() 비동기 남아 싶지만 버튼을 기다릴 새 창을 열기 전에 완료 저장 $(input.submit)를 원한다.

Answer 1

당신의 클릭 핸들러가 클릭 이벤트를 트리거하고 얻을 triggerHandler()를 사용 후, 약속 개체를 반환 되세요 그것은 반환 값입니다. 개념의

$("button#save").on('click', function(){ 
    return $.ajax({ 
     ... 

및

... 
$("button#save").triggerHandler('click').done(function(){ 
    window.open(...); 
}); 
... 

증명 : http://jsfiddle.net/SRzcy/

Answer 2

jQuery의 ajax 함수는 다른 무엇보다도 deferred처럼 동작하는 jqXHR 개체를 반환합니다. 단지 then 함수 내에서 window.open를 호출하여

, 그것은 완료 AJAX를 기다릴 것이다 :

이

$("button#save").on('click', function() { 

    var jqXHR = $.ajax({ /* your config... */ }); 

    $("input.submit").one('click', function(event) { 
     event.preventDefault(); 
     $("button#save").trigger('click'); 

     jqXHR.then(function() { 
      window.open('<?php echo matry::base_to('custom_worddocs/field_day');?>' + '&fd_id=' + $("#form_id").val()); 
     }); 
    }); 

}