AJAX/DOM problem

[Kor]

I use AJAX to populate sequentially some list boxex onchange (onchange first list will request data then will populate the second list, onchange the second list will populate the third list, and so on...)

It works, but I need also to do the same in a single process onload, and here it comes the problem:

the operations sequence is:

I have the list of selectedIndexes for all the lists via a php aplication

onload = function(){

- get the list 1 selectedIndex (previousely php generated)
- set the selected option
- send a request based on the selectedIndex
- get the responseText string separated by a separator, split the string
- use DOM to create the list 2 options
------------
- get the list 2 selectedIndex (previousely php generated)
- set the selected option
- send a request based on the selectedIndex
- get the responseText string separated by a separator, split the string
- use DOM to create the list 3 options

----------
}

The problem is that it does not work at all, unless I insert some alerts here and there, for instance after the DOM appends the set of options for each list.

When I hold the code with alerts, it works OK. When I remove the alerts, it does not work at all. I tried some setTimeout(), but with no succes.

Does anyone of you had the same problem? I can not set a single request, as I don't know, on each step, which will be the response content of the next step (the request is made to a DB, via a php file)

[Ultimater]

Unless you can simplify, I suspect the alert is needed as a delay between setting the dropdown list options and the next request that reads it.
Last time this happened to me, I think I was trying to reference an element created via innerHTML too early. It's possible even the DOM might encounter the same problem when trying to import nodes from XML.

Try to isolate some more and see if you can verify this.

[sridhar_423]

I guess it'll work if its implemented in the following way
SelectedIndex for the list intially would be 0. (Like "<--Select an Option-->" option)
Set the index(Capture the index as a separate field .. added token in the responseText) after some timeout so that onchange event defined on that will be invoked definetely as the index changes from 0 to some index Index generated by PHP.

[slaughters]

For this example the problem may be the ASYNCH ability in AJAX.

Try it in SYNCH mode.

[Ultimater]

For this example the problem may be the ASYNCH ability in AJAX.

Try it in SYNCH mode.
Sjax is the worst alternative unless you want to freeze the user's browser for the time it takes to finish the request. The fact that most ppl haven't even heard the term Sjax before and only Ajax already tells you something about synchronous requests. If you really wanna freeze their browser, just put a load of synchronous requests in a loop.

[slaughters]

...The fact that most ppl haven't even heard the term Sjax before ....Yes, and you a talking to one right now. :) Synch or Asynch requests are a basic part of the setting up the XMLHttpRequest object.

It looked to me like Kor's problem was that request for list 2 and list 1 items were being mixed up. How would you guarantee that list 2 did not complete before list 1?

P.S.

In the case of multiple requests after two requests you are working in a kind-of-synch-mode anyway. Only two asynchs seem to be allowed at a time. Any additional requests wait for an open slot before executing.

[Kor]

I decided to try the variants;
1. - use a multiple request (which will make my php programmer unhappy, as he must rethink it's application)
2. - use a different javascript function and a different php file - as by now I tried to use the same one used for onchange event (which will make... as above... :D )
3. - use a synchronous requests (that means in fact to use the 2. variant which will make ... as the above's above :D )
4. - forget about it and tell the client that it does not worth (which will make the client unhappy, but my php programmer will be happy... I don't know which of them worths :D )

Thank u all for your thoughts, there were very useful for me, indeed !

[ProggerPete]

What overlap is there between the 2 requests? Do either of them work on their own?

If request 2 is dependant on request 1 you not send the second request once you have received the data you need from the 1st.

You might also want to have a look at my AJAX script (http://dynamic-tools.net/toolbox/ajax/). It should simplify your code a lot.

[Kor]

Yes, for the second request I need data received from the first. based on these data I build a list box, a select an option (the selectedIndex is a varaible already present on the page as a php variable), get the value of the selected option, give e new request based on this value, and so on. The problem seemed to be the fact that the second request fires too quickly, so that the DOM process looked to nave been not finished the moment the second request is done.

Till the end I solved this way: Since I have the posibility to have directly all the values I nedd from the begining (as php variables) I sent a single request, then the responseText (a string) is separated with another separator, and will have all the values I need to populate all the list boxes.

The basic ideea is:
I have a simple search page, with 3 list boxes. List 2 and 3 are dynamically populated via AJAX, acording to the selected option of the 1 and 2, respectively. This works fine. But I have an "Advance search" button which opens another page with other lists and inputs added. Now the client wants me to keep the previous selected actions from the first page, and when opening the second page, those 3 list boxes must be the same way as in the first. This is why I need a multiple request onload.

[ProggerPete]

I'd be thinking along the lines of

function init()
{
populateAndSelectList2(selectedItem1, selectedItem2, selectedItem3);
}

window.onload = init;

function populateAndSelectList2(selectedItem1, selectedItem2, selectedItem3)
{
function responseHandler(ajaxRequest)
{
var respText = ajaxRequest.responseText;

// set the selected Item of select list 2 to selectedItem2

populateAndSelectList3(selectedItem2, selectedItem3)
}

ajaxSend('get', 'url.php', 'item=' + selectedItem, responseHandler);
}

function populateAndSelectList3(selectedItem2, selectedItem3)
{
function responseHandler(ajaxRequest)
{
var respText = ajaxRequest.responseText;

// set the selected Item of select list 3 to selectedItem3
}

ajaxSend('get', 'url.php', 'item=' + selectedItem2, responseHandler);
}

The code above uses my AJAX script, but I'm sure you can adapt the method to whatever AJAX script you are using.

[Kor]

That is exactly what I used first time. It does not work. As I said, somehow the DOM process of creating the elements and append them is slower, so that the moment the second request is made, there is no value to be sent. When inserting an alert between the populate process and the second request, it works. Otherwise, not.

As I said, I solve it by sending a single request and reveive all the data to populate both listboxes instead of sending 2 subsequent requests.

[sridhar_423]

i think this should do the job .. while(true){
try{
if(typeof lastElement != "undefined" && someElement.options.selectedIndex!=0) //or Some condition which will ensure DOM has completed its part
break;
catch(e){}
}

[slaughters]

JavaScript has a try/catch ?

You learn something new everyday.

[Kor]

that is an interesting ideea, thanx, I'll try it as well.

[Kor]

yes, javascript has try/catch statement as well:
http://www.w3schools.com/js/js_try_catch.asp