jQuery document ready after ajax request

Question

I'm having problems with updating elements that are not ready after an ajax request.

If I run my myFunction() function on page load like so:

$(function() {
 myFunction();
}

I have no problems at all. But if I then use something like

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

which returns $(".myElement").replaceWith("htmlHere"). The elements are simply not ready when the complete event fires. If I set a delay in there it works fine again.

Is there any other event that gets fired other than 'complete' when the DOM is ready?

Update:

Here's 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
}

The missing ); was just a typo on my part.

Ive tried using success now instead of complete and it doesn't appear to make any difference.

Answer 1

I have set up a jsfiddle based on your code, and it seems to be working.

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 span tag with a paragraph. Please check it and compare with your code. If it is the same, then your problem somewhere other than this function (maybe in myFunction?).

Answer 2

You can use $(document).ready(function() { ... }); to wrap up anything you want fired when the DOM has loaded. Your ajax request could be placed inside the document.ready if you want this to wait until the dom has loaded.

If you want to wait until the ajax has loaded its resource then you should use ajax.success rather than complete.