Clash Royale CLAN TAG#URR8PPP

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 ?

$(window).load()

window.onload

$(window).load()

window.onload

$(window).load()

window.onload

$(window).load()

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.

.load()

4 Answers
4

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.

window loading

#style

$("#Style").ready()

#style

windowload

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.

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)

()

windowload()

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.

script

windowload()

windowload

$('#style')

$('#style')

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.