JQuery $ (document) .ready ajax load

Question

I looked at quite a few related questions, and I have to ask about it in a completely different way, since I saw only a few that seemed to be touching on each other. I load the entire middle div on a jQuery Ajax call, and I just want to be able to do some automatic jQuery in this new area, such as $ (document) .ready allows when the DOM loads. I read that livequery will do this, but I decided that a way would be built into it. I am trying to add a date picker to the input box to the right of the start.

This is the content that will call the content in the backend, which will then pull out a particular 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 placed in this divElement, the jQuery method will be installed, which must be run to change the html inside it.

Answer 1

Register events in the AJAX function callback.

If you use .load() to load the middle div, put your jQuery code directly in the callback:

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

If you use some other AJAX functions, put the 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 these are the events you want to associate, you can look at usage. on() (or. delegate() or .live() if you are using older versions of jQuery that were around when this question was originally written). You can see a comparison of these different methods here .

These methods allow you to bind events to elements, even if they are not already present in the DOM; which means that you can bind events in the $(document).ready() block, even if the elements are not already registered in the DOM.

Answer 2

Craig

I think you are trying to go this route.

Firstly: although you could technically manipulate the response using javascript / jquery before entering them on the page, it will be much easier for you to do this immediately after adding them (according to the finished document).

Secondly: I'm not sure how effective this method is if you added something like datepicker. I assume that you cannot add a datepicker element to the element before everything is on the page (just a hunch). These jQuery UI widgets work a lot in the background.

I suggest you follow Matt's advice.

If you call $ .post, the callback function is the same as the $ (document) .ready function, it will be called as soon as an answer is received, so you can 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 do this. Manipulation will be performed as soon as the data is entered on your page in the same way as $ (document) .ready.

If you think that there is some lag behind what you are doing and you do not want your users to see, then set the display to hide and then disappear or show as soon as the manipulation is done.