Load AJAX inside of AJAX using Jquery

Question

I'm having a problem with the following code. It works fine up until the point where it starts to apply changes to the html that was loaded in the first ajax function.

Basically I'm trying to nest one ajax call inside another.

$(document).on("click", '#advertiser-email-submit', function(event) {
    $(this).blur();
    var email = $("#advertiser-email").val();

    $(".marketing").hide().html("");
    $("#stats-container").hide().html("");
    $("#advertiser-container").hide().html('<div style="height:64px;"><div class="col-md-5"></div><div class="col-md-1"><img src="https://www.example.com/images/spinner_white_green.gif"></div><div class="col-md-5"></div></div>').show();

    $.post("https://www.example.com/advertisers/interface/email/submit", {
            email: email
        },
        function(data, status) {
            if (status == "success") {
                if (data.length > 0) {
                    //Load advertiser interface
                    $("#advertiser-container").hide().html(data).show();

                    //Load exchange visits list
                    var advertiser_id = $("#advertiser-overview").data("advertiser-id");

                    //THIS IS WHERE IT STARTS TO FAIL

                        $("#exchange-visits-container").hide().html('<div style="height:64px;"><div class="col-md-5"></div><div class="col-md-1"><img src="https://www.example.com/images/spinner_black_white.gif"></div><div class="col-md-5"></div></div>').show();
                        $.post("https://www.example.com/advertisers/interface/exchange/visits/list", {
                                advertiser_id: advertiser_id
                            },
                            function(data, status) {
                                if (status == "success") {
                                    if (data.length > 0) {
                                        $("#exchange-visits-container").hide().html(data).show();
                                    }
                                }
                            });
                }
            }
        });
    return false;
});

Answer 1

Your wrapping the inner function in a document ready instead of just calling the ajax

$(document).on("click", '#advertiser-email-submit', function(event) {
    $(this).blur();
    var email = $("#advertiser-email").val();

    $(".marketing").hide().html("");
    $("#stats-container").hide().html("");
    $("#advertiser-container").hide().html('<div style="height:64px;"><div class="col-md-5"></div><div class="col-md-1"><img src="https://www.example.com/images/spinner_white_green.gif"></div><div class="col-md-5"></div></div>').show();

    $.post("https://www.example.com/advertisers/interface/email/submit", {
        email: email
    },
    function(data, status) {
        if (status == "success") {
            if (data.length > 0) {
                //Load advertiser interface
                $("#advertiser-container").hide().html(data).show();

                //Load exchange visits list
                var advertiser_id = $("#advertiser-overview").data("advertiser-id");

                    var template = $('#templateId').removeAttr('id');
                    $("#exchange-visits-container").hide().html(template ).show();
                    $.post("https://www.example.com/advertisers/interface/exchange/visits/list", {
                        advertiser_id: advertiser_id
                    },
                    function(data, status) {
                        if (status == "success") {
                                if (data.length > 0) {
                                $("#exchange-visits-container").hide().html(data).show();
                            }
                        }
                    });

            }
        }
    });
   return false;
});

Also it would be easier to debug and clean you code up if you used a template like this:

<div id="templateId" style="height:64px;"><div class="col-md-5">
   </div><div class="col-md-1"><img src="https://www.example.com/images/spinner_black_white.gif"></div>
   <div class="col-md-5"></div>
</div>

then you could set you html easier like this:

 var template = $('#templateId').removeAttr('id');
 $("#exchange-visits-container").hide().html(template ).show();

this is just an example so you should probably hide the template and then also make it visible