How to call a function when all elements (called by ajax) have been loaded?

50
September 03, 2019, at 8:40 PM

I want to call a function when all the elements in the div called by ajax are loaded. Jquery:

$('#load-div').load('ex-page.php');
$('#load-div').ready(function(){
     alert('loaded');   
});

I also tried other ways like: load (), on('load'), $elems = $('#main').find('img'),... But it does not work or not exactly ( The function is called when the main document has been loaded, when img or background of some div is loading,...).

Answer 1

See https://api.jquery.com/load/

You can pass a second parameter to load() which is a function being called when the resource has been loaded :

$('#load-div').load('ex-page.php', function(){
  alert('loaded');   
});

Edited for below comment :

$(function() { // when document is ready
  $('#load-div').load('ex-page.php', function(){ // do the ajax call and alert when it's loaded
      alert('loaded');   
  });
});
READ ALSO
Html scripts in react with div id not working

Html scripts in react with div id not working

I'm actually working on a React project with voip business and there's a tool that I need to include on my Main component, but that tool is made for html pages

42
Why Javascript event running multiple times per click?

Why Javascript event running multiple times per click?

I wrote a js-class which handles the Ajax-calls when a user clicks on a buttonSo the user can simply click on open/close and can open/close a entity in my database

56
Jquery slider get ui.value on handle click event

Jquery slider get ui.value on handle click event

I have a jquery slider covering a range of 0 to 4 and populating a read only text box with the uivalue on the slide event as is usual usage

39