 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / ColdFusion / General CF Topics / August 2008Dynamic dropdown
I can't test this because I don't have a server running. But I do want to know if this will work. I'm trying to populate a dropdown based on another dropdown's value... <select name="test_select"> <option selected value=""></option> <option value="bill">bill</option> <option value="john">john</option> <option value="andy">andy</option> </select> <cfif IsDefined(#form.test_select#)> <cfquery name="test_select" datasource="mydsn" maxrows="25"> SELECT id,first_name,last_name FROM my_db WHERE first_name = '#test_select#' </cfquery> <select name="first_name"> <cfoutput query="test_select"> <option value="#id#">#first_name# #last_name#</option> </cfoutput> </select> </cfif> > I can't test this because I don't have a server running. But I do want to know > if this will work. I'm trying to populate a dropdown based on another > dropdown's value... After the form is submitted with the an option in the first select control hightlighted. But nothing is going to happen on the users Client machine because ColdFusion is not running there, it is running on the server and has no idea what the user maybe doing with that control until it receives another request. What you are doing is a standard 'Two Related Selects' and there are many documented and plug and play solutions out there. If your data set is small enough you can send it all in one response and allow JavaScript to build and populate the second Select based on the first value. Otherwise you can use JavaScript and ColdFusion with AJAX techniques to hide the requests to get the second Selects options from the user behind the scenes. I have done a dropdown like that using javascript and a small data set. However, this is going to be far more complex. I'd need to have 50 arrays. Specifically, when a users selects a state in the first dropdown, the second dropdown needs to populate with all the rivers in that state. You mentioned a framework towards the end of your post that I'd like to explore. Do you have any tutorials or links you can pass to me or should I just start searching on google? > I have done a dropdown like that using javascript and a small data set. > However, this is going to be far more complex. I'd need to have 50 arrays. [quoted text clipped - 4 lines] > any tutorials or links you can pass to me or should I just start searching on > google? Google is your friend, especially since you have not mentioned what version of CF you are on. Here is the first find on Google that applies to the latest CF8 http://www.forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-2-Related -Selects I should have said that upfront. CF7. I am beginning to hate CF7 based on all the new stuff that came out with 8. cfimage is one and ajax functions are another. I need a solution for cf7. 50 arrays? Why do you need 50 arrays. In any event, it sounds like you might have too much data to do this on the client. How many total river/state combinations are we talking about? Maybe I'm wrong on the arrays... Last time I did the local project the setup was something like Field 1 Field 2(1)(1) Field 2(1)(2) Field 2(1)(3) But anyway. I'd say on average each state has about 30-40 rivers I have stored. Some states are far less and some are far more. Wisconsin for example has about 100 records. For that many records you may want to go page to page. The user picks a state on page 1 and the available rivers come up on page 2. Make sure you test with Wisconsin to see what the most user freindly way is to present 100 river names. I'm guessing you won't put them in a drop down. Yeah I was trying to get around that but that may be the way I go. Really I want to do an ajax solution but every recommendation has been to get jquery and learn json and yatta yatta. I am pretty lazy. > Yeah I was trying to get around that but that may be the way I go. Really I > want to do an ajax solution but every recommendation has been to get jquery and > learn json and yatta yatta. I am pretty lazy. There is also CFAJAX and CFCAJAX that predate CF8 and work well. You may want to also consider an 'auto suggest' feature that filters a list as a user types the first few letters. But that depends on what the goal of the user is. Do they know the name of the river they want to select or are many going to be browsing them all. Even if you had an ajax solution, you still have to decide how you want to present up to 100 options to your user. I wouldn't want to be the user if that was in a drop down. I have already decided. I don't want to do auto suggest because the value has to be exact. Unfortunately for the user, they are going to get 100 options like it or not. I will be using auto suggest for search but not for this. You may or may not have considered displaying the rivers as html text with links to the next page. We are heading in the wrong direction. I'm going to research cfajax and see if that gets me anywhere. Otherwise I'm done with this for now. Only my cf8 sites will get Ajax code. :) Hi, Here's an example for a really simple "fake-ajax" solution that should work for your case: What the ajax_front script below does is to get a piece of html from the server, and embed it into the calling page. This way you don't have to deal with getting raw data back from the server, and having to add that data to existing form elements with javascript. The ajax_back script can just return a piece of html with the added form elements (like a listbox with certain rivers), and that becomes part of the main form in ajax_front. You just need to make sure to make the URL for the ajax call dynamic and include the currently selected state there, so the ajax_back script can return customized data. The ajax function is based on a wikipedia page at: http://en.wikipedia.org/wiki/XMLHttpRequest I have not used this technology in a production environment yet. It comes from my library of "usefull code snippelets for later use". So any feedback if this works will be appreciated. Cheers, fober ===== EXAMPLE AJAX-FRONT.CFM ===== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <script type="text/javascript"> function ajax(url, vars, id) { var request = new XMLHttpRequest(); request.open("POST", url, true); request.setRequestHeader("Content-Type", "application/x-javascript;"); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { if (request.responseText) { document.getElementById(id).innerHTML= request.responseText; } } }; request.send(vars); } </script> <body> <form> <div id="form" style="border: 1px solid blue; display: block; width: 100%;"> <input type="Button" value="show" onclick="ajax('ajax_back.cfm','','content')" ><br> <input type="Text" name="value1"> <div id="content" style="border: 1px solid red; display: block; width: 100%; height: 300px; overflow: scroll;"> Nothing here yet </div> <input type="Text" name="value4"> <input type="Submit" value="save"> </form> </body> </html> ===== EXAMPLE AJAX-BACK.CFM ===== <input type="Text" name="value2"> <select name="value3"> <option>test 1</option> <option>test 2</option> <option>test 3</option> <option>test 4</option> <option>test 5</option> </select> |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2008 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.