Skip to main content
M
Mattastic
Inspiring
February 13, 2007
Question

CF query and Javascript

  • February 13, 2007
  • 6 replies
  • 494 views
hi Guys,

Im trying to creat a dynamic javascript list, populating it using a CF query.

Can anyone tell me how I can loop through the query and set the options of the list?

Here is my code but it doesnt work.

Please help

Thankyou
-------------------------------------
<CFquery name="avequipment" datasource="itsupport" username="#dsn_username#" password="#dsn_password#">
SELECT Equipment FROM JL_av_items ORDER BY Equipment
</cfquery>

//add options to equipment select list
var recordcount = '<cfoutput>#avequipment.recordcount#</cfoutput>';

for(t=1; t<=recordcount; t++)
{

theOption=document.createElement('option');
theText=document.createTextNode('<cfoutput>#equipment#</cfoutput>');
theOption.appendChild(theText);
theOption.setAttribute("value",'<cfoutput>#abbreviation#</cfoutput>');
itemselect.appendChild(theOption);
}

    This topic has been closed for replies.

    6 replies

    I
    insuractive
    Inspiring
    February 14, 2007
    The itemselect.options object is an array. In order to correctly set a value you need to use the following syntax:

    itemselect.options = new Option(items,abbs, false, false);
    D
    Dan_Bracuk
    Inspiring
    February 14, 2007
    regarding the white space, use a trim function somewhere. Most dbs have one, so the query might be the most appropriate spot.
    M
    MattasticAuthor
    Inspiring
    February 14, 2007
    Michael - using your method I get the error:

    Error: setting a property that has only a getter
    Source File: http://intranet/av/booking/beta/
    Line: 108

    Here is my code:


    //add options to equipment select list
    // set variables/ lists in JS
    var recordcount = '<cfoutput>#avequipment.recordcount#</cfoutput>';
    var itemstring = '<cfoutput>#titlelist#</cfoutput>';
    var abbstring = '<cfoutput>#abblist#</cfoutput>';

    //split strings
    var items = itemstring.split(", ");
    var abbs = abbstring.split(", ");
    for (var y = 0; y < recordcount; y++)
    {
    //create select options
    itemselect.options = new Option(items,abbs, false, false);

    }
    D
    Dan_Bracuk
    Inspiring
    February 13, 2007
    For Azadi, the motivation would be for related selects. For Mattastic, the one time I did something like this, the steps were:

    1. Convert your query column to an array.
    2. Inside your <script> block, use the cold fusion toscript function to convert your array to a js array.
    3. Loop through your js array to build your select control.

    Note that the toscript function is only available in version 7 and up.
    M
    MattasticAuthor
    Inspiring
    February 14, 2007
    Thnaks for all your replies.

    Dan - I only have version 6.1 so I guess your way wouldnt work.

    Ive found a way to do this, but Its still not perfect.

    I create the valuelists in CF and then put them to a JS list. I then use the split function to assign each key to an an array, then I loop through the array.

    Problem is, can anyone tell me how I can get rid of any white space when I creat the value list?

    Its causing meproblems.

    Thankyou


    ---------------------------------
    <CFquery name="avequipment" datasource="itsupport" username="#dsn_username#" password="#dsn_password#">
    SELECT equipment, abbreviation FROM JL_av_items
    </cfquery>

    <!--- create lists --->
    <cfset title = #ValueList(avequipment.Equipment)#>
    <cfset abb = ValueList(avequipment.abbreviation)>

    <script>

    // set variables/ lists in JS
    var recordcount = '<cfoutput>#avequipment.recordcount#</cfoutput>';
    var itemstring = '<cfoutput>#title#</cfoutput>';
    var abbstring = '<cfoutput>#abb#</cfoutput>';

    //split strings
    var items = itemstring.split(" ,");
    var abbs = abbstring.split(" ,");


    for (var y = 0; y < recordcount; y++)
    {

    document.write(y + items + abbs + "<br>");

    }
    </script>
    I
    insuractive
    Inspiring
    February 13, 2007
    This code might be a little cleaner:

    <cfoutput>
    for (i=0; i<#avequipment.recordcount#; i++) {
    // Create new select box options
    itemselect.options = new Option("#equipment#","#abbreviation#", false, false);
    }
    </cfoutput>
    A
    azadisg
    Inspiring
    February 13, 2007
    and what's wrong with simply inserting a cfloop into a <select> or using <cfselect>?
    why do you need to do it through javascript?

    plus: you are referencing #abbreviation# in your js, but that filed is not part of your query...

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices