Develop Reference

How to call function after ajax content fully loaded like $(window).load() or window.onload?

I'm using ajax but is there any option to call function after ajax content fully loaded like $(window).load() or window.onload? When i'm in fresh page everything working fine with $(window).load() or window.onload function because some scripts work after window complete load. But the problem is in ajax and when i click on a link and page is dynamically load contents from another page so we don't need $(window).load() or window.onload function but because some script only work when window loaded or content fully loaded so how to call function after ajax content fully loaded like $(window).load() or window.onload ?
function windowload() {
//Some functions works only after window load
};
$(function() {
$(window).on('load', windowload);
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
var $this = this.href;
$.ajax({
url: '' + $this + '',
dataType: 'html',
success: function(html) {
var div = $('#style', $(html));
$('#style').html(div);
//call windowload but not working
windowload();
//Also tried this but not working
$('#style').on('load', function(){
windowload();
//Some functions work only after ajax content fully loaded
});
});
});
Edit :
I need a function after ajax content fully loaded not after ajax request complete.

I have been trying to find the solution to this exact same problem for hours. What worked for me was
$(document).ajaxComplete()
I put my code in there and when Ajax was complete and the content of the div fully reloaded, I added the style I wanted to add. Hope this helps someone. Calling the method from ajax success won't work.

If you need to call a single function at multiple points in the pages lifecycle (as you describe above, where the logic is needed on both page load and also when an AJAX request completes), then you can extract the required logic to its own function to be called as needed. Try this:
function htmlLoaded() {
// Some functions work only after window load
}
$(window).load(htmlLoaded); // called on page load
$(function() {
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
$.ajax({
url: this.href,
dataType: 'html',
success: function(html) {
var styleHtml = $(html).find('#style');
$('#style').html(styleHtml);
htmlLoaded(); // called after the AJAX request completes successfully
});
});
});
});
Also note that I made a couple of amendments to improve the logic in your JS code.

Try this:
$("#Style").ready(function(){
console.log('Style is fully loaded.');
windowload();
});
Hope this will help.

When you call a function you must use the () symbol like windowload().
Here is the fixed, well-indented code : (I removed the empty quotes, useless here)
function windowload() {
//Some functions works only after window load
};
$(function() {
$(window).on('load', windowload);
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
var $this = this.href;
$.ajax({
url: $this, // Removed the empty quotes which are useless here
dataType: 'html',
success: function(html) {
var div = $('#style', $(html));
$('#style').html(div.html());
$('#style').ready(windowload);
}
});
});
});
By adding a new script tag which will run the windowload() function, we solve the problem. Because when this script is runned all HTML content placed before this tag has been loaded.

Slide page after page fully loads

I would like to slide my page only after it fully loads.
I use
href="page#a"
and
href="page#b"
however, sections a and b's initial position is not the final position. my page loads charts and data from SPs and it takes a few seconds, making divs a and b go to the lower part of the page. Thanks.

Write your code inside .load()
$( window ).load(function() {
//whatever you write here will get executed when the page is fully loaded
$.ajax({
dataType: 'json',
beforeSend : function() {
console.log('Before Ajax Request Starts !!');
},
success: function(data) {
/*__YOUR CODE GOES HERE
AFTER PAGE LOADS AND AJAX COMPLETES LOADING_
_____code for sliding ______
*/
}
});
});

you can try this one:
$(document).ready(function(){ ... });
or
$(window).load(function(){ ... });

show loading image before the content loads through jquery or ajax

Hello mates just stuck with a problem.
i am using click() and load() function to get my content in a css class
$("#feed").click(function(){
$(".homefeed").load("feedcontainer.php");
$("#elementcontainer").show();
});
$("#news").click(function(){
$(".homefeed").load("n.php");
$("#elementcontainer").show();
});
$("#info").click(function(){
$(".homefeed").load("newinfo.php");
$("#elementcontainer").hide();
});
As you can see when i click a div then i am able to load a php file content in a .homefeed class container and it is working perfectly
all i want to show a loading image..like loading....loading..... before the content loads..
because when i click one of those div then it is loaded into homefeed container perfectly but it is taking some time so i just want to show user some loading image to keep them engaged
any guess how to achieve it now?
thank you.

