I want to have 3 dropdown lists going like
Select:State
Select City
Select: Restaurant
When the first dropdown list has an item selected, the "Select City" list is updated, and when the second dropdown list has an item selected, the last one is updated.
I am stuck between 3 approaches:
Using Javascript to put in all possible values. And using form onchange to invoke the update method.
Prepopulate dropdown from database (MySQL).
A hybrid of the first two - first 2 with Jscript, last one from database.
Now how does the performance and pros/cons of each approach for hosting, VPS and PAAS compare?
For the sake of usability I would update the select boxes using Ajax calls.
Another benefit from choosing this approach would be that your application logic is mostly kept server side, which in most cases is easier to write tests for.
You could populate the first select box by querying in your view and passing the results down to your template. If you disable the other 2 select boxes you can active/populate them after the 1 one is selected through an ajax call.
Related
I have two drop down menus on my webpage. One is a course list and the other is a student list. What I want to do is, when a selection is made in the course menu it will update the student menu to only list students in that course.
All the course and student data is saved in a MySQL database. The SQL statements to retrieve the results I want are not a problem. I have those figured out. The problem is that I don't know how to get one drop down menu to update the other without the use of a submit button. Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
I've looked through several similar questions, but a lot of them end up resetting the first menu when the second is updated. I need to print both the selected course and student on the page at the end.
Is this something that can be done with PHP, or would Javascript be more preferable? If someone could point em in the right direction, that would be much appreciated.
Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
Yes. The buzz-word for this is AJAX.
You will end up using both JavaScript and PHP to do this. The actual implementation is quite involved, so I will list the basic steps for you.
(JavaScript) Bind the change event for the course drop down menu.
(JavaScript) When that event is fired, capture the selected course and fire an XMLHttpRequest off to your server along with the selected course.
(PHP) Capture the selected course, and run the SQL statement to fetch your students.
(PHP) Convert the student list to a text format (JSON, XML, delimited-text, etc.) to send back to the browser (using echo, print, etc).
(JavaScript) Populate the student drop down menu.
The general approach to this is to use jQuery to add a hook to your drop-down selector and trigger an AJAX load on another section of the page, populating that with data retrieved either as an HTML fragment (easy) or JSON data that's turned into one (harder).
A really quick and dirty version is to grab a portion of a page and re-populate the current document with it using $.load():
$('#select1').on('change', function() {
$('#select2').load('select.php #select2', 'select1=' + $(this).val())
})
That's the rough idea: When your first selection box changes, load the select.php page, or whatever you're using, and add on the parameter select=N where N is the selected value. It then rips out the #select2 section and replaces it.
I know what I want to do but don't know how to do it. I've got a database of doctors and when filling out a form, want the second drop down list to automatically be populated based on the first choice.
So let's say I select "Primary Care Doctor" (this is dynamic from the database, I have that part figured out).
The second drop down list would automatically populate from the database where all the specialties are "Primary Care Doctor"
I've attached the code I have so far as well as the database structure.
I have an access database named physicians.mdb the table that the physicians are being pulled from is table. The fields are: physician and specialty (there's also an ID field that's the primary key).
Can't see your attachment but basically you want a query to load the second combo box like SELECT DISTINCT * FROM [Physicians] WHERE [SPECIALITY]='Primary Care Dcotor'. See how you go from there, or give us more details.
I am looking a sample for the functionality where there are 2 drop downs. One is 1 is State/Province and the 2rd is City. Based on the state drop down selection, city drop down values should be populated.
I need sample database design also....
Could anyone please help me out on getting a sample for this.
Regards
padman..
With neither Ajax nor refreshes? Bad idea, unless you have a very limited number of state/city combinations--otherwise the HTML/JavaScript you send will be huge.
Otherwise it's a simple dependent select, which is searchable on the web. The nutshell version is that when your state changes, you take the value of the selected state option, use it to look up cities in a map of state id => cities, and use the cities collection to populate the second select box.
The state/cities JavaScript structure is created on the server side using whatever template mechanism the rest of the app uses (I assume JSP or Velocity since you're using Struts 1).
DB DB design for what? States and cities? Have a table of states. Have a table of cities with a state id foreign key.
I have a gridview and a dropdownlist on my page.
The gridview is binded through code behind with some columns. Among these price is also a column.
My scenario is to change the price field based on the dropdown criteria.
The price column consists of values in "lakhs", and i need to change them as crores or usd or some other format as per dropdown.
I don't want to go for postbacks. I want these to be implemented using javascript.
(These changes are for user conversion. They need not to be saved on database)
Thanks in advance
Madhu
You have two options. If you don't want to go for any response from the server (i.e. you don't want to make an AJAX call), you could populate a hidden field with a list of comma-delimited values that correspond to your dropdown values. It's an ugly approach, but it would work.
The other option is to make an AJAX call to a web method on the server (or possibly a financial service like Yahoo! Finance). When your dropdown selected value changes, that event fires a call to the server.
If you were able to indicate what platform you're using (PHP, .Net or other), someone will likely be able to provide more relevant examples and code samples.
Since the grid is rendered as an HTML Table, you can actually manipulate anything on the client.
I would pickup jQuery for the task
We have a requirement that has had me skimming the web for quite sometime now. Here is the problem scenario. We have a web-page and the page here contains three drop-downs as shown in the picture below (Dummy fields - but the actual business data is also on the same lines)
Here, we have three drop downs with the data being populated dynamically based on the selections in the other two. Let me give you an example. Whenever a person clicks on a drop-down button - the values for the drop-down should be dynamically generated using the values selected in the other two drop-downs. See the below scenarios:
If someone has a pre selected "Honda" in the first drop-down and he clicks on the 'Milage" drop down - the 'Milage' drop-down should:
a. clear previous options (if any)
b. populate the options dynamically for all the milages valid for 'Honda' (as per the DB)
c. show the drop-down with the new options.
Also, the flow should work irrespective of any order of the drop-downs being selected.
This is where I am having issues - if I write the 'OnClick' handler for the drop down and use an AJAX call to get the values - the drop down values are populated but on IE - the drop-down collapses again. Also, in Firefox the options are populated ok - but the drop-down is kind of too animated (understandably so as I delete all the options and add the new ones).
Also, it would be great if the whole filteration thing can be handled on teh browser (as the AJAX calls take some time)
Here is the image if you can't see it in the original post above -
http://www.imagechicken.com/uploads/1241831231099054800.jpg
Regards,
- Ashish
Your problem is that you are updating the drop down content when the user clicks on it. It is better to update the drop down when the related drop down is changed. For example:
$('#drop1').change(function(){
$('#drop2').load(url, {option: $('#drop1').val()})
})
A polling solution or an onchange solution as described by #Nadia is likely your best bet here.