javascript - Jquery Wait Until AJAX Call is Done - Stack Overflow

admin管理员组

文章数量:1430940

I have an ajax function for saving a forms data. I want it to remain asynchronous because the users can hit save any time. However, I have another function that converts the form to a PDF and I want it to run the save function before creating the PDF (in case the users have added more data). Is there a way to make $('input.submit') wait for save to finish before opening the pdf? Below is the jQuery I am using:

$("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());
        });

In short, I want $('button#save').click() to remain asynchronous, but I want $(input.submit) to wait for button save to plete before opening new window.

I have an ajax function for saving a forms data. I want it to remain asynchronous because the users can hit save any time. However, I have another function that converts the form to a PDF and I want it to run the save function before creating the PDF (in case the users have added more data). Is there a way to make $('input.submit') wait for save to finish before opening the pdf? Below is the jQuery I am using:

$("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());
        });

In short, I want $('button#save').click() to remain asynchronous, but I want $(input.submit) to wait for button save to plete before opening new window.

• javascript
• jquery

Share Improve this question Follow edited Feb 15, 2013 at 18:55 Joseph Silber 220k5959 gold badges368368 silver badges292292 bronze badges asked Feb 15, 2013 at 18:49 MikeMike 1,73844 gold badges3232 silver badges6161 bronze badges 3

• You open the pdf in the success or plete callbacks of the ajax request. – Danny Commented Feb 15, 2013 at 18:53
• Why are you triggering the click again? – Joseph Silber Commented Feb 15, 2013 at 18:58
• The click is to run the ajax save function, so it saves before creating the pdf. @Danny, I don't want to have to rewrite the save function with just an additional line for opening the window, and I don't want the window to open every time its saved – Mike Commented Feb 15, 2013 at 19:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

jQuery's ajax function returns a jqXHR object which, among other things, behaves like a deferred.

By only calling window.open from within the then function, it'll wait for the AJAX to plete:

$("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());
        });
    });

}

Have your click handler return a promise object, then use triggerHandler() to trigger the click event and get it's return value.

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

and

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

Proof of concept: http://jsfiddle/SRzcy/

本文标签： javascriptJquery Wait Until AJAX Call is DoneStack Overflow