Multiple JQuery getJSON calls to MVC Controllers not executing Synchronously

Question

I am building a POC using MVC4. I have some jquery json calls to 2 different MVC controllers. I need the second one to wait until the first is finished before it runs because the second one needs a cookie created in the first one. GetUserItem should run first and when it is done GetMoreFeedItems should run.

Here is my code snippet:

var pageNumber = 0;
var feedCount = -1;
var itemsLoaded = 0;
var resultsPerPage = 10;
var loadingData = false;

$(document).ready(function () {

    GetUserItem();
});


function GetUserItem() {

    $.getJSON('/controllers/User/', function (result) {

        var root = $.parseJSON(result);
        var user = root["root"];

        $.each(user, function (i, item) {
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Id: ' + item.uid + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Username: ' + item.username + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Name: ' + item.first_name + " " + item.last_name + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Birthday: ' + item.birthday + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:125px;">Profile Pic: <img alt="' + item.username + '" src="' + item.pic_small + '" /><br/>' + '</div>');
        });

    });

    GetMoreFeedItems();    
}

function GetMoreFeedItems() {
    if (feedCount == -1 || itemsLoaded < feedCount) { 

        if (loadingData === false) {
            loadingData = true;

            //Add loading spinner
            $('#feed-container').append('<div id="loader" style="height:20px; background-image:url(Images/loading_gray.gif);background-repeat:repeat-x;"></div>');

            $.getJSON('/controllers/Feed/' + pageNumber + '/' + resultsPerPage, function (result) {

                feedCount = result.substring(0, result.indexOf(','));

                var feed = $.parseJSON(result.substr(result.indexOf(',') + 1));

                $.each(feed, function (i, item) {
                    if (item.itemtype === "checkin")
                        $('#feed-container').append(buildOne(item));
                    else if (item.itemtype === "like")
                        $('#feed-container').append(buildTwo(item));
                    else if (item.itemtype === "post")
                        $('#feed-container').append(buildThree(item));
                    else if (item.itemtype === "message")
                        $('#feed-container').append(buildFour(item));
                    else if (item.itemtype === "story")
                        $('#feed-container').append(buildFive(item));
                });

                loadingData = false;
                itemsLoaded += resultsPerPage;

                //Remove loading spinner
                $('#loader').remove();
            });
        }
    }
}

Jonathan M · Accepted Answer · 2012-07-06 20:43:51Z

3

Put the call to GetMoreFeedItems() inside the success function for $.getJSON().

function GetUserItem() {

    $.getJSON('/controllers/User/', function (result) {

        var root = $.parseJSON(result);
        var user = root["root"];

        $.each(user, function (i, item) {
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Id: ' + item.uid + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Username: ' + item.username + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Name: ' + item.first_name + " " + item.last_name + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Birthday: ' + item.birthday + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:125px;">Profile Pic: <img alt="' + item.username + '" src="' + item.pic_small + '" /><br/>' + '</div>');
        });

        GetMoreFeedItems();    


    });

}

answered Jul 6, 2012 at 20:43

Jonathan M

17.5k9 gold badges61 silver badges95 bronze badges

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

2 Comments

TheZ Over a year ago

This, if it's in the callback it'll run when the other completes.

Rhonda Over a year ago

Interesting I had it that way originally and kept getting an error. Apparently that was not the reason for the error, because it is working fine now.

Collectives™ on Stack Overflow

Multiple JQuery getJSON calls to MVC Controllers not executing Synchronously

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related