jQuery run another Ajax after first Ajax callback

Question

I have the following code which loads via ajax contents to be appended:

    $.get('http://mydomain.com/ajax1.php/', function(data){
        var data_one = $(data).find('#ajax_editor_suggestion_container');
        $('.ajax_editor_selection_container').append(data_one);
    }); 

    $.get('http://mydomain.com/ajax2.php/', function(data){
        var data_one = $(data).find('#ajax_editor_suggestion_container');
        $('.ajax_editor_selection_container').append(data_one);
    });

My objective is to have the contents of ajax1.php appended first and then contents of ajax2.php appended after that. However sometimes the contents of ajax2.php gets loaded before that of ajax1.php and messes up the appended order.

So my question is, how do I ensure that the contents of ajax2.php are always appended after the contents of ajax1.php?

I'm using $.get() because it's easier for me but I'm open to any other jQuery ajax methods.

Thanks

or use prepend() on the first one...

epascarello
– epascarello

2014-04-09 15:21:33 +00:00
Commented Apr 9, 2014 at 15:21 — epascarello
– epascarello, Commented Apr 9, 2014 at 15:21

Jason P · Accepted Answer · 2014-04-09 15:21:08Z

1

I would use $.when:

$.when(
    $.get('http://mydomain.com/ajax1.php/'), 
    $.get('http://mydomain.com/ajax2.php/')
).done(function (response1, response2) {
    var data_one = $(response1).find('#ajax_editor_suggestion_container');
    var data_two = $(response2).find('#ajax_editor_suggestion_container');

    $('.ajax_editor_selection_container').append(data_one).append(data_two);
});

That will run the ajax requests at the same time, but won't call the callback until both have finished.

answered Apr 9, 2014 at 15:21

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2028856 Over a year ago

That sounds like what I need. Thanks, I'll accept the answer in a few minutes when I can :)

Collectives™ on Stack Overflow

jQuery run another Ajax after first Ajax callback

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related