AJAX call stops page from loading other elements - javascript

I'm building a website using Laravel and Jquery. The page is issuing multiple AJAX calls.
One of these calls can take multiple seconds and it seems to be blocking other elements of the page from loading. This includes images and other AJAX calls.
My code more or less looks like this.
$.ajax({
async: true,
url: url,
data: {
//data
},
success: function (response) {
//Process response (append html, images, etc.)
for (var key in response) {
newAJAXCall(response[key]);
}
},
error: function (xhr) {
}
});
newAJAXCall call looks like this:
$.ajax({
async: true,
url: url,
data: {
//data
},
success: function (response) {
//Process response
},
error: function (xhr) {
}
});
newAJAXCall is what's causing the problem. Some of the calls are done within 200 ms. but some can take multiple seconds. When this happens, if any elements didn't load yet they stop loading.
In the case of images, the html for them is already existing. The browser just stops loading them until the AJAX call is done.
I already tried setting async and using a timeout but nothing seems to fix it. The problem happens both in Chrome and Safari so it doesn't seem to be browser specific.
EDIT: Even when the for-loop is removed and the new ajax call is only issued once the problem persists if the call lasts long.
EDIT2: Could it be possible that Laravel/Php is limiting the amount of connections a single client can open?
EDIT3: It seems to be my server which causes the problem. When I load the images from a different server than my own they load fine during the ajax requests.

The problem was that my localhost server didn't have enough capacity. When the website runs on my dedicated server everything loads fine.

As per my comment, please consider putting for loop within newAJAXCall success function
$.ajax({
async: true,
url: url,
data: {
//data
},
success: function (response) {
//Process response (append html, images, etc.)
newAJAXCall(response);
},
error: function (xhr) {
}
});
function newAJAXCall(response) {
$.ajax({
async: true,
url: url,
data: {
//data
},
success: function (response) {
for (var key in response) {
//Process response[key]
}
},
error: function (xhr) {
}
});
}

Related

Shopify draft order issue

I have create draft order using Shopify Draft order api in php via ajax call.
in ajax response I get one url and redirect on it www.mysite.com/17875421/invoices/280fa46bee5ca183da7e774457522428.
url is correct and all things goes well user able to see the checkout page with correct order data.
But sometime shopify show the 404 page rather than checkout page.
after showing the 404 page if I refresh the page by simple heating F5 Key than all works fine.
I can't understand why this happening.
would someone help me to solve and find the reason why this things happening ?
My ajax call function as below
jQuery.ajax({
url: AjaxUrl,
type: "post",
dataType: "json",
data: {
formData
},
beforeSend: function () {
showLoader();
},
complete: function () {
hideLoader();
},
success: function (response) {
if (response['result'] == 'success') {
window.location = response['invoice_url'];
}
}
});

jQuery.jsonp not invoking success callback

I'm using this jQuery plugin to make cross-domain requests to a website. Here's the relevant part of my program:
$.jsonp({
url: "http://soniccenter.org/source/utilities/codebot.php",
data: data, //data is defined
beforeSend: function() {
$('.loading').show();
},
success: function(response) {
$('.output').html(response);
},
error: function() {
$('.output').html("Failed to access TSC. Perhaps the website is down?");
},
complete: function() {
$('.loading').hide();
}
});
}
I can tell the request was successful via my browser's network recorder (200 response code and the text I expect to receive), but the error callback seems to run instead of the success callback because that's what shows up after complete is invoked.
Is this some kind of asynchronous/synchronous problem or...?

jQuery Ajax POST request never completes

I have a long running process that takes about 13-15 minutes to finish. The problem is that, the "complete" and "success" events are never executed. I can confirm from back end that the process has finished (can see updated time stamps in sql table), but on front end, the loading icon keeps spinning.
When I check the Network tab in IE Developer Tools, that specific request remains in "pending" state forever. Interestingly, if I run the same process in Firefox, it correctly execute the complete and success events.
Here is the code (pretty standard post request):
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(params),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
beforeSend: function () {
//Do something
},
complete: function () {
$('#overlay').hide();
},
success: function (retMessage) {
//reload page data
},
error: function () {
}
});
Please help, thanks.

Making 2 AJAX jquery to work synchronous

I have requirement to manage 2 AJAX jQuery functions to start a process in the server and get the status from the server.
I,e. The first AJAX JQuery which will send a request to the server to start a particular process and returns back to the client with the status 'process-running'. The second AJAX JQuery function which will be called inside the success block of first function and its responsibility to query the status until it gets the response 'process-complete'.
Here is the psedo code I have
//This function which will be called on a button click
function buildApplication(){
//show the gif spinner in the front-end
$.when(buildApp()).then(function(result){
console.log('process-completed');
//hide the gif spinner in the front-end
});
}
function buildApp(){
return $.ajax({
type: 'POST',
url: 'url pointing to php script',
data: dataString,
cache: false,
success: function(result){
if(result == 'process-running'){
console.log('monitor starts');
getAppStatus();
console.log('monitor ends');
}
},
error: function(result){
}
});
}
function getAppStatus(){
console.log('Querying server');
return $.ajax({
type: 'POST',
url: 'url pointing to php script',
data: dataString,
cache: false,
success: function(result){
if(result == 'process-running'){
getAppStatus();
}
},
error: function(result){
}
});
}
The sleeping process is handled inside the PHP script of getAppStatus. I.e, If process is still running then the server will sleep for 10 seconds and then only returns response to the client.
The problem is both the functions are running asynchronous. That means the buildApp function invokes the getAppStatus function and just returns back immediately. The getAppStatus function runs as an orphan process.
How can I make it both synchronous (or similar) so that the parent caller will wait till the child to return back?
Note: I tried the async:false in the getAppStatus function but it freezes the browser and the ajax loader image stops spinning and it looks like hanged.

Zepto/JQuery AJAX request automatically downloading media files from requested html

I need to make AJAX request for HTML content, but when I look into firebug it seems that request is downloading media files attached to requested html (images, CSS). How can I stop it? I need only plain text from PHP-genereted HTML.
$.ajax({
type: 'GET',
url: 'http://examplehost.com,
dataType: 'text',
cache: false,
success: function (data) {
// SUCCESS CODE HERE
},
error: function (xhr, type, error) {
// ERROR CODE HERE
},
complete: function() {
// ON COMPLETE CODE HERE
}
});
I also must have possibility to run functions when request is complete!
Im using ZEPTO library, but its JQuery clone, so the functions are similar.

Categories