Home/ Questions/Q 528209
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T08:57:48+00:00

I am quite new to web development and have a task to develop a

  • 0

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

2:
http://www.plus2net.com/php_tutorial/php_drop_down_list.php
http://www.plus2net.com/php_tutorial/php_drop_down_list3.php

3:
http://techinitiatives.blogspot.com/2007/01/dynamic-dropdown-list-using-ajax_29.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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 😉

    • 0