Code before synchronous AJAX call hangs in Chrome
I want to change a button in loading state when making a synchronous AJAX call. Except for the jQuery code (in Chrome) that changes the button to load the state, hangs until the AJAX call is complete. This way, the loading status will be displayed for 1ms after the ajax call.
I created an example in JSFiddle to test it. (Register in Chrome)
http://jsfiddle.net/b8w9hf01/
$('.button').on('click', function()
{
// change button text (DOESN'T SHOW)
$(this).html('Loading..').delay(10);
// do async call
$.ajax({
url: 'http://echo.jsontest.com/insert-key-here/insert-value-here/key/value',
async: false,
dataType: "json",
success: function(poResponse){
console.log(poResponse);
}
});
// change button text
$('.button').html('Done');
// put Click here back after a second, for repeation of the test
setTimeout(function() { $('.button').html('Click here'); }, 1000);
});
Changing it to an asynchronous call will work, but there will be a lot of work for now. Does anyone have a solution? Thank!
source to share
For an explanation, you can check here :
The code is before starting the call, but that doesn't mean you see the result immediately. If the call is valid and completely synchronous, the window may not be updated until after $ .ajax the call completes.
If you insist on using a synchronous ajax call, which is really deprecated, you can do the following:
// change button text
$(this).html('Loading..');
// do async call
setTimeout(function () {
$.ajax({
url: 'http://echo.jsontest.com/insert-key-here/insert-value-here/key/value',
async: false,
dataType: "json",
success: function (poResponse) {
console.log(poResponse);
}
});
// change button text
$('.button').html('Done');
}, 20);
Demo
Update
For the record, the async version is really simple:
// change button text
$(this).html('Loading..');
// do async call
$.ajax({
url: 'http://echo.jsontest.com/insert-key-here/insert-value-here/key/value',
async: true,
dataType: "json",
success: function (poResponse) {
// change button text
$('.button').html('Done');
console.log(poResponse);
}
});
Demo
source to share
Here is the code that will create the expected behavior and you want to exit your button:
$('.button').on('click', function()
{
// change button text (DOESN'T SHOW)
$(this).html('Loading..');
// Let disable the button to prevent further clicks.
$(this).('attr','disabled');
// do async call
$.ajax({
url: 'http://echo.jsontest.com/insert-key-here/insert-value-here/key/value',
dataType: "json",
success: function(poResponse){
//Ajax is successful, we can enable the button again.
setTimeout(function() {
$(this).removeAttr('disabled');
$(this).html('Done');
}, 1000);
},
error: function(){
//So there was an error, let enable the button & let the user know (so wise of us)
setTimeout(function() {
$(this).removeAttr('disabled');
$(this).html('Error occured, Try Again');
}, 1000);
}
});
// put Click here back after a second, for repeation of the test
setTimeout(function() { $('.button').html('Click here'); }, 3000);
});
source to share