JQuery doc ready after ajax request

Question

I am having problems updating elements that are not ready after an ajax request.

If I run the myFunction() function when the page loads like this:

 $(function() { myFunction(); } 

I do not have any problems. But if I then use something like

 $.ajax({ url: this.href, dataType: "script", complete: function(xhr, status) { myFunction(); } }); 

which returns $(".myElement").replaceWith("htmlHere") . Elements are simply not ready when the full event fires. If I set the delay there, it works fine again.

Is there another event that fires differently than is "completed" when the DOM is ready?

Update:

Here is the actual code:

 $(function() { $("a.remote").live("click", function(e) { $.ajax({ url: this.href, dataType: "script", success: function(xhr, status) { myFunction(); } }); e.preventDefault(); return false; }); myFunction(); }); function myFunction() { // Modify the dom in here } 

Is absent); was just a typo on my part.

Ive tried to use success now instead of complete, and it does not seem to make any difference.

Answer 1

You can use $(document).ready(function() { ... }); to complete everything you want when the DOM boots up. Your ajax request can be placed inside document.ready if you want this to wait for dom to load.

If you want to wait for ajax to load its resource, you should use ajax.success , not complete .

Answer 2

Just change complete: to success: in your call to $.ajax() :

 $.ajax({ url: this.href, dataType: "script", success: function(xhr, status) { //make your DOM changes here myFunction(); } }); 

The success function will work as soon as the AJAX request receives a successful response. So make DOM changes to this function and then run myFunction() .

Edit
It seems you are trying to make DOM changes using myFunction() . But if you do not first embed the HTML received in the AJAX response in the DOM, then nothing will change for myFunction() . If this is really what is happening, then you have two options:

• Paste the HTML response into the DOM, then call myFunction() (and all this should happen in the success callback function).
• Pass the AJAX response to myFunction() as an argument, so that myFunction() can handle the DOM insert and then do the necessary modification.

Answer 3

I installed jsfiddle based on your code and it seems to work.

This is the current code:

  $(function() { $("a.remote").live("click", function(e) { $.ajax({ url: this.href, dataType: "script", success: function(xhr, status) { myFunction(); } }); e.preventDefault(); return false; }); }); function myFunction() { $("span").replaceWith("<p>test</p>"); } 

And it replaces the span tag with a paragraph. Please check it and compare with the code. If this is the same, then your problem is somewhere other than this function (maybe in myFunction?).

Answer 4

You are missing the closing parenthesis for the finished document wrapper.

 $(function() { myFunction(); }); 

Pay attention to }); in the end.

Answer 5

There is an event that fires after every ajax call. It is called ajaxComplete .

 $( document ).ajaxComplete(function() { $( ".log" ).text( "Triggered ajaxComplete handler." ); }); 

So you can

 function Init(){ // stuff here } $(document).ready(function() Init(); }); $(document).ajaxComplete(function() Init(); }); 

Answer 6

 $(function() { myFunction(); } 

it should be

 $(document).ready(function() { myFunction(); }); 

Or do you want ajax to start on boot. At

 $(document).ready(function() { $.ajax(); });