How to get javascript to run after AJAX calls

Question

Okay, a little preface: I am still a beginner when it comes to AJAX, and dynamic web stuff. My problem is similar to what was asked in the following, but I think that discussion is using a framework, and I am not.

Potentially related post

Here is my scenario:

I have several select elements in a form. The initial select's option elements are populated each time the page loads. The option elements for the subsequent selects get populated depending on what the user selects in the previous select. So it is like a chain. The options in the selects are populated by making AJAX function calls (just my own javascript) that in turn call a php file to get values from a database and build a responseText to fill each subsequent select based on the selection made in the previous select. Hopefully that is clear? All that works fine and dandy.

My problem starts here:

When the user submits the form, a php file is run to process the data, displaying success or any issues, and then I return the user to the form page. I want to reselect all the options they had selected prior to submitting, since some of this is a repetative task and this would save them time. My first step is to recall the required AJAX functions to repopulate the select elements, and then I thought I could run javascript in the form page to select the previously selected options. However, when I try to run javascript on the form page to select the options, it is running before the AJAX calls finish. Therefore, because the options are populated by the AJAX calls, the options do not exist yet in the selects, so I cannot select them. I tried writing some test code to insert a new option to see when the code runs, and sure enough, that new option gets added to the select before my AJAX populated ones go in. In order to track if options were selected, I am passing back the selection option values through the URL, and then processing the $_GET array in my form page.

So my question boils down to:

Is there something I could do that would prevent my javascript that selects the selected options from running until the AJAX populating functions finish?

I would also accept responses like "Your whole approach is bogus! Where did you get your AJAX coding license??!! A Cracker Jack box??" Although, just a few of those responses please, I'm a fragile flower ;)

Thanks in advance, Carvell Fenton

P.S. Hopefully that's not too much preamble, but I thought the background was necessary.

Answer 1

It would help if you show us your code.

Are you making the AJAX call synchronously? That is one way to do it, but that will stop execution of any subsequent code until the call completes.

Another (and the more correct, I think) way is to make the call asynchronously, and put the code you want to execute after in the onComplete handler.

Answer 2

http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback <-- Take a look at the callbacks with jQuery

Also look at the Start \ Stop http://docs.jquery.com/Ajax/ajaxStart#callback and http://docs.jquery.com/Ajax/ajaxStop#callback - you can execute javascript to do anything you require....

Answer 3

How many levels deep are the chained selects? I'm doing this with only 2 levels (1 ajax driven select) and for the second page load I would add some code to my jquery document ready function that would initiate the ajax call to load the select list but also send it the id of the field I wanted selected so when the ajax call completes it will have loaded my select and also set it's necessary value.

Answer 4

Use the onreadystatechange event listener.

Answer 5

Thanks for all the answers! Once again the Stackoverflow folks have enlightened me. Based on the comments, I think I have several options:

(1) I can avoid a framework and just pass more information to be processed in the onreadystatechange event listener (I think this is what Jeremy Stein was suggesting, even though my comment confused the issue). In this case, when I am dynamically adding the option elements to the select, I would just set one of them to selected. In that case I have to pass the selected option (via URL I guess) to the php file, then have the php file include that in the built responseText so I know which option to set as selected in the onreadystatechange listener.

(2) I can use an AJAX call to wrap the form post and never leave the form page (as Mikeb suggested).

(3) I can add in a framework that does the work for me (CRasco, Ben Hall, OrbMan).

I have spent the last few hours trying to understand the pros and cons of jQuery, Prototype, and MooTools to see which is easier for me to implement and best suits my needs. I have been successful in getting a very basic form page behaving close to what I want with jQuery. It carries out the process and never leaves the form page, so it is options 2 and 3 together I think. Now I just have to figure out a bit more about how the $.ajax call actually works and where I can get the responseText from if I need it. I can look that up though :)

So thanks again all.

What are you supposed to do on here when more than one answer pointed you in the right direction?