Jump to content

Populating and selecting a list with ajax


rauzer
 Share

Recommended Posts

On a form there are 2 select lists. One is dependant of the value of the other. Let's say: car brand and model. If you choose a brand in the first list, the appropriate list of models for that particular brand is retrieved from the server and the second list is populated.After populating the list a seletedIndex must be set. This is where it all goes wrong. Here is some relevant coding:

   function loadModel(iBrandNr)   {	  var srcRequest = new XMLHttpRequest();	  var sGet = '../lib/handleModel.php?brand_nr='+iBrandNr;	  srcRequest.open('GET', sGet,false);	  srcRequest.send(null);	  replaceList('selModel',srcRequest.responseText);	  if (arguments.length==2)	  {//		 alert('A second value is given. We know the model: '+arguments[1]);		 document.getElementById('selModel').selectedIndex = getValueIndex('selModel',arguments[1]);	  }   }

If the function is supplied a second argument, the selectedIndex is looked up using the getValueIndex() function and set. However, if an alert is fired before (commented out in the above function) the appropriate value does get set. Is the browser not ready poulating the list, so the value cannot be looked up yet? If so, howcome the selectedIndex code is excuted? I really wouldn't like to work with a timer that sets the value half a second or so after the list is populated!If I understood what's going wrong I could find a solution. (BTW: working on IE5.5 -> company browser, in the near future upgraded to IE6).Anyone?

Link to comment
Share on other sites

Well, first of all, document.getElementById('selModel').selectedIndex = getValueIndex('selModel',arguments[1]);What are you trying to do with this? Set the select box's selected index? I thought you were trying to change the value of it... :S

Link to comment
Share on other sites

Sorry that I have not made myself clear.Once the brand and the model are selected, they are saved in a database. Later on the customer retrieves his record, so I have to set the original values.The brand list is set, then the models of that brand are retrieved. Next I have to make the specific model the "current value" so that it appears "selected" in the list.Currently I have tho following work-around:

setTimeout("document.getElementById ... etc ... ", 150);

This works but I have no clue as to what a reasonable value is (150 currently works). Perhaps on a slow connection the current value would be not enough? Problem: I just do not understand why the browser won't set/apply the index as current.I have some positive results in Firefox without the setTimeout() but I can only use that because it has such fantastic debugging module in Venkman. In the company, FF is not on the list of user available browsers. Apart from that, I want it to work in as many browsers as possible.Thanks in advance for any input.

Link to comment
Share on other sites

Sorry for the delay. The function returns an integer. This is the actual code:

   function getValueIndex(sListbox,sValue)   {	  var obj = document.getElementById(sListbox);	  for ( var r=0;r<obj.length;r++ )	  {		 if (obj.options[r].value == sValue) return r;	  }	  return false;   };

This works after the setTimeout. Do you think there's anything wrong with it?

Link to comment
Share on other sites

It seems perfectly fine, except for the fact that it's returning a number 1 more than what you need...for example, the first option would be 0 in an array, and the second option would be 1, so you'd have to put this instead of what you have: for ( var r=0;r<obj.length-1;r++ )At least I think :)But the function itself seems fine...hmm...Where is the page that you're testing this on?

Link to comment
Share on other sites

for ( var r=0;r<obj.length-1;r++ )
You're absolutely right! How could that have slipped me? Unfortunately, the looked-up value is always there, so is not an out-of-bounds problem. I'll correct that immediately, thanks.Now for an example ... These are restricted pages and are not about cars (as you probably guessed). From the given code and your experience, is this a known problem? Have you ever dealt with it? Do you have working code? I.e.: retrieving a list with Ajax and immediately setting the selectedIndex?If it would help I can try to set something up but I know thios would bring a lot of extra work ...
Link to comment
Share on other sites

Hey Chocolate570,It looks like you have solved all my Ajax problems. I ran through all of my code for this project (over 80 pages/scripts) and found several for-loops that missed the "-1". To think I have struggled with ths code for several weeks and just one bright eye needed to get me on the right track. You should see me smiling at all the pages working smooth together as expected. Super!I reallly owe you one!Many thanks!

Link to comment
Share on other sites

Hey Chocolate570,I was totally wrong. I think I had not slept enough last night. The for loops continue for as long as index is smaller than length. So it stops as soon as index=length. All array elements are properly processed.The confusion comes from the fact that I changed two options (the "length-1" and another). The latter changed my results so that several pieces displayed correctly. However, the "model" list now defaults to the first option even though another model was previously stored in the database. Sorry for the confusion. Fortunately, I could restore my scripts from csv.So the problem is still there. The setTimeout is back and doing his job. I changed the value from 150ms to 10ms and the models show up correct.Sorry for this confusion.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...