Since we have our new server we have some issues with calling multiple jquery posts.
On some pages we call multiple jquery posts like this:
$.ajax({
type: "POST",
url: "../files/processed/includes/process.php",
data: $('#myform').serialize(),
complete: function(data)
{
$('#results').html(data.responseText);
}
});
$.ajax({
type: "POST",
url: "../files/processed/includes/folders.php",
data: '',
complete: function(data)
{
$('#getFolders').html(data.responseText);
}
});
The last post always wait for the first one. On our old server this was no problem and both posts loaded at te same time.
With a small change I speeded up a little but not as fast when used our old server. Strange thing is that the resources on our new server are much better.
The change I mentioned is:
$.ajax({
type: "POST",
url: "../files/processed/includes/process.php",
data: $('#myform').serialize(),
complete: function(data)
{
$('#results').html(data.responseText);
$.ajax({
type: "POST",
url: "../files/processed/includes/folders.php",
data: '',
complete: function(data)
{
$('#getFolders').html(data.responseText);
}
});
}
});
Is there another fix to load both posts at the same time or at least to speed it up?
On the server perform session_write_close() as soon as you don't need to modify session data.
Otherwise the second request waits until the first one holds the session file locked. And the lock is released after the first request ends.
Related
I am doing a simple ajax call.but in the page i'm calling there's an ajax call to a pdf file. Is there a way to make the page wait until all the ajax calls on the requested page are loaded? I am getting as well the following error :"Can't create DocumentThreadableLoader"
$.ajax({
type: "POST",
dataType: "text",
url: '/test/test.pdf',
success: function (data) {
$('body').html(data);
},
data: body
});
Not recommended since ajax is meant for async calls
$.ajax({
type: "POST",
dataType: "text",
async: false, // ADD THIS LINE
url: '/test/test.pdf',
success: function (data) {
$('body').html(data);
},
data: body
});
Best Solution
Use callback structure and or jQuery built in promises (success, done, always, complete, etc).
load pdf data into html body
$( "body" ).load( "test/test.pdf" );
I have an ajax call inside ajax. Problem is I have to wait second ajax finish because until that time browser freezes. Why is this happening if I set it to async true? I dont want to wait for any response from this second inner ajax and I dont need any response from it. It is just an email notification to some users based and needs parameters from first ajax.
$.ajax({
url: 'route_process.php',
cache: false,
async: true,
type: 'post',
data: {type: document.getElementById('type').value},
dataType: 'html',
success: function(data) {
data = data.split("brk");
$('.spinner').css({'display':'none'});
$('#save_button').prop("disabled",false);
$.ajax({
url: 'sent_hike_drive_notification.php',
cache: false,
type: 'post',
async: true,
data: {type: data[1], insert_id: data[2], date_search_array: data[3], from_city_lat: data[4], from_city_lng: data[5], to_city_lat: data[6], to_city_lng: data[7], counter: data[8], insert_id2: data[9], date_search_array2:data[10]},
dataType: 'html',
success: function(result) {
}
});
Drive.resetRoute();
alert(data[0]);
},
Thanks all, now I found out the problem is not maybe in those ajaxs. User wants to move to another webpage through load when click on menu icon.
$('.main_body').find('.container').load(url);
This dont works until those ajax finish. So not complete browser freezes only I cannot navigate to next page.
Common, Ajax is indeed async but You should remember that a success handler is called only when the ajax call is complete whether sync or async So this inner ajax call can be called only when the first is complete. There is no way you can access inner ajax call without first being completed. All you can do is make an ajax call via callback on the success handler of the outer ajax.
This is not an exact answer to your problem but only a help/checklist :
The most common causes of the UI freezing on making an ajax call when the call is async:true are as follows:
A lot of Dom manipulation taking place on response of the call.
A lot of data is being sent by the server and processing it requires time.
If a session is being maintained and it is not closed before multiple ajax callbacks (this happens to avoid race conditions).
Something on the server side goes wrong/extremely slow on the ajax call and the client side is stuck.
Network speed is too slow.
EDIT: Based on the response from asker , to help others if they face similar issue.
Is there a redirection involved which is locking up with ajax response.
It is highly unlikely that the UI freezes despite all the check points mentioned above taken care of.
In any case the solution might be one of the following approaches :
Try making a call to the second ajax after a timeout of like 5000 ms.
Try promises : how does jquery's promise method really work?
(worst way)Try using an iframe to make the requests.
try to use promise.
$.ajax({
url: 'route_process.php',
cache: false,
async: true,
type: 'post',
data: {type: document.getElementById('type').value},
dataType: 'html'
}).promise().then(function(data) {
data = data.split("brk");
$('.spinner').css({'display':'none'});
$('#save_button').prop("disabled",false);
$.ajax({
url: 'sent_hike_drive_notification.php',
cache: false,
type: 'post',
async: true,
data: {type: data[1], insert_id: data[2], date_search_array: data[3], from_city_lat: data[4], from_city_lng: data[5], to_city_lat: data[6], to_city_lng: data[7], counter: data[8], insert_id2: data[9], date_search_array2:data[10]},
dataType: 'html',
success: function(result) {
}
});
Drive.resetRoute();
alert(data[0]);
})
I have a basic ajax call to parse a json file. I need to make sure I am not hitting the feed every time someone visits the page. How would I go about adding some sort of cache so the feed only get's requested say every say 2 hours?
$(function () {
$.ajax({
type: "GET",
dataType: "json",
url: "my.json",
success: function (data) {
// do something with the data
}
});
May be you can use cookie store your time and check every time to know 2 hours time gap then you can call your function get the latest feed.
By default, is should get cached. You can set the option explicitly as shown below.
$(function () {
$.ajax({
type: "GET",
cache: true,
dataType: "json",
url: "my.json",
success: function (data) {
// do something with the data
}
});
You can also use the below statement for all ajax calls on the page.
$.ajaxSetup({cache: true});
I have 3 $.ajax requests in a page that gets JSON content from the server and fills up three separate divs. The content in these three divs is pretty large so it takes a while to load all the content. Also these ajax calls are called on page load, so something like:
$(document).ready(function () {
$.ajax({
type: 'POST',
url: "/controller/action",
dataType: 'json',
traditional: true,
async: false,
success: function (data) {
//fill content in div 1
}
});
$.ajax({
type: 'POST',
url: "/controller/action2",
dataType: 'json',
traditional: true,
async: false,
success: function (data) {
//fill content in div 2
}
});
$.ajax({
type: 'POST',
url: "/controller/action3",
dataType: 'json',
traditional: true,
async: false,
success: function (data) {
//fill content in div 3
}
});
});
My big questions are:
How can I make the page load first (and elements such as links functional)
After that load these three ajax scripts at the same time. So instead of calling ajax1, ajax2, ajax3; it calls them all at the same time simultaneously.
Thanks a lot!
Clockwork
The page will load before the ajax calls are fired.
If you set async to true, they will all fire at the same time.
The page will load first, your function will be executed once it's ready.
To make the GUI responding and to do the ajax requests simultaneously, remove the async:false option.
You can move this code to $(document).load( .... ).
And the 3 calls will started at the same time. Their finish time is not guaranteed.
Hi all;
var v_name = null;
$.ajax({
type: "GET",
url: "Testpage.aspx",
data: "name=test",
dataType: "html",
success: function(mydata) {
$.data(document.body, 'v_name', mydata);
}
});
v_name = $.data(document.body, 'OutputGrid');
alert(v_name);
first alert undefined before alert work why ?
In addition to the other answers, also keep in mind that by default .ajax GET requests are cached, so depending on your browser, it may look like all of your requests are returning the same response. Workarounds include (but are not limited to): using POST instead of GET, adding a random querystring to your url for each request, or adding 'cache: false' to either your ajax call or to the global ajaxSetup.
To make it work, you have to place the alert() in the success function:
$.ajax({
type: "GET",
url: "Testpage.aspx",
data: "name=test",
dataType: "html",
success: function(mydata) {
alert(mydata);
}
});
AJAX calls are asynchronous, and therefore JavaScript would evaluate alert(v_name); before the server responds to the AJAX call, and therefore before the success function is called.
Your AJAX applications must be designed in such a way to be driven by the AJAX response. Therefore anything you plan to do with mydata should be invoked from the success function. As a rule of the thumb, imagine that the server will take very long (such as 1 minute) to respond to the AJAX request. Your program logic should work around this concept of asynchrony.
$.ajax({
type: "GET",
url: "Testpage.aspx",
data: "name=test",
dataType: "html",
success: function(mydata) {
alert(mydata);
}
});