CODEWITHSUNDEEP
javascriptjquery
user2142672
user2142672

Reputation: 3

$.getJSON request does not run but next line of code does

I have a $.getJSON request that does not run but the line of code right after the request does. If I remove all the code after the $.getJSON request the request will run. How do I get the request to run iterate over returned data then run code following the request.

var eventList = new Array();
$.getJSON('../index.php?/home/events', function(eventItems){    
    $.each(eventItems, function() {
        var event = this;
        var eventItem = new Array();
        // format the date and append to span
        eventItem[0] = formatMDYDate(formatTimeStamp(this.loc_datetime, false), 0);
        // add shortdescription to div
        eventItem[1] = this.shortdescription; 

        // check if longdescription exist
        if (this.longdescription) {
            // create new anchor element for "More Info" link on events
            var link = $('<a></a>');
            link.attr('href', '../index.php?/home/event_info');
            link.addClass('popup');
            link.html('More Info');
            //link.bind('click', eventPopUp());
            link.bind('click', function() {
                var addressValue = event.id;
                dialog = $('<div></div>').appendTo('body');
                dialog.load('../index.php?/home/event_info', 
                    {id: addressValue});
                dialog.modal({
                    opacity: 80
                });
                return false;
            });
            eventItem[2] = link;
        }
        eventList.push(eventItem);
    });  
});
// removing the following lines of code will let the .getJSON request run
if (eventList.length > 0) {
    write_Events(eventList);
}

I have no idea what is causing this issue, please help!

Upvotes: 0

Views: 326

Answers (4)

Bilal lilla
Bilal lilla

Reputation: 658

javascript code never wait for the response from the server and we need to stop the processing of javascript until we get the response from the server.

we can do this by using jquery.Deferred

You can also visit this tutorial.

Upvotes: 0

Shahdat
Shahdat

Reputation: 5483

try 

var eventList = new Array();
    $.getJSON('../index.php?/home/events', function (eventItems) {
        $.each(eventItems, function () {
            //....
            eventList.push(eventItem);               
        });
        // removing the following lines of code will let the .getJSON request run
        if (eventList.length > 0) {
            write_Events(eventList);
        }
    });

Alternatively, you can use PubSub with jquery technique 

 var eventList = new Array();
    $.getJSON('../index.php?/home/events', function (eventItems) {
        $.each(eventItems, function () {
           //....
            eventList.push(eventItem);               
        });            
        //publisher
        $(document).trigger('testEvent', eventList);
    });

    //subscriber
    $(document).bind("testEvent", function (e, eventList) {
        if (eventList.length > 0) {
            write_Events(eventList);
        }
    });

For more detials http://www.codeproject.com/Articles/292151/PubSub-with-JQuery-Events

happy coding.. :)

Upvotes: 3

HMR
HMR

Reputation: 39250

Asynchronous means that when you call it the JS runtime will not wait for it to finish before executing next line of code. Typically you need to use call backs in this case.

It's something like:

var a="start";
setTimeout(function(){
 a="done";
 dosomethingWithA(a);
},1000);
if(a=="done"){}//doesn't matter, a is not "done"
function dosomethingWithA(a){
 // a is "done" here
}

In your case the code should look something like:

var eventList = new Array();
$.getJSON('../index.php?/home/events', function(eventItems){    
    $.each(eventItems, function() {
        var event = this;
        var eventItem = new Array();
        // format the date and append to span
        eventItem[0] = formatMDYDate(formatTimeStamp(this.loc_datetime, false), 0);
        // add shortdescription to div
        eventItem[1] = this.shortdescription; 
        // check if longdescription exist
        if (this.longdescription) {
            // create new anchor element for "More Info" link on events
            var link = $('<a></a>');
            link.attr('href', '../index.php?/home/event_info');
            link.addClass('popup');
            link.html('More Info');
            //link.bind('click', eventPopUp());
            link.bind('click', function() {
                var addressValue = event.id;
                dialog = $('<div></div>').appendTo('body');
                dialog.load('../index.php?/home/event_info', 
                    {id: addressValue});
                dialog.modal({
                    opacity: 80
                });
                return false;
            });
            eventItem[2] = link;
        }
        eventList.push(eventItem);
    });
    processEventList();  
});
function processEventList(){
  // removing the following lines of code will let the .getJSON request run
  if (eventList.length > 0) {
    write_Events(eventList);
  }
}

Upvotes: 4

Ben McCormick
Ben McCormick

Reputation: 25728

$.getJSON is an asynchronous call. The callback will not execute until after the current function has executed completely. The code after the call will always run BEFORE the getJSON callback runs.

Its possible the write_Events function is throwing an error and stopping execution, which is why the callback is never running. Or it is actually running but you're not seeing evidence of it for whatever reason called by the extra code.

Upvotes: 1

Related Questions