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

Requesting a file through Ajax

I have tried this as an answer from my previous question, but it does not work it just reports 500 Internal Server Error and Firebug does not report any details of the error:
(function worker() {
$.ajax({
url: 'buildmarkers.inc.php',
type: 'POST',
success: function(data) {
$('.result').html(data);
},
complete: function() {
// Schedule the next request when the current one's complete
setTimeout(worker, 30000);
}
});
})();
when I try it like this it is working:
<?php include('buildmarkers.inc.php')?>

Your real question is, "Why am I getting a 500 error." and the answer to that can't be determined without the code for buildmarkers.inc.php. You aren't seeing anything in firebug because it's a server side error. If you modify your javascript and add an error function, you'll see it fail on the client.
(function worker() {
$.ajax({
url: 'buildmarkers.inc.php',
type: 'POST',
success: function(data) {
$('.result').html(data);
},
error: function(data){
console.log("Save me Tom Cruise! The server is on fire!");
},
complete: function() {
// Schedule the next request when the current one's complete
setTimeout(worker, 30000);
}
});
})();

Ajax call will get the file with relative path of URI (based on DOCUMENT_ROOT or webserver), it might be different with include() in PHP that uses absolute path of current script file. You might:
Check the folder structure of your project, is there any difference between your script path and "buildmarkers.inc.php"'s one?
Does it have any rewrite rule on you webserver?
You should check the error log of your webserver, it should show helpful messages.

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.

JSON data not responding

Following is my code :
function jsonpCallback(response){
//JSON.stringify(response)
alert(response);
}
$.ajax({
url: url,
dataType: 'jsonp',
error: function(xhr, status, error) {
alert(error);
},
success: function(data) {
alert(data);
jsonpCallback(data);
}
});
Here my url variable is the link which contain the following data and as per I know it is in the JSON format:
[{"destination":"United States","destinationId":"46EA10FA8E00","city":"LosAngeles","state":"California","country":"United States"}] etc..
I want to call jsonpCallback function after passing successive data to it. But success argument of $.ajax is not calling the function thats why I am not getting any data into it. But my debugger window showing response there, so why its not coming $.ajax function?
Any help...thanks in advance.

Try to pass type of ajax call GET/POST.
$.ajax({
type: "GET",
url: url,
dataType: 'jsonp',
error: function(xhr, status, error) { alert(error); },
success: function(data) {
alert(data);
jsonpCallback(data);
}
});
function jsonpCallback(response){
//JSON.stringify(response)
alert(response);
}

The URL you are trying to load data from doesn't support JSONP, which is why the callback isn't being called.
If you own the endpoint, make sure you handle the callback GET parameter. In PHP, your output would look like this:
<?php
echo $_GET['callback'].'('.json_encode($x).')';
This will transform the result to look like this:
jsonp2891037589102([{"destination":"United States","destinationId":"46EA10FA8E00","city":"LosAngeles","state":"California","country":"United States"}])
Of course the callback name will change depending on what jQuery generates automatically.
This is required as JSONP works by creating a new <script> tag in the <head> to force the browser to load the data. If the callback GET parameter isn't handled (and the URL returns a JSON response instead of a JSONP response), the data gets loaded yes, but isn't assigned to anything nor transferred (via a callback) to anything. Essentially, the data gets lost.
Without modifying the endpoint, you will not be able to load the data from that URL.

One weird thing I've noticed about $.ajax is that if the content-type doesn't match exactly it's not considered a success. Try playing around with that. If you change success to complete (and fix the arguments) does it alert?

It's not working because your server does not render a JSONP response. It renders a JSON response.
For JSONP to work, the server must call a javascript function sent by the ajax request. The function is generated by jQuery so you don't have to worry about it.
The server has to worry about it, though. By default, this function's name is passed in the callback argument. For example, the URL to the server will be http://some.domain/ajax.php?callback=functionName (notice callback=functionName).
So you need to implement something like the following on the server side (here in PHP):
$callback = $_GET['callback'];
// Process the datas, bla bla bla
// And display the function that will be called
echo $callback, '(', $datas, ');';
The page returned will be executed in javascript, so the function will be called, so jQuery will call the success function.

First check in which event you are calling $.ajax function...
<script type='text/javascript'>
jQuery('#EnrollmentRoleId').change(function(){
alert("ajax is fired");
$.ajax({
type: "GET",
url: url,
dataType: 'jsonp',
error: function(xhr, status, error) { alert(error); },
success: function(data) {
alert(data);
jsonpCallback(data);
}
});
});
function jsonpCallback(response){
//JSON.stringify(response)
alert(response);
}
</script>
second try to replace $ with jQuery.
Try to give no conflict if you thinking any conflict error..
jQuery ajax error callback not firing
function doJsonp()
{
alert("come to ajax");
$.ajax({
url: url,
dataType: "jsonp",
crossDomain: true,
jsonpCallback:'blah',
success: function() { console.log("success"); },
error: function() { console.log("error"); }
});
}
Then check your json data if it is coming it is valid or not..
Thanks

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.