JQuery $(document).ready ajax load

Question

I looked at quite a few of the related questions and I must be asking this completely different as I saw only a few that seemed to relate. I am loading an entire middle div via JQuery Ajax call and I simply want to be able to do some automatic JQuery on that new area like $(document).ready allows when a DOM is being loaded. I read that livequery would do this, but I figured there would be a way built into it. I am trying to add a date picker to a input field right a the beginning.

This is the content that will call for the content in the backend which will then pull some specific section.

$.post("ReportingWizard",$("#wizard_form").serialize(), function (data) { setData(data); });

function setData(data) {
divElement.innerHTML = data;
$(activeTab).fadeIn(); //Fade in the active content
$(".wizardBody").fadeIn();
}

Inside the file that is being put at that divElement will have a JQuery method that needs to be run to change the html inside it.

Answer 1

Register the events in the callback of the AJAX function.

If you're using .load() to do load the middle div, place your jQuery code directly in the callback:

$('#middleDiv').load('/fish.php', function () {
    $('#someDiv').fadeIn(300); // ? whatever
});

If you're using some of the other AJAX functions, place your jQuery code after the line where you add the elements to the DOM in the callback:

jQuery.get('/fish.php', function (response) {
    $('#middleDiv').html(response);

    $('#someDiv').fadeIn(300); // ? whatever
});

If it's events you want to bind, you might look at using .delegate() or .live(), which allow the binding of events to elements even when they are not yet present in the DOM; which means you can bind the events (only using .live() or .delegate() in your standard $(document).ready(), even though the elements aren't registered in the DOM yet.

Answer 2

Craig,

I think you are trying to go about this the hard way.

Firstly: Although you technically could manipulate the response with javascript/jquery before you inject them into the page, it's going to be a hell of a lot easier to do this immediately after they have been added (as per a document ready).

Secondly: I'm not sure how effective that method would be if you were adding something like a datepicker. I'm guessing you can't add a datepicker to an element before the whole thing is in the page (just a guess). Those jQuery UI widgets have a lot going on in the background.

I suggest you follow the advice of the Matt.

If you call $.post, the callback function is the same as your $(document).ready function, it will be called as soon as the response is available so you could do something like this:

$.post(url, data, function(response) {
    $("#some_element").append(response);
    // Now your element has been injected you can do whatever u like here
    // call some function etc.
});

This is the best way to go about it. The manipulation will be done as soon as the data has been injected into your page the same as $(document).ready.

If you think there is some lag with what you are doing and you don't want your users to see, then set display to hide and then fade in or show once the manipulation has been done.