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.
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" );
Can I call jquery ajax from a variable like this ?
var save = $.ajax({
type: "POST",
dataType: 'json',
url: "functions/ajaxInsertCheck.php",
data: dataString,
cache: false,
success: function(response){
alert(response.a);
}
// call ajax jquery
save
How can I call that request like its a function? Can anyone help?
You need to use a function. Functions encapsulate behavior we will want to invoke in the future. You can pass functions arguments which indicate how you want the function to execute.
Functions are typically used when we want to have reusable bits in our code or for code clarity:
function save(){ // declare a function and call it save
return $.ajax({ // a return means we're letting people from the outside use it
type: "POST",
dataType: 'json',
url: "functions/ajaxInsertCheck.php",
data: dataString,
cache: false,
success: function(response){
alert(response.a);
}
});
}
Then you can call it from your own code:
save(); // call the save function performing this action.
Note that there are plenty of examples of functions already in your code like alert and $.ajax that were defined by you by the browser and jQuery respectively.
If you mean, can you defer execution of the call as you've written it, then no. The call is executed immediately.
Check out the documentation at http://api.jquery.com/jquery.ajax/ - particularly under the heading "The jqXHR Object". It's different depending on the version of JQuery, but you get back an object that implements the Promise interface.
But using javascript features, you can make a function:
function saveFunction() {
$.ajax({
type: "POST",
dataType: 'json',
url: "functions/ajaxInsertCheck.php",
data: dataString,
cache: false,
success: function(response){
alert(response.a);
}
});
}
saveFunction();
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'm doing and Ajax call to send parameters to one .php file, when the call is done, i want to popup a new window to the results page, but it doesn't work.
here is my ajax code
$.ajax({
type: "POST",
url: "pipeline2.php",
data: formData,
cache: false,
processData: false,
contentType: false,
//async: false,
}).done(function (data) {
$("#resultados_pipeline").append(data);
document.getElementById('Running').style.display = 'none';
window.open("results_page.php?jid="+job_id);
alert(job_id);
});
i first think that maybe the job_id is not set in ajax, but the alert show me the expected...
i also tried with the async: true, and it doesn't work either
Browsers don't allow window.open calls except when involved from a user triggered event.
An Ajax response event is not something triggered by the user, so popups are blocked at that point.
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.