Cascading dropdowns

[tomouse]

I have 3 dropdownlists. They list Country, City and Hotel, populated from a SQL database. The user selects a country and this filters the cities, they choose a city and it filters the hotels. Up until now I've been using server side code (VB.NET) to take the country code from the country dropdown, plug that into a lookup for the cities and then repopulate the city dropdown accordingly. Likewise, when the user selects a city, the server takes the city code and uses this to filter the Hotels (this is called cascading dropdowns right?).

However, all these trips to the server are making things very slow. When the user selects a country, there is a delay of around 3 seconds before the cities are updated. Is it possible to do this on the clientside using Javascript to speed things up? Maybe all the data for countries, cities and hotels is first sent to the client, then the filtering can be done client side? If anyone could point me in the right direction this would be great. I have spent quite a while searching for examples, but none of them seem to do what I want. The end point is that I need to save the code of the hotel that the user selects...

 

[vacunita]

You could just take all the countries, cities, and hotels and dump them into JSON arrays so they can be used by Javascript.

This of course would mean your pages wold have a boat load of entries from your DB that may never get used. While this may speed up the dropdowns no doubt, depending on how much data there is in your tables it may significantly hamper the general web age loading.

You could do something in between, which is usually what is done these days for this kind of thing.

You use ajax to to query the server without actually having to reload the page. Basically what this does is it calls a server side script and harvests the results from it, and then you can do whatever you want with them. This is typically faster than submitting the page and waiting for it to return. You can send parameters to your server side script so it can decide what to do, and what results to return.

You have to build your script server side first to query your DB for the relevant results, and output them in some usable format, like a json array, which then gets sent back to your javascript code to be used.

http://www.w3schools.com/Ajax/ajax_example.asp

forum1600








----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[tomouse]

Thanks a lot Phil, I'll take a look, cheers,

Tom