We Keep Coding

AJAX call stops page from loading other elements

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) {
}
});
}

Loading gif in ajax call is not working properly, it will get hanging while loading in google Chrome

Loading action should not work properly & While loading the page, the page gets hanged for few seconds due to loading action.
code as follows..
$("#loadingIcon").show();
$.ajax({
type: "GET",
url: "displayCartItems.action",
data: param,
success: function(result){
$('#cartPage').html(result) ;
$("#loadingIcon").hide();
getCartItemPriceDetail();
loadCart = false;
},
});
$("#loadingIcon").show() is consist of gif image but it is hanging in web page while loading
please find the image and please provide solution for this

From what I understand is you want to show animated gif when ajax call is in progress and stop / hide the image when it is completed. I prefer doing this way:
//Assuming loading gif is hidden
$(function () {
$(document).ajaxStart(function () {
$("#loadingIcon").show();
}).ajaxStop(function () {
$("#loadingIcon").hide();
});
});
Regarding you page hang issue, I suspect, ajax is returning an error so the success did not happen. This will cause the image to stay on ( hang issue). To find this you could check the chrome inspect element and check network and verify what response you are getting.

Try to show the image in the ajax beforeSend. Also check does the ajax success function is running or the error function.
$.ajax({
type: "GET",
url: "displayCartItems.action",
data: param,
beforeSend: function() {
$("#loadingIcon").show();
},
success: function(result) {
$('#cartPage').html(result);
$("#loadingIcon").hide();
getCartItemPriceDetail();
loadCart = false;
},
error: function(jqXHR, textStatus, errorThrown ) {
console.log(textStatus);
}
});

Links brought in after loading a page through jquery AJAX do not work

Running into an issue with a mobile app. We are doing an jQuery ajax to call in a remote page off our sever (using Cordova as the shell). This brings in the remote code (bare-bone HTML) and we plan to use local resource to style it.
getMyPage: function() {
$.ajax({
type: "GET",
url: "http://localhost:8888/shell/",
crossDomain: true,
timeout: 10000,
success: function(data) {
$("appbody").html(data);
},
error: function( xhr,err ) {
alert('Cannot Connect to the Internet');
}
});
}
It brings in the page fine, but when we click on any of the links (served from the CMS Drupal) nothing happens. Through inspector it thinks the files are local using the file:// prefix which do not exist. Anyone know how to make those links perform the same AJAX call to the remote server?
i.e all the links perform the same ajax GET call.

AJAX: why isn't my javascript loading with the content?

This is my first time using AJAX. I'm trying to load one of my pages when a link is clicked (I know I can just do <a href="something.html"> but I am doing it just for the sake of using AJAX, and ran into an issue where my page loads but the javascript of the page doesn't. Is this a normal AJAX consequence? I'm guessing it has to do with dataType: html? Here's my code:
function getContent(filename) {
$.ajax({
url: filename,
type: "GET",
dataType: "html",
beforeSend: function(){
$('html').html('<img src="../images/loading.gif">');
},
success: function (data, textStatus, xhr) {
if (filename == "second.html") {
setTimeout(function (){
$('html').html(data);
}, 2000);
} else {
$('html').html(data);
}
},
error: function(xhr, textStatus, errorThrown) {
$('html').html(textStatus);
}
});
}

Can you check chrome's network monitor? First off, does anything get a 404? Is the file literally second.html? If so then there shouldn't be path issues. Next what is the "response" that appears for that item? Does that response look ok?
Next, why don't you try moving the JS from head into the body for the second page? JS should always be right before the closing body tag for performance reasons. Also, there may be an issue with JS being in head and it not getting executed for that reason.
You should be able to load anything on your domain without any issues via AJAX, but there are path issues to watch out for.

This is because the ajax page is only returning rendered content, but does not run like a normal page would. You can use PHP on the ajax page for example, the server renders it and then sends it through, because PHP is pre-render, javascript runs after the page is rendered, as far as I know.

In IE lightbox doesn't show if a synchronous ajax request is made

I've got the following code that shows a lightbox 'please wait' box, then does a synchronous ajax request which removes the lightbox when it finishes. Works fine everywhere else, but in IE, the lightbox doesn't show. The Ajax request works fine, but it just seems to ignore the lightbox.
The showLightbox function just does that, show a modal lightbox with the passed in text.
showLightbox("Please Wait");
$.ajax({
async: true,
dataType: 'json',
type: 'GET',
url: checkValidUrl,
data: submitData,
error: function(request, textStatus, errorThrown) {
valid = false;
},
success: function(data, textStatus) {
valid=true;
},
complete: function(request, textStatus) {
hideLightbox();
}
});
If I make the ajax requst async it works fine, but I need it to be synchronous because this is a validation method.
Update: Also, if I wrap the whole ajax request in a setTimeout it also works in IE, but that is asynchronous too
Update 2: I just replaced the lightbox with a simple div and did a jQuery .show() on beforeSend and .hide() on complete, and it didn't show that either, so it doesn't seem to have anything to do with the lightbox. If I whack an alert() immediately after showLightbox() it does show the lightbox

My guess is that IE either is too busy doing the request to show the lightbox or that it thinks it's supposed to stop to do the request. Try adding the showLightbox() function to the $.ajax function itself, to the beforeSend option.
$.ajax({
async: true,
dataType: 'json',
type: 'GET',
url: checkValidUrl,
data: submitData,
beforeSend: showLightbox(),
error: function(request, textStatus, errorThrown) {
valid = false;
},
success: function(data, textStatus) {
valid=true;
},
complete: function(request, textStatus) {
hideLightbox();
}
});

In your ajax call, you need to call the lightbox functionality again. I used Lytebox, so it may be different for you.
$j.post("kitchen.php", $j("#post_form").serialize(),function(result) {
//xmlhttp.open("GET","ajax_test.php",true);
//xmlhttp.send();
$j('#grab_kitchen').attr({'disabled' : 'false'});
$j('#grab_kitchen').removeAttr('disabled');
$j('#Output').fadeIn(500);
$j('#Output').html(result);
$j("body").css("cursor", "auto");
// add there your lytebox function to work
initLytebox();
});

This smells funny.
Firstly, I can't think of any good reason for using a synchronous request -- doing so locks the user's browser until the response is returned. It's a terrible user experience which would make most users think your website is killing their browser.
Secondly, you say you're doing this for validation? Any user who is malicious enough to try to alter a form while they wait for the asynchronous response would also be smart enough to just change your "async: false" to "async: true". Remember that all validation on the client side is only there for the benefit of the user, and all proper validation should be done server-side. I don't see why you'd need to do things this way.

Perhaps you should show the lightbox, and then do a setTimeout before you actually begin the synchronous request. I suspect that IE doesn't render your DOM changes until it gets control back from your JS function, and that doesn't happen until after the ajax request, and the box is hidden again. Give it a chance to render the lightbox, and then start your ajax request.
showLightbox("Please Wait");
setTimeout(function() {
$.ajax({
async: false,
dataType: 'json',
type: 'GET',
url: checkValidUrl,
data: submitData,
error: function(request, textStatus, errorThrown) {
valid = false;
},
success: function(data, textStatus) {
valid=true;
},
complete: function(request, textStatus) {
hideLightbox();
}
});
}, 100);

I have the same exact issue.
http://www.precisehomebuilders.com/kitchen-remodeling
There is a button at the bottom of the page that grabs more photo galleries, which works.
Here's the thing: if I do a "save as" after the ajax call and reload it, then it totally works. There's just something about grabbing lightbox items through ajax.