CODEWITHSUNDEEP
javascriptjqueryajax
eComEvo
eComEvo

Reputation: 12549

How to execute code after ALL AJAX loaded elements and code have fully loaded?

I am developing a widget that dynamically loads bits and pieces of HTML & JS code & files on-demand as the user interacts with the widget.

I am running into a problem with some code/files not loading fully before the next piece of code that depends on it executes. This causes missing buttons in jQuery dialogs and HTML code blocks that never get shown because the JS that shows them executes before its ready.

I've tried both of the following jQuery methods but neither works consistently:

$("#dynamic1, script[name$='/forms.js']").ready(function () {/* my code*/});
$("#dynamic1, script[name$='/forms.js']").load(function () {/* my code*/});

I need to make sure that ALL items the code is dependent on are loaded the "my code" block is execute and it needs to be executed only once.

Any ideas what I'm doing wrong here?

Upvotes: 2

Views: 467

Answers (1)

pizzarob
pizzarob

Reputation: 12029

$.when(

  // one or multiple ajax requests 

).then(function() {

  // After the ajax request is done

});

Upvotes: 1

Related Questions