CODEWITHSUNDEEP
javascriptajaxjquery
Danny
Danny

Reputation: 141

jQuery document ready after ajax request

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.

Upvotes: 6

Views: 34298

Answers (6)

fotanus
fotanus

Reputation: 20116

There is a event that triggers 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();
});

Upvotes: 3

Goran Obradovic
Goran Obradovic

Reputation: 9051

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?).

Upvotes: 6

maxedison
maxedison

Reputation: 17553

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

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

The success function will run once the AJAX request receives a successful response. So make your DOM changes within that function, and then run myFunction().

Edit
You seem to be trying to make the DOM changes using your myFunction(). But if you don't first insert the HTML received in the AJAX response into the DOM, then there will be nothing for myFunction() to modify. If this is indeed what's happening, then you have two options:

  1. Insert the response HTML into the DOM, then call myFunction() (and all of this should happen within the success callback function).
  2. Pass the AJAX response to myFunction() as an argument, so that myFunction() can handle the DOM insertion and then do the necessary modification.

Upvotes: 3

Greg
Greg

Reputation: 21909

You are missing the closing parenthesis of the document ready wrapper function.

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

Note the }); at the end.

Upvotes: 1

Timbo
Timbo

Reputation: 4533

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.

Upvotes: 4

Dave Siegel
Dave Siegel

Reputation: 203

$(function() {
 myFunction();
}

should be

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

Or incase you want the ajax to run on load. Do

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

Upvotes: 0

Related Questions