Develop Reference

How to load function after ajax load all DOM elements

I have an issue with a function that should be loaded after all content is ready.
I have a massive ajax call 1700 line of code.
How my code works: php file getting data from 3 tables in my database and converting it to JSON. I opening the JSON file and creating 1 element for 1 database result.
For now, I have around 100 results but I will have around 1000 in the final step. So I create loading to put before the page will be loaded. But because the main content is created by js, sometimes my loading fade out 1-2 sec before content is loaded. I can use js or jquery. For now, I used something like that :
$(window).on ('load', function (){
setTimeout(function (){
$("#loading").fadeOut('slow');}, 1000)});

Execute the function once you received data through AJAX. Check the code snippet below
$.ajax({
url: '/URL/TO/CODE',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') //This is optional if you are using x-csrf-token validation of if u want to pass any header data
},
type: "post",
data: {
data:data //In case if you need to pass any data
},
dataType: 'json',
cache: false,
before:function(){
//Is you want to show any loader or anything while ajax is being executed.
},
success: function (response) {
//Once your ajax is success you can call your custom function to do things with the data
myCustomFunction();
},
error: function (res) {
console.log(res);
}
});
function myCustomFunction(){
//This to be executed when all data are filled by ajax and page is loaded
}
Hope this helps.

$(window).ready(function (){
setTimeout(function(){ $("#loading").fadeOut('slow'); }, 3000);
});

multiple ajax calls not working asynchronously (slow TTFB)

I've some simple ajax calls to populate drop down lists:
window.addEventListener('load', function () { GetDropDownData('http://mysite/controller/action/parameters1', '#ddl1') });
..
window.addEventListener('load', function () { GetDropDownData('http://mysite/controller/action/parameters4', '#ddl4') });
$.ajax({
url: url,
cache: true,
crossDomain : true,
dataType: 'jsonp',
type: "GET",
success: function (data) {
$(id).html(data);
},
error: function (reponse) {
$(id).html("error : " + reponse.responseText);
}
});
if I use them individually are fast, but used together are slow. This is evident in the images below.
The first time I use 1 call and it is fast, the second time I use 2 calls and the previous becomes slow now. The same with multiple calls.
Why this? And, can I solve it avoiding to merge the calls in a single call?

Session locking? One call comes in, locks the session, the second has to wait for the first to finish
Try switching session off and see if it improves
(I had the same problem once)
NB This answer only applies if the calls are asynchronous (as per the other comment)
http://johnculviner.com/asp-net-concurrent-ajax-requests-and-session-state-blocking/

$.ajax, complete function (no more data to get)

Im new to .ajax and so far so good. But I've run into an issue of, I want to run a function once I've used up all the data.
For example I have the following, i run it on 'click':
$.ajax({
url: "url.modal.tothegoods" + (nextPage),
success: function (data) {
//keeps appending data on click
},
error: function () {
alert('balls');
}
})
I've tried the ajaxcomplete function but it runs everytime i load data onto the screen.
It runs everytime i appened data .ajaxcomplete runs. I guess the questions is, how do I run a function once I have no more data to consume. So I am truly done
any tips/tricks would be greatly appreciated

The response depends on which is currently the behaviour of your server part.
If you have hand on it, the most simple solution is that it returns nothing when there is no more data to send. So you may do something as simple as this:
$.ajax({
url: "url.modal.tothegoods" + (nextPage),
success: function (data) {
if (!!data) {
//keeps appending data on click
}
},
error: function () {
alert('balls');
}
})

Why is my jquery ajax not working on my page and page is also refreshing

I am new in the area of jQuery/Ajax and my little test function doesn't work. And my page is also refreshingcan any one help me
<script type="text/javascript" >
$(document).ready(function() {
$("#ser_itm").change(function() {
var id=$(this).val();
var dataString = 'id='+ id;
alert(dataString);
$.ajax({
type: "POST",
url: "bar_pull.php",
data: dataString,
cache: false,
success: function(html) {
$("#tbl").html(html);
}
});
});
});

Pass the function, not the result of the function call:
$('.linkDetails').on('click', getDetailsFromServer);
Apply the same to your AJAX success callback:
success: postToPage
Also, the getDetailsFromServer() function needs to be defined before you bind it to an event. Move the function declaration before your .on('click', ...) call.

So I'm going to try and explain these points more clearly:
You cannot access C:\Users\yah\Desktop\text.txt. This is a server side path, your javascript runs on the client side. So this needs to be a path you can browse to in your browser, something like /pathinURL/text.txt. How you do this is dependant on your hosting technology, etc.
Your call backs are also wrong,
$('.linkDetails').on('click', getDetailsFromServer());
&
success: postToPage()
these will execute the function when they are hit, (well it actually binds the function result) not when the event happens. To make these work you need to remove the braces:
$('.linkDetails').on('click', getDetailsFromServer);
&
success: postToPage
this then hooks up the actual functions as function pointers and thus the actual functions will be fired when you want them to be.
so your final code will look like:
$('.linkDetails').on('click', getDetailsFromServer);
function getDetailsFromServer() {
$.ajax({
type: 'GET',
url: '/someURL/text.txt',
success: postToPage
});
}
function postToPage(data) {
$('.textDetails').text(data);
console.log(data);
}

what Arun P Johny said is right! but your code has another probloem
$('.linkDetails').on('click', getDetailsFromServer);
try above

The same origin policy implemented by browsers prevents local file system urls... if the page and the files are in same folders it might work.
See SOP for file URI for FF

ajaxStop() doesn't fire

This is the code that wasn't working:
$(document).ajaxStop(function() {
$(this).unbind("ajaxStop"); //prevent running again when other calls finish
// Display everything
display();
});
And here's my Ajax function:
function getAjax(url, callback) {
jQuery.ajaxPrefilter(function( options ) {
options.global = true;
});
$.ajax({
url: url,
type: "GET",
dataType: "jsonp",
success: callback
});
}
Why does ajaxStop() never fire?

You'll notice I was making JSONP requests. It took me forever to find this, but the answer to this issue can be found here.
From the ticket:
JSONP requests are not guaranteed to complete (because errors are not
caught). jQuery 1.5 forces the global option to false in that case so
that the internal ajax request counter is guaranteed to get back to
zero at one point or another.
If you want all requests to fire the events, no matter what (and at the risk of the same inconsistencies 1.4.4 exhibited), you can use the following prefilter:
jQuery.ajaxPrefilter(function( options ) {
options.global = true;
});
Case in point: http://jsfiddle.net/X4JTx/