Try this: $(".homefeed").prepend(response); change to $(".homefeed").html(response)
$("#info").click(function (e) {
$("#loadimg").show();
jQuery.ajax({
type: "POST",
url: "newinfo.php",
dataType:"text",
cache: true,
success:function(response){
$(".homefeed").html(response);
$("#loadimg").hide();
},
});
});

You can use jquery blockUI plugin. jquery blockUI

Use the .beforeSend option in the jQuery AJAX call. Note, that this only works if your AJAX call is asynchronous. If you call it using synchronous, it won't do any animations/queries/callbacks (as jQ is busy blocking everything until your call comes back).
$.ajax({
url: "http://myurl.dot.com.jpeg.image.file.chmtl.php.asp.cfm",
async:false,
cache: false,
beforeSend: function( xhr ) {
// do stuff here to do the 'loading' animation
// (show a dialog, reveal a spinner, etc)
},
done: function(data){
//process response here
}
})
http://api.jquery.com/jquery.ajax/

Two Cases of Ajax loading of Webpage having some contradiction

I am using, Ajax load function in jquery to load another page in DOM.
By using this
$('.upload').on('click',function(){
$('.content').load('loo.php');
});
When i use this the page in division content loads after a 3-4 second Interval.
I wanted to show progress bar using that interval so i used this way
$('.upload').on('click',function(){
$.ajax({
url: 'loo.php',
beforeSend:function(){
res.container.append(res.loader); //Showing loader
},
success:function(){
$('.content').load('loo.php');
res.container.find(res.loader).remove(); //Hiding Loader
}
});
});
So Now what happen is, loader comes and shows for few time and then page in division loads, But the problem is i again see delay in page loading after the loader hides. I created the loader to overcome the time but, still it takes time after the loader goes.
In firebug, by analysing request the page starts loading after the loader , which i don't want.
Any idea, how to overcome this problem.

you are removing the "loader" before the AJAX request is finished. you should remove the loader in a callback function, after the load() is finished. Also no need for double AJAX request.
$('.upload').on('click',function(){
res.container.append(res.loader); //Showing loader
$('.content').load('loo.php', function(){
res.container.find(res.loader).remove(); //Hiding Loader
});
});

load() and ajax() both perform ajax calls, this is probably not what you meant to do. Try this instead:
$('.upload').on('click',function() {
$.ajax({
url: 'loo.php',
beforeSend: function() {
res.container.append(res.loader); //Showing loader
},
success: function(data) {
// add the content to the DOM instead of loading it again
$('.content').html(data);
res.container.find(res.loader).remove(); //Hiding Loader
}
});
});

Display image while running POST

I have this code that I use to POST without reloading the page, but I wonder how I can add that in the script being executed display an image. example loader.gif
Thanks for your help.
<script language="javascript" src="jquery-1.6.4.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#form, #fat, #form').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})

Not sure if I understand, but it seems you're quite near to it
// #loading could be an img tag pointing to loader.gif or a div containing the img
$('#loading').ajaxStart(function() {
$(this).show();
$('#result').hide();
}).ajaxStop(function() {
$(this).hide();
$('#result').fadeIn('slow');
});

Use JQuery to add the image to the page. Generally this is added close by the button the user clicks to start the AJAX request. This allows the user to see that something is happening in the background while your scripts run.
Alternatively, since your script is being run on document.ready, you could have the image from the get-go and then remove it once the ajax call completes.

put the loader in a hidden div (display:none) you can then use
$('#div').show();
before the ajax request and then hide it again in the success callback:
$('#div').hide();

at the first line of submit function:
$('#loadingImg').show();
and at the first line of callback success function:
$('#loadingImg').hide();