Why does my page lock while doing ajax request? - javascript

The idea is to generate a heap of thumbnails without geting a server time-out. So I do it one by one with ajax using jQuery.
I have a JavaScript loop running through a set of filenames and asking the server to generate an image for each file. In this case, it's a matter of about 300+ files.
I run through my files and use a separate function to do the ajax request. The top loop wants to display the file currently being processed. But the page appears hanged while the top loop is running. Why? (As you see, i tried to wait a second before calling ajax, but that did not do the trick.)
function mkImgAll() {
$.ajaxSetup({ async: true });
var files = $('.files');
debugClear();
for(i=0;i < files.length;i++) {
var id=files[i].id;
var file=files[i].value;
debugSay(id+' '+file); // <- This does not display
sleep(1000); // until the
mkImg(id, file); // loop has finished.
}
$.ajaxSetup({ async: ajaxAsyncDefault });
}
function mkImg(id, file){
$('#ajaxWaiting').show(1);
$.ajax({
type : 'POST',
url : 'includes/ajax.php',
dataType : 'json',
async: false,
data: {
'proc' : 'makeOneThumb',
'id' : id,
'file' : file
},
btw, the debugSay function does this:
function debugSay(say) {
if(debug) {
$("#debugMessage").append("<xmp>"+say+"</xmp>");
}
}

$.ajax({
....
async: false,
Your request isn't asynchronous. You should put async to true, the use of async: false is deprecated since jquery 1.7 !

I would try to call the debug with setTimeout...

Long shot, but you could try this:
if (debug) {
var dummy = $("#debugMessage").append("<xmp>"+say+"</xmp>").get(0).offsetLeft;
}
That should force refresh the page before the browser gets locked into the sleep(). It's better to use setTimeout() instead of sleep() for that btw, unless your loop really has to pause there.

Related

How to asynchronize multiple Ajax Post call to the same URL

I've an array of items in javascript, and for each item, I've to make an ajax post to a URL to get corresponding info and display the info in a container. The code broadly looks like this:
var data = some_data;
array.forEach(item, idx)=> {
callAjaxAndUpdate(data, item, $('div#container'+i);
});
and the Ajax method is simply
var standardUrl = 'https://example.com/post.php';
function callAjaxAndUpdate(data, item, container) {
$.ajax({
url: standardUrl
data: data,
type: 'POST',
}).done(function(res) {
container.append(res.data);
}).fail(function(res) {
container.append(res.responseText);
}).always(function() {
container.append('DONE!');
});
}
However, this thing whole thing seems to have become blocking. I did server-side logging of timestamps, and I could see that ajax request for each item is getting triggered only after that for the previous one has completed (always section executed).
Could someone help me out with why this setup is synchronous, and how to make it async? Please note that this script is executing in the browser, and not on nodeJS.
EDIT: Turns out, it's the PHP backend which is processing the requests in a blocking way. Perhaps the session is the culprit here. I would close the question now. Thanks for your help and suggestions.
Try default Ajax async
var standardUrl = 'https://example.com/post.php';
function callAjaxAndUpdate(data, item, container) {
$.ajax({
url: standardUrl,
async: true,
data: data,
type: 'POST',
}).done(function(res) {
container.append(res.data);
}).fail(function(res) {
container.append(res.responseText);
}).always(function() {
container.append('DONE!');
});
}
Or you can call the method on .done method

How to run getJSON synchronously? [duplicate]

GOAL: What I'm after is to get data from database and refresh main.php (more evident through draw_polygon) every time something is added in database (after $.ajax to submit_to_db.php).
So basically I have a main.php that will ajax call another php to receive an array that will be saved to database, and a json call another php to return an array will be used by main.php.
$(document).ready(function() {
get_from_db();
$('#button_cancel').click(function(){
$.ajax({
url: 'submit_to_db.php',
type: 'POST',
data: {list_item: selected_from_list},
success: function(result){
...
get_from_db();
}
});
});
function get_from_db(){
$.getJSON('get_from_db.php', function(data) {
...
draw_polygon(data);
});
}
});
In my case, what I did was a get_from_db function call for getJSON to actually get data from database, with the data to be used to draw_polygon. But is that how it should be done? I'm a complete newbie and this is my first time to try getJSON and ajax too to be honest. So my question: How does asynchronous work actually? Is there another workaround for this instead of having to call function get_from_db with getJSON (it isn't synchronous, is it? is that why it doesn't update the page when it isn't within a function?) All the time - like $.ajax with async: false (I couldn't get it to work by the way). My approach is working, but I thought maybe there are other better ways to do it. I'd love to learn how.
To make it more clearer, here's what I want to achieve:
#start of page, get data from database (currently through getJSON)
Paint or draw in canvas using the data
When I click the done button it will update the database
I want to AUTOMATICALLY get the data again to repaint the changes in canvas.
Since $.getJSON() uses ajax configurations, just set the global ajax configs:
// Set the global configs to synchronous
$.ajaxSetup({
async: false
});
// Your $.getJSON() request is now synchronous...
// Set the global configs back to asynchronous
$.ajaxSetup({
async: true
});
Asynchronusly does mean the Request is running in the background, and calls your function back when it got a response. This method is best if you want to have a result but allow to use your app within the request. If you want to have a direct response, take a look at a synchron request. this request will pause script execution until it got a response, and the user can not do anything until the response was recieved. You can toggle it via:
async: false,
So for example:
$.ajax({
url: "myurl",
async: false,
...
})
$.getJSON(), doesn't accept a configuration, as it says in the docs it's a shorthand version of:
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
So just rewrite your request in terms of that and async:false will work just as you expect.
$.getJSON() is a shorthand notation for $.ajax() which can be configured to be synchronous (see jQuery.getJSON and JQuery.ajax):
$.ajax({
dataType: "json",
url: url,
data: data,
async: false,
success: function(data) {
...
draw_polygon(data);
}
});
Try to avoid synchronous calls though. Quote from jQuery doc (see async prop):
Cross-domain requests and dataType: "jsonp" requests do not support
synchronous operation. Note that synchronous requests may temporarily
lock the browser, disabling any actions while the request is active.
You might want to try jQuery Deferreds like this:
var jqxhr = $.getJSON(url);
jqxhr.done(function(data) {
...
draw_polygon(data);
});

Use data from ajax call without using async: false

I'm pretty new to JS/ajax and was a bit confused on ajax data/success returns.
I have the following ajax code. I want it to run the code in succes: after the ajax call has received the json from the imgur api.
It is only working for me with async: false. I thought the bit in success: would only run after the data has been retrieved, but for some reason data is null if aysnc is true.
I've read a lot of SO answers/jQuery documentation but I can't seem to figure out how to get it to not hang the browser with async: false
This code might be running 100+ times on a page (i.e. reddit.com/r/pics with 100 links loaded on one page), so async: false is not only bad practice but also renders the page unusable for 5 to 6 seconds, which is unacceptable.
I've tried making ajax a var then calling that var .success(function(data) ...); but it still does not work. I've also tried replacing success with complete.
It all only ever works with async: false
Any suggestions would be greatly appreciated!
Thanks!
$.ajax({
type: "GET",
url: "https://api.imgur.com/3/gallery/" + hash,
dataType: "json",
headers:{
'Authorization':'Client-ID c606aeeec9ca098'
},
async: false,
success: function(data) {
if(data.data.is_album == true) {
if(data.data.images_count == 1){
el[j].href = el[j].href.replace(/(http(s)?:\/\/)?(www\.)?(m\.)?imgur.com\/gallery\/.*/, data.data.images[0].link);
}else{
el[j].href = el[j].href.replace(/(http(s)?:\/\/)?(www\.)?(m\.)?imgur.com\/gallery\//, "https://imgur.com/a/");
}
}
else{
el[j].href = el[j].href.replace(/(.*)?(http(s)?:\/\/)?(www\.)?(m\.)?imgur.com\/.*/, data.data.link);
}
}
});
You might find the jQuery Deferred object (Promises interface) to be helpful. It allows you to do stuff like:
var promise = $.ajax("/myServerScript1");
function getStuff() {
return $.ajax("/myServerScript2");
}
promise.then(getStuff).then(function(myServerScript2Data){
// Do something with myServerScript2Data
});
Resource (this is well written and a necessary read for anyone using AJAX):
http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-deferred.html
I can't see what doesn't work on your code but I can tell you what is not recommended.
Always have a failure handler : You have to put a function in the fail field of your request object. If you don't, you will not be able to see any errors.
Keep the test simple : You should begin by only displaying the value of the request result instead making some calculation with it. This way you can debug ONLY the request call and you are sure that the problem doesn't came from the calculation code
Use Promises API : As previously pointed by the #gibberish, the modern way to do what you want is to use Promises. You can use jQuery's promises or any other like ES6 Promises (that one requires a compilation time for most of browsers)

Ajax async : false freezes web page during loading in slow network

I use jquery AJAX for web page and use async : false option as following. My client's network is very slow. When I try to load the web page from the server web page is slow and all the controls are freeze. Is that "async:false" matter? here my code
function ajaxRequestWithNoArguments(url) {
return $.ajax({
url: urlForPhp + '/' + url,
data: '',
dataType: 'JSON',
async: false,
method: 'POST'
});
}
When I try to load the web page from the server web page is slow and all the controls are freeze. Is that "async:false" matter?
Yes, this is exactly why you should not use async:false, it's used in very specific cases and sounds like you don't need it. Making the request synchronous means that browser will pause program execution (freeze all UI too) until the request is done, the data is loaded back and processed. You don't wan't it in most cases, that's why you need to use default async: true.
function ajaxRequestWithNoArguments(url) {
return $.ajax({
url: urlForPhp + '/' + url,
data: '',
dataType: 'JSON',
method: 'POST'
});
}
Returning a promise object is convenient way to deal with asynchronous function. In this case you would use ajaxRequestWithNoArguments as follows:
ajaxRequestWithNoArguments('/some/url').then(function(response) {
console.log('Data loaded', response);
});
function OpenAjax(link, form_id)
{
document.getElementById("page-wrapper").innerHTML = "";
$.ajaxSetup({ async: true });
$("#page-wrapper").load(link, function(){
$("#" + form_id).validator();
});
}
This is my code. I had the same issue and setting it to true will fix it. When set it to true another problem may occur. Your javascript code will continue to work and if you have a response text you must tell JQuery to run your code after response, as in my example:
$("#" + form_id).validator();
This code works after response, but if I write my code this way
function OpenAjax(link, form_id)
{
document.getElementById("page-wrapper").innerHTML = "";
$.ajaxSetup({ async: true });
$("#page-wrapper").load(link, function(){
//Code moved from this line
});
//Here
$("#" + form_id).validator();
}
$("#" + form_id).validator(); - code will work before Ajax response

How to download a text file and store as a string in jQuery

I have a set of text files representing a table of data from a third party that I'd like to download using a JavaScript application. They look something like this:
col1 col2 .. coln
vala valb .. valz
valA valB .. valZ
etc..
I've been trying to use jQuery to do this. I've been able to use $.load, but I don't want to store the data in the DOM, instead I'd like to parse it out into an object. Whenever I try to use an of the ajaxy methods I'm getting an error I don't understand. For example:
var myData;
$.ajax({
type: 'GET',
url: $(this).attr('source'),
dataType: 'html',
success: function(data) {
myData = data;
}
});
alert(myData);
Gives me an undefined value for myData. Any suggestions would be appreciated.
For that code to work the event needs to be syncrounus, in other word, set async: false in the $.ajax-call. The problem comes because ajax is normally async, meaning that when you do the alert, the request might, or might not have finished. Normally though, it won't cause it takes longer time to fetch a page than to do a function-call. So, by setting async: false, you tell jquery (and the ajax-handler) to wait till the page is finished loaded before you try to alert the data. Another method to achieve the same effect is to do something like this:
var myData;
function fin(data) {
myData = data;
alert(myData);
}
$.ajax({
type: 'GET',
url: $(this).attr('source'),
dataType: 'html',
success: fin
});
This approach is probably better than to set async to false, because it won't make the browser hang while waiting for the page your loading. However, asynchronous programming is not something that is easy to learn, therefore many will find it easier to use async: false.

Categories