Use two or more URL for different ajax in one click

Question

I need to use more than 1 json from many URL API. For each URL I will do different thing but it has to be a the same time. I will populate some headers of a table with 1 URL, and the info of the table with 2 or 3 URL.

I have something like this:

$(document).ready(function(){
    $("#my_button").click(function(){
        var urlOne = 'http://example1',
        var urlTwo = 'http://example2'
        $.ajax({
            url: urlOne,
            success: function(result){
                console.log(result);
                $('#some_div').hide();
                $('#another_div').show();
                $('.some_class').append(result[0].some_data);
                etc...
            },
            error: function (exception) {
                $('#modal_error').modal('show');
            }
        });

        $.ajax({
            url: urlTwo,
            success: function(result){
                $('#myTabContent').show();
                populateHeaders($("#headers"),result);
                etc...
            }
        });
        //And maybe more ajax calls.
    });
});

How can accomplish that?

I don't understand the question. You are making two separate ajax calls that will run independently of each other. It's not clear what your issue is with this setup. — Taplar, Nov 28 '18 at 19:08
Are you asking how to apply all changes at the same time, after all three requests have finished? In that case, use Promise.all() — , Nov 28 '18 at 19:09
@ChrisG yes, because in the way I have it, the DOM is getting updated weirdly, sometines one thing before the other — pmiranda, Nov 28 '18 at 19:10
and for example, I can't populate a table (ajax2) until know what headers I will have (ajax1) — pmiranda, Nov 28 '18 at 19:11
A trivial solution is to run ajax2 inside the success method of ajax1, and so on. That way they happen one after the other, and when the last one has finished, you have all the data available. Or, like I said, use Promise.all(): `Promise.all([ $.getJSON(url1), $.getJSON(url2), $.getJSON(url3) ]).then(result => { ... });` where I put the ellipses, you can now use `result[0]`, `result[1]` and `result[2]` to refer to the replies. — , Nov 28 '18 at 19:13
The question is essentially an exact dupe of https://stackoverflow.com/questions/4368946/jquery-callback-for-multiple-ajax-calls however back then there was no `Promise`. — , Nov 28 '18 at 19:18

Moumen Soliman · Answer 1 · 2018-11-28T19:23:02.947

In this case, I use to create methods and call it when ajax success

for example

    $.ajax({
        url: urlOne,
        success: function(result){
            console.log(result);
            $('#some_div').hide();
            $('#another_div').show();
            $('.some_class').append(result[0].some_data);
            hereFunctionCallAnotherAjaxOne();
        },
        error: function (exception) {
            $('#modal_error').modal('show');
        }
    });

    const hereFunctionCallAnotherAjaxOne = () => {
     $.ajax({
        url: urlTwo,
        success: function(result){
            $('#myTabContent').show();
            populateHeaders($("#headers"),result);
        }
     });
    }

But read about Promises and how it works with JavaScript REST API

Use two or more URL for different ajax in one click

1 Answers1