build form with several ajax calls

Question

Im trying to build a form with 2 ajax calls. in the first call i get some information about a ranking that i put on the form like this:

$.ajax({
    method: "GET",
    url: base_url + "/ranking/getranktoedit/" + rank_id,
    dataType: 'json'
}).done(function(response){
    // grab the response and complete some html and then bind the javascript to handle clicks on this new generated piece of HTML
});

Inside the "done" part, i have to make another ajax call to get another bit of the HTML. I can make it work by using the "async:false" in the second ajax call, but i read that this is deprecated. So the question is simple, hoy do i make the second basically stop the whole process so i get the data on the page instead of the "undefined"? I was also checking the option of using $.when() that seems a bit easier, but then i realise i didn't know how to basically force the async into sync... does that makes sense? I'm not sure if I'm being clear, so please let me know if you need more details and I'll add any other information required. Thanks!

UPDATE the piece of javascript looks something like this:

$.ajax({
    method: "GET",
    url: base_url + "/ranking/getranktoedit/" + rank_id,
    dataType: "json",
    sucess: function(response){
        let select_options;
        $.ajax({
            method:"POST",
            url: base_url + "/getdropdown",
            data: {
                field:"name"
            },
            success: function(name_dd){
                // this part is a bit more complex but it's just about putting things in the right place, nothing else
                return select_options = name_dd;
            }
        })
        let edit_form = '<div><div>' + response.some_data_from_rank + '</div>' +
            '<select>' + select_options + '</select>' +
            '</div>';

        $(".some_selector").html(edit_form);
    }
})

So, this doesn't work, by the time the first ajax finishes, the second one throws "undefined" where the dropdown is supposed to go. if in the second one I use async:false it works fine. Because the async is going to be deprecated, i wanted to know if there is another way of achieving the same thing keeping this structure (I already have other ways of doing it rewriting the whole thing and organising it different). Thanks!

Answer 1

you can do it like this. assign an id or selector to your newly created select after loading your html from the first ajax, call the second ajax, and using the selector for select , append the options

the return does not work in success, the way it does in functions, you can use his way or a callback, but for your case, you can just use this simple way,

this way you dont need async:false, but if you want to return, meaning get the value from ajax and use it after it , then you need async:false for it.

$.ajax({
    method: "GET",
    url: base_url + "/ranking/getranktoedit/" + rank_id,
    dataType: "json",
    sucess: function(response){
        let select_options;

        let edit_form = '<div><div>' + response.some_data_from_rank + '</div>' +
            '<select id="mySelect">' + select_options + '</select>' +
            '</div>';

        $(".some_selector").html(edit_form);// html is loaded now

        // second ajax to call dropdown content or whatever          
         $.ajax({
            method:"POST",
            url: base_url + "/getdropdown",
            data: {
                field:"name"
            },
            success: function(name_dd){
                $('#mySelect').val(name_dd); // this will select the option

            }
        })

    }
})