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