I understanding form reading many posts were async=false on the ajax request is not really the method for which to ajax requests. However is there a way for me to know the difference decide which one to use or always use async?
I'm currently faced with with a challenge in understanding ajax and ajax with callbacks and when to use callbacks. I have here a button where I click on so that I can have grialicious http://suprb.com/apps/gridalicious/ append the items I need to #my-grid div container. However the ajax request will always run after it returns my items. So the only method for me right now to make this work is to do request.async=false to make it work synchronously. But is this approach the correct way? Or is there a better way to refactor my code?
$('#loadMoreButton').click(function(){
var $grid = $('#my-grid').gridalicious('append',loadMoreUserFeed());
})
function loadMoreUserFeed(){
var loadMoreButton = $('#loadMoreButton')
var items = new Array;
var request = {
success: function(response){
$.each(response.results.items,function(){
myitem = document.createElement('div');
myitem.className = 'my-item';
items.push(myitem)
}
},
error: function(response){
debugger;
}
}
request.dataType= 'json';
request.contentType = 'application/json';
request.data = $(this).serialize();
request.scriptCharset = "utf-8";
request.url = '/my_url';
request.type = "GET";
request.async = true;
$.ajax(request);
return items;
}
I'm getting the following message when I use request.async=false. But when I do request.async=true an empty array will get returned to gridalicious prior to my items list prior to my request finishing.
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
To async or not to async ajax request? When is it acceptable to use async=false? If to chose to stay with async. How should I structure my execution of ajax?
EDIT
The following is a proposed change I've come up with to enable async=true to work:
$('#loadMoreButton').click(function(){
loadMoreUserFeed()
})
function loadMoreUserFeed(){
var loadMoreButton = $('#loadMoreButton')
var items = new Array;
var request = {
success: function(response){
$.each(response.results.items,function(){
myitem = document.createElement('div');
myitem.className = 'my-item';
items.push(myitem)
}
$('#my-grid').gridalicious('append',items);
},
error: function(response){
debugger;
}
}
request.dataType= 'json';
request.contentType = 'application/json';
request.data = $(this).serialize();
request.scriptCharset = "utf-8";
request.url = '/my_url';
request.type = "GET";
request.async = true;
$.ajax(request);
}
But I do not know if this would be the best approach.
EDIT 2
$('#loadMoreButton').click(function(){
loadMoreUserFeed(makeDivItems)
})
function loadMoreUserFeed(callback){
var request = {
success: function(response){
callback()
},
error: function(response){
debugger;
}
}
request.dataType= 'json';
request.contentType = 'application/json';
request.data = $(this).serialize();
request.scriptCharset = "utf-8";
request.url = '/my_url';
request.type = "GET";
request.async = true;
$.ajax(request);
}
function makeDivItems(){
var items = new Array;
$.each(response.results.items,function(){
myitem = document.createElement('div');
myitem.className = 'my-item';
items.push(myitem)
}
$('#my-grid').gridalicious('append',items);
}
