Skip to main content
A
Anonymous
August 28, 2008
Question

Dynamic dropdown

  • August 28, 2008
  • 12 replies
  • 1480 views
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>
    This topic has been closed for replies.

    12 replies

    F
    fober1
    Inspiring
    August 29, 2008
    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>
    A
    Anonymous
    August 29, 2008
    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. :)
    D
    Dan_Bracuk
    Inspiring
    August 29, 2008
    You may or may not have considered displaying the rivers as html text with links to the next page.
    A
    Anonymous
    August 28, 2008
    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.
    D
    Dan_Bracuk
    Inspiring
    August 28, 2008
    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.
    N
    Newsgroup_User
    Inspiring
    August 28, 2008
    idesdema wrote:
    > 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.
    A
    Anonymous
    August 28, 2008
    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.
    D
    Dan_Bracuk
    Inspiring
    August 28, 2008
    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.
    A
    Anonymous
    August 28, 2008
    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.


    D
    Dan_Bracuk
    Inspiring
    August 28, 2008
    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?
    Show more replies
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices