Ajax Asysnchronous request issue

Question

On this below, this code works, when, I use alert() box, after, i pressed the alert box, then, the content are getting loaded on the page. But, If I remove the alert() box, then, the content is not getting loaded. Just to let let you know whoever reads this, Am sorry, I've gone through lot of reads on this 'Ajax' request, but, I could not make this to understand. Any help on this?

var myPage = myPage || {};
myPage.datas = "";
myPage.Content = (function(){
$.ajax({
async: true,
    type:'GET',
    url: 'JSON/carousel-data.json',
    dataType: "json",
    success: function(data) {
       myPage.datas = myPage.dataRetive(data); 
    }
});
})(); 

myPage.dataRetive = function(dataIn){
return dataIn;
}

alert(myPage.datas); // Here is the place, if i use this alert, then, content is loading, otherwise, it is not.

myPage.globals = {
Contact: $("#Contact")[0],
About : $("#About")[0],
Careers : $("#Careers")[0],
sampMaxLimits: 20,
Images:  {
  fpn1: myPage.datas[0].image, // error comes these place
  fpn2: myPage.datas[1].image,
  fpn3: myPage.datas[2].image
}

}

score 1 · Answer 1 · answered Mar 12 '15 at 06:43

Modify your code as below

$.ajax({
async: true,
type:'GET',
url: 'JSON/carousel-data.json',
dataType: "json",
success: function(data) {
   myPage.datas = myPage.dataRetive(data); 
   myPage.globals = {
        Contact: $("#Contact")[0],
       About : $("#About")[0],
        Careers : $("#Careers")[0],
     sampMaxLimits: 20,
      Images:  {
        fpn1: myPage.datas[0].image, // now myPage.datas will be available
       fpn2: myPage.datas[1].image,
      fpn3: myPage.datas[2].image
   }

  }


}
});

Now it will update the myPage.globals correctly

Ajax Asysnchronous request issue

1 Answers1