Linked pulldown lists using MySQL, PHP/JavaScript/Ajax/jQuery

Question

I am quite new to web development and have a task to develop a web application that will basically show the user 5-15 pull down lists on one page, where each selection will limit the choices in all other lists. The user should be able to start with any one of the lists (so no set selection order) and when the user have selected something in each list or all parameters are otherwise locked by previous choices the user has to press the GO button and some calculations will take place, presenting a database selection. Basically it is a muliple parameter product selector application.

The relations between the lists are not simple, and could need calculated fields etc, and one list could affect the content of several others. The database behind will be MYSQL, probably a single large table, with perhaps 30 fields and 500-5000 rows. I will be using PHP, JavaScript and perhaps AJAX unless you have a strong reason not to.

I have done some research and found three ways to do this:

1. Send all data to the browser and handle the filtering etc client side with Javascript.

2. Send parameters back to the server after each selection and reload the whole form after each selection. Probably a littebit Javascript and most code in PHP.

3. Use AJAX to change all list content dynamically without reloading the whole form.

Since I am so new to this I have a hard time telling which way to go, what pitfalls there are etc...

I have some conserns:

A. Slow initial loading. Worst for #1?

B. Slow dynamic response. Worst for #2?

C. Complicated programming. Worst for #3?

D. Compatibility issues for different browsers and plattforms. Have no idea of which method is most likely to create problems...better if I use some Framework?

E. Could I even try to make something at least part-working for people with javascript turned off? (like selecting each list on a new page and having to press GO button each time)? (I think I can tell my users they must have Javascript on so no big issue....) Perhaps #2 is best here?

F. I think the specification of "free selection order" means I have to download most of the database initially, so perhaps I should try to avoid that option.....if I keep it I might as well use method #1, or???

G. It would be best to do as much as possible of the selction/filtering in SQL to allow future extensions by building custom SQL code, so that gives a big minus to #1...

H. Other pitfalls etc???

I have found tutorials etc for all three methods, but if you can point to good resources like this I would appreciate it, especially so I dont base my code on examples that are not smart/good/compatible....

1: http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php http://javascript.about.com/library/bl3drop.htm http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q%5F20523133.html

2: http://www.plus2net.com/php%5Ftutorial/php%5Fdrop%5Fdown%5Flist.php http://www.plus2net.com/php_tutorial/php_drop_down_list3.php

3: http://techinitiatives.blogspot.com/2007/01/dynamic-dropdown-list-using-ajax%5F29.html http://www.webmonkey.com/tutorial/Build_an_Ajax_Dropdown_Menu http://www.noboxmedia.com/massive-ajax-countryarea-drop-down-list/ http://freeajaxscripts.net/tutorials/Tutorials/ajax/view/Create_AJAX_Dynamic_Drop_Down_List_using_PHP_-_xajax.html

3+jQuery: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

Now to the question: Could anyone experienced in all these methods help me out a bit, with the evaluation of methods 1-3 above so I can choose one and get started on the right track? Also, will I be helped by learning/unsing a framework like jQuery+jSON for this?

Rgds PM

Answer 1

I'd definitely recommend using AJAX with jQuery its tested in all of the major browsers and has simple calls that will make it a lot faster to code and you wouldn't have the browsers compatibility problems of normal JavaScript.

Answer 2

My personal recommendation is to go with AJAX.

Raw SQL or not is really a question of what backend you are using.

You need to be able to set the relationships between the different selections. The population of the lists must be able to communicate with your backend.

The real issue here is how you implement the relationships between selections. I have no good answer here, it depends heavily on the backend and your administrative needs. It can be hard coded in PHP or configured via XML or via administrative interfaces and persisted to your database solution.

It's no easy task to make it fully customizable.

The reason why i suggest using AJAX is basically because you need to filter upon any change in any selection. That would mean either download a lot of unused information or a lot of page refresh. Going with ajax gives the user a smooth experience all the way.

Answer 3

Send all data to the browser and handle the filtering etc client side with Javascript.

You mentioned that your table has 30 columns and 500-5000 rows potentially? In that case it would not be a good idea to send that much data when the page loads as: 1. It will make the page slower to load and 2. It is likely to make the browser hang (think IE).

Send parameters back to the server after each selection and reload the whole form after each selection. Probably a littebit Javascript and most code in PHP.

I'm not sure how this differs much from the third approach, but probably you mean that you need to reload the page? In that case it isn't likely to be a good user experience if they need wait for the page to refresh every time a drop down selection is changed..

Use AJAX to change all list content dynamically without reloading the whole form.

By far the best approach from a user's perspective as it makes filling out the form simple. Perhaps slightly harder to implement from your end, but as you would likely need to perform the same calculations with each of the solutions - might as well move them to a separate page that can be called by AJAX to retrieve your data. As others have mentioned, using jQuery for all your JavaScript/AJAX stuff is going to make things a hell of a lot easier ;)

Answer 4

jquery is a simpple way to use... You can also try a particular class called xajax..! These will make stuff easier.

Answer 5

Hi. These sites are really good to learn php and ajax. I want to recommend php tutorial as a nice site for learning php too.