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;
});

In what way does this actually fail? What happens? When you debug it, where does the observed behavior differ from the expected behavior? — David
– David, Commented Feb 29, 2016 at 17:48
Remove the inner $(function() { ... }) wrapping your code. It is a document ready handler. — Jasen
– Jasen, Commented Feb 29, 2016 at 17:48
Use the browser's network monitor to examine these AJAX requests. What is the response from the first request and is the second request made? — Jasen
– Jasen, Commented Feb 29, 2016 at 17:54
You shouldn't re-use the same variable names in the second callback, either - if only for the sake of clarity. — Dave
– Dave, Commented Feb 29, 2016 at 17:55

johnny 5 · Accepted Answer · 2016-02-29 18:01:31Z

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

edited Feb 29, 2016 at 18:01

answered Feb 29, 2016 at 17:51

johnny 5

21.2k55 gold badges138 silver badges217 bronze badges

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

5 Comments

Amy Neville Over a year ago

Thanks but it does the same thing if I do that. Nothing happens.

johnny 5 Over a year ago

Are you sure it's returning success? maybe add some error handlers

Amy Neville Over a year ago

I don't think it's even making the call. $("#exchange-visits-container").hide().html() even this line isn't executing.

johnny 5 Over a year ago

check to make sure your server is returning the correct html data. You should just add some console.logs so you won't have to debug

johnny 5 Over a year ago

@AmyNeville try the template pattern later too it will make all those nasty string html issues go away and it will be easier to maintain

Collectives™ on Stack Overflow

Load AJAX inside of AJAX using Jquery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related