I am currently skinning an application where I have no access to the markup or scripts apart from one CSS file and on JS file so I can add my own styles and functions. Not an ideal set-up I know but believe me it's not my choice. Oh and all the content on this site is generated via AJAX requests, nice.

Anyway, the problem is that I have a lot of Javascript that needs to run on $(document).ready(); but as the page never really reloads (due to the AJAX), none of the code gets executed.

Is there a way I can set all the functions in $(document).ready(); to run everytime the AJAX call has been pleted?

I've included the built in AJAX call (that I cannot edit) below.

$.ajax({
  type: "POST",
  dataType: "html",
  url: url1,
  data: pars,
  success: function(data)
  {
    $('#thisContent').html(data);
    loadMenu(urlToLoad);
  } 
});

I am currently skinning an application where I have no access to the markup or scripts apart from one CSS file and on JS file so I can add my own styles and functions. Not an ideal set-up I know but believe me it's not my choice. Oh and all the content on this site is generated via AJAX requests, nice.

Anyway, the problem is that I have a lot of Javascript that needs to run on $(document).ready(); but as the page never really reloads (due to the AJAX), none of the code gets executed.

Is there a way I can set all the functions in $(document).ready(); to run everytime the AJAX call has been pleted?

I've included the built in AJAX call (that I cannot edit) below.

$.ajax({
  type: "POST",
  dataType: "html",
  url: url1,
  data: pars,
  success: function(data)
  {
    $('#thisContent').html(data);
    loadMenu(urlToLoad);
  } 
});

• javascript
• ajax
• jquery

• 1 You could call the $(document).ready() handler at the end of the success handler. – user1726343 Commented Oct 11, 2012 at 11:05

3 Answers 3

Yes, you can add a handler for .ajaxComplete(). It is called after every ajax call is finished (either successfully or with error).

Further reading: Ajax Events

If what you want is for the handler of the $(document).ready([handler]) event to be called again you could just use a named function as handler, and reference that:

$(document).ready(function readyHandler()
{
});
//and:
$.ajax({....,success:readyHandler});

But, personally, I'd remend you to think about this. If, for example, the $.ajax call is made in the readyHandler function, you're going to create a deadlock. You're also quite likely to make the same binds over and over again. I don't know what you're trying to achieve but I'm pretty sure that there's a better way to do it. (If indeed I understood your question correctly)

I think this can be useful for you.