Our Blog

Just because there are few tricky issues when populating a cfselect with Flash Remoting, I made this simple example. There are two ways, one requires our query to contain the columns “data” and “label”, in which case, when we receive the result, we do the same as the cfgrid example:

mycfselect.dataProvider = results;

In this way, we continue accessing the selected value with mycfselect.selectedItem.data as usual.

With the other way, we can keep the columns of our query, and when we receive the results, we specify the column that will be the label:

mycfselect.labelField = "myColumnName";

Note that ActionScript is case sensitive, so when we access these columns, we need make sure we write correctly.

Now, we can access any other column that was provided in the query by
mycfselect.selectedItem.myColumnName, and unless our query contains a “data” column we will not be get anything if we write mycfselect.selectedItem.data.

The function that handles the request:

responseHandler.onResult = function( results: Object ):Void {
      //when results are back, populate the cfselect
      contactList.labelField = "name";
      contactList.dataProvider = results;
   }

And the form:

<cfform name="myform" format="Flash">
   <cfselect name="contactList" query="memberList" display="name" value="id"
         onchange="alert('ID selected: ' + contactList.selectedItem.id)">
</cfselect>
   <cfinput type="button" name="getValues" value="Populate drop down" onClick="#getData#" />
</cfform>

Update: If we want to select a particular item when the data is returned, we will have to loop through the items returned looking for the right one. The item to be selected can come from many sources, but to make an easy example, we'll get it from a text field. One recommendation though is not to set it in the ActionScript code if it will dynamically change, but set it in a hidden field instead. So the code for that will be:

//previous code here
//put the controls in scope to avoid calling _root


var contactList = contactList;
var idField = idField;

responseHandler.onResult = function( results: Object ):Void {
   //when results are back, populate the cfselect
   contactList.labelField = "name";
   contactList.dataProvider = results;
   //select a specific item

   for (var i = 0; i < contactList.dataProvider.length; i++){
      if (contactList.getItemAt(i).id == idField){
         contactList.selectedIndex = i;
         break;
      }
   }
}

Add some field to get the id to select

<cfinput type="text" label="Id" name="idField" value="5" />

A live example
Download the source

We will also make an example of two or more cfselect related with Remoting.

Laura

Laura

82 Comments

  1. pete
    I am populating a cfselect with a guery and want the form fields to populate when I select an item from the cfselect, but I cannot determine the correct binding statement. Here is my code snippet:

    &lt;cfquery name=&quot;qGetCompanies&quot; datasource=&quot;lynsav&quot;&gt;
    SELECT companyName, CompanyID, address, contact
    From Companies
    &lt;/cfquery&gt;
    &lt;cfform format=&quot;flash&quot; skin=&quot;haloSilver&quot;&gt;
       &lt;cfformgroup type=&quot;hbox&quot; width=&quot;600&quot;&gt;
       &lt;cfformgroup type=&quot;panel&quot;&gt;
       &lt;cfselect name=&quot;companySelect&quot; query=&quot;qGetCompanies&quot; display=&quot;companyName&quot; width=&quot;200&quot;&gt;
       &lt;/cfselect&gt;
       &lt;cfformgroup type=&quot;panel&quot; label=&quot;Edit Company&quot;&gt;
       &lt;cfinput type=&quot;text&quot; name=&quot;companyName&quot; label=&quot;Company:&quot; required=&quot;yes&quot; validate=&quot;noblanks&quot; message=&quot;First name is required!&quot; bind=&quot;{companySelect.selectedItem.companyName}&quot; /&gt;
    &lt;cfinput type=&quot;text&quot; name=&quot;Address&quot; label=&quot;Address:&quot; bind=&quot;{companySelect.selectedItem.address}&quot; /&gt;
    &lt;/cfformgroup&gt;
    &lt;/cfformgroup&gt;
    &lt;/cfformgroup&gt;
  2. Scott
    Pete, did you figure out how to do this? I was trying to acomplish the same thing.
  3. Pete
    Scott,
    No not yet. Temporarily, I decided to use the &quot;select from grid as you type&quot; to find the company in the grid. Then select the company in the grid to populate the form items with the bind=&quot;{gridname.selectedItem.fieldname}&quot; attribute.

    I'll let you know if I figure something out. I'm sure that it will have something to do with placing code to grab data from the query variable in a &lt;savecontent&gt; tag or possibly thru remoting??

    Pete
  4. Scott
    Pete, I ended up using remoting and setting the cfselect dataProvider to the returned query. It seems that you have to set it through remoting for the cfselect to hold columns other than .data and .label.

    You can then access any column data by using &quot;selectName.selectedItem.columnName&quot;. Hope that helps.
  5. AndyC
    Couple of points
    In this example, if I wanted to have the button on the same line as the cfselect how would i accomplish this. I have tried the hbox/vbox approach with no success to date
    Also , I have successfully populated a cfselect from a query re flashremoting. Using onChange I can then do another flashremoting call for drill down data. This works fine unless I want to make the selected item the first (or only) one in the list populating the cfselect
    What gives here?
  6. AndyC
    OK on point one realise I should be using type=&quot;horizontal&quot;. Just need to get label starting from margin
    Sorry

    Point 2 still needs sorting though
  7. Hi,
    If you want to trigger the onchange manually you can use the dispatchEvent.I'm not sure if this is your case.

    mydropDown.dispatchEvent({type:'change'})
  8. James Spivey
    Is this the only way to populate a cfselect from a query? I have a cfinvoke at the top of the page i wanted to use to fill the cfselect with but its not working in the slightest. And i dont know enough about flash remoting to understand if this is what i need to move to or not. Thanks!
  9. Laura
    James,
    If you just need to populate a cfselect with a query when your form first loads, simply follow the cfform documentation (http://livedocs.macromedia.com/coldfusion/7/htmldocs/00000331.htm):
    &lt;cfselect name=&quot;employeeid&quot; query=&quot;GetAllEmployees&quot;
    display=&quot;name&quot; value=&quot;emp_id&quot;&gt;&lt;/cfselect&gt;

    just make sure your cfc returns a query when you invoke it with cfinvoke.
    &lt;cfinvoke ... returnVariable=&quot;GetAllEmployees&quot;&gt;
  10. James Spivey
    Well i got that, and i did try, but nothing shows up, the link shows my form and there is a show source code as well as all the variables printed out, maybe you could see why its not printing out all the values. Im very new to these forms so you have to forgive me. (Im in the process of moving all of my old standard forms over to flash forms throughout the whole site.
  11. Laura
    James,
    I don't know what you are doing, but I don't think you are setting the cfselect correctly.
    Make sure you specify the query name, display and value attributes.
  12. Chris Brandt

    Chris Brandt

    When one uses this technique:
    mySelect.labelField = &quot;NameField&quot;;
    mySelect.dataProvider = results;

    and you then submit, mySelect comes across as undefined.

    Is there a good way of getting this set properly?

    (it works fine if I just go with the data/label version)..
  13. Robert Smith

    Robert Smith

    I'm trying to avoid the problem of needing to refresh your browser when your data changes by using flash remoting. Using your example, I can get everything to fire when clicking the button. However, if I use it as an onload event for the form, the event never seems to fire. Anyone else had trouble with this or know a solution? Thanks in advance.
  14. Laura
    Chris,
    This is the problem:
    when we populate the drop down with remoting, all the columns in the query we sent are available to us, just like the id in my example. You would then reference it as &quot;mySelect.selectedItem.id&quot;.
    However, when the form submits, it looks for a specific column, called &quot;data&quot;, as in mySelect.selectedItem.data. Because the query you send does not have that column, it comes as undefined.
    The easiest workaround would be to send a query with data (and label if you want to omit mySelect.labelField = &quot;NameField&quot;;). That would be my preferred method because of its simplicity.
    Another workaround could involve having a hidden field bound to the selectedItem.id property of the cfselect and check for the hidden field instead of the select in your action page. (this may fail of the dropdown selection never changes, for which you will have to initialize the hidden field with the same selected value of the dropdown)


    Robert,
    As of the current version of CF, there is no onload event for flash forms. You can check this blog for an entry on how to get around it (or wait a little for the CF updater). However, I don't see the need to bring data via remoting when the form loads, as we can easily populate it in the standard way.
  15. Chris
    Thank Laura! That's pretty much what I figured. It's not a problem to return the query object with the appropriate fields aliased as data and label.

    Keep up the good work. You guys (&amp; gals) are kicking some serious FR and Rich Form butt.
  16. Robert Smith

    Robert Smith

    Laura,

    Thanks for your quick response. I am trying to avoid the error that states: The form data has expired, please refresh (reload?) this page in your browser. This seems to happen when the data in the database changes and it is displayed in the form. I can't set the timeout to a large value because I need my users to see the real-time data. Consequently, my users end up refreshing all the time. This is a big enough annoyance that I may discontinue use of flash forms because of it. So, I figured if I load the form without data first and then bring it in via remoting, the chances of seeing that error will be lessened a great deal. Any ideas on how else to avoid this error message?
  17. Robert Smith

    Robert Smith

    ok, I've got one more question about this. I am attempting to return the query with the data, label fields, but am not seeing the result I need to see on the flash side. Is there anything particularly wrong with the way that I am returning the query?

    &lt;cffunction name=&quot;getFlashEmployees&quot; returntype=&quot;query&quot; access=&quot;remote&quot;&gt;
                
    &lt;cfquery name=&quot;getEmployee&quot; datasource=&quot;#application.config.dsn#&quot;&gt;
    select fname || ' ' || lname as label,
    id as data
    from ams_employees
    where status != 'term'
    and status != 'inactive'      
    &lt;/cfquery&gt;
       
    &lt;cfreturn getEmployee&gt;
    &lt;/cffunction&gt;
  18. Laura
    Robert,
    The error appears when the timeout has expired, not when the data changes as it does not check for any changes in the database. Unless they are using a back button or something similar so that the browser does not attempt to get the page, you should not see the error, disregarding the timeout (that is true for most browsers except Opera).

    Regarding your second question, are you able to call that cfc normally (by cfinvoke or createObject) and dump the query?
  19. Robert Smith

    Robert Smith

    Laura,

    Thanks for all your help. I decided to go with your workaround binding the value of the selected item to a hidden field and have things working the way I want.

    Thanks
    Robert
  20. James Spivey
    Hey Laura, thanks for all the help so far. Ive gone over this again and again and still cant find it. I did this page (http://llc.du.edu/myspivey/final/test.cfm) to show the issue very clearly. It works for a standard form, the second it goes to flash, everything drops out and it doesnt fill. Since Im still new to this maybe im just missing this, or maybe im supposed to use the remote method. Either way i would greatly appreicate any feedback you might have. Page documents the source, all the variables, and displays the output in regular vs flash form. Thanks again for everything!
  21. desidiosus

    desidiosus

    When populating a drop list, it's quite common to have a an option somewhere in the middle as the default selected. Now, although this is easily done using CF for a flash form before it's compiled, I wonder if anyone has been able to do it at runtime i.e. with the recordset returned after running a query via flash remoting? In a nut, how to search the results recordset and set selectedItem (presuming this will translate to selectedIndex after setting dataProvider, or how to search through each 'row' in the drop list after setting the dataProvider and then setting the selectedIndex programatically at runtime.

    Any thoughts on this would be of great help.
  22. Laura
    James,
    Not sure what the problem is. There must be something wrong with your sever set up. I looked at the data returned to load the form, and it comes up empty, and hence your dropdown is empty. Remoting is obviously working because it responds to the call, but for some reason the data returned is not populated with the data. Does the same happens if you have other fields prepopulated?

    desidiosus,
    that is a good point. I added an update to the post with the code.
  23. desidiosus

    desidiosus

    Hi Laura, thanks for the update, it helped a treat (you wouldn't believe how close I'd been with the code over the last day, nevermind!) I do have another related question (in a manner), and since you're such a quick responder... I'm having difficulty with the _global scope. When I assign a value to _global.myVar and try to access that again within a seperate cfsavecontent, I get undefined. Am I misunderstanding the _global scope use, or is something else a-foot?
  24. Desidiosus,
    _global is always available from everywhere that's why it's &quot;global&quot;.
    I think that you problem is that the whole cfsavecontent never gets executed. Try to make an alert on that cfsavecontent to see if you reach that code.
  25. desidiosus

    desidiosus

    Cheers for teh feedback Nahuel. Although I can't really explain the cause, I identified with a little more details what was happening. I was running two cfsavecontent blocks from the onchange event of a cfformgroup (cheers to MXNA for the onload workaround). In the first block I created _global variables, and in the second block tried to use the value. It only worked a couple of times, but without code change, didn't work most of the time. My best explanation was some kind of multi-tasking within the swf file. Most of the time the _global hadn't been assigned the value by the time I came to use it. But if called from an onlick, after all the initi, it was always there. I don't know the inner workings of the swf files, but if anyone else has seen this, let me know I'm not nuts!! I have restructered the code now anyway, and found my way around it, but thanks for the response.
  26. desidiosus,
    Flash is not multi-tasking, so If you get it working once it should always work, unless that you are waiting for a response from the server. I'm glad that you found a work around ;)
  27. Jeff Bouley
    MUCH THANKS!!! To those at asfusion, my sincere thanks and congratulations on your research and sharing of knowledge in the cfform arena. You are doing an incredible job.
  28. Robert Smith

    Robert Smith

    This is just a help for those working with an oracle database. Laura's simplest solution doesn't work due to the fact that oracle returns all column names as capitals. You have to run a query of queries on your oracle query, naming the columns with a lowercase label and data field to get the desired results. Here is an example of my cfc that returns data to flash remoting.
    &lt;cffunction name=&quot;getRequestfromEmpId&quot; access=&quot;remote&quot; returntype=&quot;query&quot;&gt;
          &lt;cfargument name=&quot;id&quot; required=&quot;yes&quot; type=&quot;numeric&quot;&gt;
          &lt;!--- &lt;cfset getRequest2 = Querynew(&quot;label,data&quot;)&gt; ---&gt;
          
          &lt;cfquery name=&quot;getRequest&quot; datasource=&quot;#application.config.dsn#&quot;&gt;
             select id, name from ams_systems
                where id in (select system_id from ams_access where emp_id = #arguments.id# and status ='Approved')
                and status != 0         
          &lt;/cfquery&gt;
          
          &lt;cfquery name=&quot;getRequest2&quot; dbtype=&quot;query&quot;&gt;
             select id as data, name as label from getRequest
          &lt;/cfquery&gt;
             
          &lt;cfreturn getRequest2&gt;
       &lt;/cffunction&gt;
  29. Laura
    Robert,
    It is good to know that oracle will return the columns as uppercase.
    If you want to stay with the label and data to make it instantly work, then you can do as you showed.
    However, if you want to use ID and NAME, the raw data as returned from your query, just use the right case in ActionScript:
    contactList.labelField = &quot;NAME&quot;;
    and then to get the id:
    contactList.selectedItem.ID

    (that will not work if you are going to submit the form normally, as it looks for contactList.selectedItem.data)
  30. Robert Smith

    Robert Smith

    Thanks Laura,

    Through trial and error, I have found that things work better for me if I make every effort to submit the form normally. Also, if a user ends up reloading their page form submit (or if you do for testing), then the actionscript bound variable that you submit will lose its value.

    Robert
  31. Robert Smith

    Robert Smith

    Laura,

    I hate to rehash this again, but I've just installed the update on my development server. I haven't changed my code at all, so I know it's the update's fault. Even though everything loads right when it is remoted in, when I submit the form, all the data in the fields comes in as undefined again. Is flash now looking for different field names, or something formatted differently (maybe it wants all uppercase now)?

    Thanks,
    Robert
  32. Jeff Bouley
    I have solved the binding combo box(cfselect) issue when remoting. The example only set label and not value, so I used some &quot;as&quot; to loop and populate the grid with the result, removing the prior filter results of course. This should work for all of you.

    theSelect.removeAll();

          
          for (var i = 0; i &lt; results.getLength(); i++){
             theSelect.addItem(results.getItemAt(i).labelFieldData, results.getItemAt(i).valueFieldData);
          }

    Enjoy and good luck!
  33. Steve
    Hi,

    Any ideas how I can create a pair of dynamic dropdown lists using CFSELECT?

    So Imagine had a the first drop down as vehicle manufacturer and the second as the model. The second should be built after the first hs been selected. We have seen this many time in Javascript but can I do it in flashforms?

    Steve
  34. Jeff
    Steve,

    Yes, quite easily. I recommend using remoting to bind the data to your second box. Use my code above to clear the second select box and rebind your recordset after remoting on subsequent searches from your primary select. There are plenty of remoting examples listed on this site to get you up in running there.
  35. Michael S Ewles
    Steve,

    I think I've done what you are requesting using two tables to link states with countries. (Mucho thanks to Laura's great blog above)

    cvCountry is a table with cvcountryID, cvcountryName
    cvState is a table with cvstateID, cvstateAB (abbreviation) and cvcountryID

    What I needed was when the user chose a new country the CFSELECT for state would populate the proper states/provinces for that country.

    Here is the code I used (and surprise, it worked):
    &lt;CFFORM format=&quot;flash&quot; width=&quot;380&quot; action=&quot;TestCode.cfm&quot; name=&quot;InvestorConfirm&quot;&gt;
       
       &lt;CFFORMITEM type=&quot;script&quot;&gt;
          function doStates() {
             var connection:mx.remoting.Connection = mx.remoting.NetServices.createGatewayConnection(&quot;http://dev.cleantech.com/flashservices/gateway/&quot;);
             var myService:mx.remoting.NetServiceProxy;
             
             var cvcountryID = cvcountryID;
             var cvstateID = cvstateID;
             
             var responseHandler = {};
             
             responseHandler.onResult = function( results: Object ):Void {
                var myresultLength = results.getLength();
                cvstateID.removeAll();
                for (var x=0; x&lt;myresultLength; x++) {
                   cvstateID.addItem(results.items[x].cvstateAB, results.items[x].cvstateID);
                }
             }
          
             responseHandler.onStatus = function( stat: Object ):Void {
                alert(&quot;Error while calling cfc:&quot; + stat.description);
             }

             myService = connection.getService(&quot;CleantechCFC.GetStates&quot;, responseHandler);
             myService.getCompany(cvcountryID.selectedItem.data);
          }
       &lt;/CFFORMITEM&gt;

             &lt;CFSELECT name=&quot;cvcountryID&quot; label=&quot;Country&quot; onchange=&quot;doStates()&quot; width=&quot;200&quot; required=&quot;yes&quot; message=&quot;You did not select a Country&quot;&gt;
              &lt;CFOUTPUT query=&quot;getCnt&quot;&gt;
              &lt;OPTION value=&quot;#getCnt.cvcountryID#&quot;&lt;CFIF getCnt.cvcountryID EQ 1&gt; SELECTED&lt;/CFIF&gt;&gt;#getCnt.cvcountryName#&lt;/OPTION&gt;
              &lt;/CFOUTPUT&gt;
             &lt;/CFSELECT&gt;
             &lt;CFSELECT name=&quot;cvstateID&quot; label=&quot;State/Province&quot; required=&quot;yes&quot; width=&quot;200&quot; message=&quot;You did not select your State/Province&quot;&gt;
              &lt;OPTION value=&quot;&quot;&gt;N/A&lt;/OPTION&gt;
             &lt;/CFSELECT&gt;
       
    &lt;/CFFORM&gt;


    Here is the simple CFC:

    &lt;CFCOMPONENT displayname=&quot;getInfo&quot;&gt;

       &lt;CFFUNCTION name=&quot;getCompany&quot; access=&quot;remote&quot; returntype=&quot;query&quot;&gt;
          &lt;CFARGUMENT name=&quot;mycvcountryID&quot; required=&quot;false&quot; type=&quot;numeric&quot; default=&quot;0&quot;&gt;
          &lt;CFQUERY datasource=&quot;DSN&quot; name=&quot;getST&quot;&gt;
             SELECT cvstateID, cvstateAB FROM cvState WHERE cvcountryID = #mycvcountryID# ORDER BY cvstateAB
          &lt;/CFQUERY&gt;
          &lt;CFRETURN getST&gt;
       &lt;/CFFUNCTION&gt;
       
    &lt;/CFCOMPONENT&gt;

    Hope this helps. I was lost until I found this great blog and tweaked it a bit for my needs.
  36. Michael S Ewles
    Sorry, I just finished getting it working when I saw Steve's issue and pushed the code. If you want me to comment it later I'll do so when I get it up and running on our live site, lol...
  37. Thomary

    Thomary

    I'm sorry, I'm not understanding this blog.

    I have a cfgrid. When an item in the grid is selected. I bind fields to this selecteditem.
    Two of the fields are cfselect fields. The cfselect are simple query lists. I populate these fields via a cfsavecontent:
    &lt;cfsavecontent variable=&quot;autofillvenfield&quot;&gt;
    vensite.text = data.dataProvider[data.selectedIndex]['vsite'];
    vendiv.text = data.dataProvider[data.selectedIndex]['vdivision'];
    &lt;/cfsavecontent&gt;
    Now I want to let the user change these fields (to correct/update data), but when the selection is made nothing goes into the field, when the selection is made a second time the item selected is entered into the field. Is there a way to stop the need to select twice?
  38. Janice
    I have a form set up using flash remoting very similar to the Real estate example on AS fusion.
    Everything works great except the cfselect.
    I have the cfselect populating from a query almost the same as the real estate states cfselect box:
    &lt;cfscript&gt;
    getsalutations = request.salutationGateway.getAll();
    &lt;/cfscript&gt;
    The information loads into the select box fine.
    But I am using the onload function to set up remoting and the default responseHandler.onResult populates the other form fields (from a different table) and should also choose the selected value from the cfselect.
    For some reason, this doesn't work all the time. Sometimes the value is selected, sometimes it isn't.
    I put an alert that tells me the length of the cfselect (salutation_id.length) into the onload where it loads the data and (supposedly) selects the correct value and it sometimes comes up as 0 when it should be 6.
    Since this doesn't happen all the time, I am not sure what could be the cause. It almost seems like sometimes the cfselect is populated after the other fields are populated (that would explain the length = 0), but why would this not happen everytime?
    I have also tried hardcoding the &lt;option&gt; into the selectbox instead of loading from a query and I get the same problem.
    Any ideas would be greatly appreciated.
  39. Laura
    Janice,
    I think what you see is what is described in this post:
    http://www.asfusion.com/blog/entry/knowing-when-the-cfform-data-arrives
  40. ME
    Hello,

    If someone could please help, I would greatly appreciate it. I managed to use the cfselect population example to do what I need it to do. My problem is that the bindings that were all previously working fine are no longer working.

    They are all being referenced in this format:bind=&quot;{grid.selectedItem.publication}&quot;. Is there a known reason why using the flash remoting renders this syntax inoperable? I also tried using the following:

    bind=&quot;{grid.dataProvider[grid.selectedIndex]['publication']}&quot;&gt;

    and

    bind=&quot;{(grid.selectedItem.publication ==undefined)?'':grid.selectedItem.publication}&quot;

    - All to no avail! Again, these were all working fine until I used this cfremoting example, which I also desparately need. Has anyone found a resolve to this issue, or know why it is occurring?

    Thanks!
  41. Tth
    I have my bind like this and it works. Maybe you need to look at the case on your column. It's the column in your database.

    &lt;cfinput type=&quot;text&quot; name=&quot;EmpID&quot; label=&quot;EmpID&quot; size=&quot;10&quot; disabled=&quot;true&quot; bind=&quot;{data.dataProvider[grid.selectedIndex]['EmployeeID']}&quot;/&gt;
  42. Thomary

    Thomary

    Thanks for all your blogs here. These are extremely help.

    Just wondering if I can do a &lt;cfoutput&gt; #grid.selectedItem.column# &lt;/cfoutput&gt;
    What I really need is to put the &quot;selected item&quot; into another table via mysql query.
    Something like:
    &lt;CFQUERY NAME=&quot;myupdate&quot; DATASOURCE=&quot;mydsname&quot;&gt;
       UPDATE mytbl
       SET
       Rep_Found = '#form.grid.selectedItem.found#'
    &lt;/CFQUERY&gt;

    Can this be done? Is there a syntax that is required or a loop?
    Any help would be greatly appreciated. Thanks!
  43. MJE
    Thanks! Yes, it was my stupd mistake - in my haste I wrote the query to be select * from table, and the default table field name started with an uppercase letter; I was refercing it with lower case. Once I changed it, everything worked.
  44. Laura
    Thomary,
    If you are submitting the form, check the syntax in the docs:
    http://livedocs.macromedia.com/coldfusion/7/htmldocs/00000266.htm

    in the section: Simple selection data (SelectMode = Single, Column, or Row)
    I am not completely sure whether that would work if you received that data with remoting though.
  45. tim
    Hi all,
    i have a question.
    i am populating a mulit select box with a query at load. when the user selects mulitple items, i need some AS to pick out the items selected and put into a remoting call to my CFC. Does anyone know how to accomplish this?
    i know i will have to loop over the select box, but i am not sure of the syntax involved to pick out the items that were selected.

    thanks
    tim
  46. Sorry i figured it out.
    when a mulitple type cfselect has mulitple items seleted the cfselect.selectedItems array is populated with the seletedItems

    loop over the length of the list
    data = cfselect.selectedItems[i].data
  47. Boybles Maldooney

    Boybles Maldooney

    If I want the first item populating the cfselect box to be a dummy item "Select..." without having to actually put "Select..." into the database and then have the rest populated by remoting, how can I do that?
  48. Jeff Bouley
    Boybles,

    When you are remoting, in your result handler do the following (notice I am using addItem, and first load the dummy value data=0 label="Select...":

    responseHandler.getData_Result = function( results: Object ):Void {               
    //when results are back, populate the multi select
    selData.removeAll();
       
    //add 0 and 'Select...' for first entry
    selData.addItem({data:0, label:'Select...'});
       
    //loop over results and add to the select box
    for (var i = 0; i < results.getLength(); i++){
    selData.addItem({data:results.getItemAt(i).fieldIdentifier, label:results.getItemAt(i).fieldDescription});
    }
    }
  49. Boybles

    Boybles

    Jeff,
    ALMOST THERE!!! The label properly populates, but the data values don't. What am I doing wrong???

          //when results are back, populate the multi select
          ownerList.removeAll();
          
          //add 0 and 'Select...' for first entry
          ownerList.addItem({data:0, label:'Select...'});
          
          //loop over results and add to the select box
          for (var i = 0; i < results.getLength(); i++){
          ownerList.addItem({data:results.getItemAt(i).ownerid, label:results.getItemAt(i).ownername});
          }
  50. Jeff Bouley
    Odd, studying your code... Everything appears to be ok at first glance. Make sure you are actually returning a query result from ColdFusion that has an ownerid field and ownername field. It is case sensitive as well, so if your query/proc has mixed case such as ownerId, then make sure your code reflects that as well.
  51. Boybles

    Boybles

    I'm starting to think this is a bug since I have tested it on 2 differenct CF installations and tried all kinds of different approaches. Here is very simple code using the asfusion select box example which demonstonstrates the addItem anomaly. Select the first option "test" and you will see that the value is not populating. If you have a way of getting the value in there, it would make things a LOT better.

    <cfsilent>
    <!--- make an empty query to populate the grid with no records --->
    <cfset memberList =    queryNew("id,name") />
    <cfsavecontent variable="getData">
       contactList.removeAll();
       contactList.addItem("select","0");
       contactList.addItem("test","1");
    </cfsavecontent>
    </cfsilent>

    <cfform name="myform" height="150" width="200" format="Flash" timeout="300">
       
       <cfselect name="contactList" query="memberList" display="name" value="id"
             onchange="alert('ID selected: ' + contactList.selectedItem.id)"></cfselect>
          <cfformgroup type="horizontal">
       <cfinput type="button" name="getValues" value="Populate drop down" onClick="#getData#" /></cfformgroup>
    </cfform>
  52. Jeff Bouley
    It's a bug alright you're referring to the list element incorrectly 8-)... The code below runs fine on my machine. I recommend you open up Flash or go to the on-line docs to get some insight on all of the form objects properties and methods. It is a great eye opener for CF'ers getting up to speed with actionscript and CF integration. GOOD LUCK!

    <cfsilent>
    <cfset memberList = queryNew("id,name") />

    <cfsavecontent variable="getData">
    contactList.removeAll();
    contactList.addItem({data:0, label:'Select...'});
    contactList.addItem({data:0, label:'test'});
    </cfsavecontent>
    </cfsilent>

    <cfform name="myform" height="150" width="200" format="Flash" timeout="300">
    <cfselect name="contactList" query="memberList" display="name" value="id"
    onchange="alert('ID selected: ' + contactList.selectedItem.data)">
    </cfselect>
    <cfformgroup type="horizontal">
    <cfinput type="button" name="getValues" value="Populate drop down" onClick="#getData#" /></cfformgroup>
    </cfform>
  53. Boybles

    Boybles

    Jeff,
    You are absolutely correct. I went over all my code with a fine tooth comb and found out what was causing the problem. Thank you so much for your help!!! I'm so grateful to have asfusion around to help me further development with this stuff!
    Jeremy
  54. Scott
    I have a query that is returning id and name. My cfselect has display"name" and value="id", but the form is returning the name as the value when I submit it.

    The id field is a guid.
  55. Laura
    Scott,
    I figured you have probably already fixed it by now, but I thought I would ask anyway.
  56. Carl
    Hopefully someone will have a quick answer for this one. I have a grid that I am at first loading using a query assigned to the query attribute in the cfgrid tag. After selecting a row in the grid I then update some form controls with the selected record. One of the controls is a cfselect using code from above. If the user updates the information in the form and clicks a Save button I am using remoting to save the record to the database and then refreshing the grid (again using remoting). The problem is that if I now select another record from the grid, the cfselect does not change to the corresponding selection. It appears that entries.dataProvider[entries.selectedIndex]["projectid"] is now empty. I have include some of the relevant code below:
    <cfset objTS = CreateObject('Component','cfc.timesheet') />
    <cfset qryEntries = objTS.getEntries() />
    <cfform ...>
    <cfformitem type="script">
    function onEntriesChange()
          {
             var entries = entries;
             
             alert(entries.dataProvider[entries.selectedIndex]["projectid"]);
             for(var i=0; i < projectid.length; i++)
             {
                var selectedValue=entries.dataProvider[entries.selectedIndex]["projectid"];
                projectid.selectedIndex = i;
                if(projectid.selectedItem.data == selectedValue){break;}
             }
          }
    </cfformitem>
    <cfselect name="projectid"
    query="qryProject"
    size="1"
    width="200"
    display="displayname"
    value="projectid"
    label="Project" />

    <cfgrid name="entries" query="qryEntries" height="200" width="300" rowheaders="no" onChange="onEntriesChange()">
                   <cfgridcolumn name="tsid" display="no" />
                   <cfgridcolumn name="dateofwork" header="Date" mask="MM/DD/YYYY" width="80" />
                   <cfgridcolumn name="projectname" header="Project" />
                   <cfgridcolumn name="projectid" display="no" />
                   <cfgridcolumn name="hours" header="Hours" width="50" />
                   <cfgridcolumn name="comment" display="no" />
                </cfgrid>
    </cfform>


    As always, any help is greatly appreciated.
  57. Ed
    I finally have one select working fine after realizing that actionscript is case sensitve!

    The cfgrid tag works fine for one field the "state" field output with cfselect with the following onchange actionscript:
    <cfform format="Flash" skin="haloblue">
    <cfgrid name="UsersGrid" format="Flash"
    query="qNames" rowheaders="No"
    onchange="for (var i:Number = 0; i<state.length; i++) {if (state.getItemAt().data == UsersGrid.selectedItem.state) state.selectedIndex = i}">

    What I want to get is two cfselects working:
    onchange="for (var i:Number = 0; i<state.length; i++) {if (state.getItemAt().data == UsersGrid.selectedItem.state) state.selectedIndex = i}"
    AND
    onchange="for (var i:Number = 0; i<meetingtime.length; i++) {if (meetingtime.getItemAt().data == UsersGrid.selectedItem.meetingtime) meetingtime.selectedIndex = i}">

    How do I do the above idea in actionscript? Thanks a million


    <cfgridcolumn name="FIRSTNAME" header="Contact Name">
    <cfgridcolumn name="ENTID" display="FALSE">
    <cfgridcolumn name="state" header="Next Step">
    </cfgrid>


    <cfformgroup type="tabnavigator">
    <cfformgroup type="page" label="Details: #dateFormat(now(), 'mmm dd, yyyy')#">
    <cfformgroup type="horizontal">
    <cfinput type="text" name="FIRSTNAME" label="First Name"
    bind="{UsersGrid.dataProvider[UsersGrid.selectedIndex]['FIRSTNAME']}"
    onChange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'FIRSTNAME', FIRSTNAME.text);">


    <cfselect name="state" width="200" size="1" label="Next Step" onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'state', state.selectedItem.data);">
    <option value="nulo">None</OPTION>
    <option value="SEND STUDY">SEND STUDY</OPTION>
    <option value="SEND PROPOSAL">SEND PROPOSAL</OPTION>
    <option value="CALL AND EMAIL">CALL AND EMAIL</OPTION>
    <option value="CALL">CALL</OPTION>
    <option value="SEND PRESENTATION">SEND PRESENTATION</OPTION>
    <option value="MEETING">MEETING</OPTION>
    </cfselect>

    <cfinput type="hidden" name="ENTID" label="ENTID"
    bind="{UsersGrid.dataProvider[UsersGrid.selectedIndex]['ENTID']}"
    onChange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'ENTID', ENTID.text);">

    </cfformgroup>
    </cfform>
  58. Jim
    Is it possible to use the ondblclick event in a cfselect to fire off an actionscript function? Basically, I built two cfselect boxes, one populated (box 1), one empty (box 2). Selecting an item in box 1 and clicking a button causes the item to be "moved" to box 2. I'd like the same functionality by double-clicking the item in box 1. Any assistance would be much appreciated.
  59. Jeff Bouley
    Probably Jim, but why not look at my drag and drop code here: http://blog.strikefish.com/blog/index.cfm?mode=entry&entry=3EEE64B3-1422-201A-55F8F8ACFF40B8E7
  60. Jim Gram

    Jim Gram

    Sorry about the double-post...

    Sweet code, Jeff! I need to enable/disable a button if the destination select box is populated/empty. I have a function to check the length, but it seems that no matter where I call it in your functions, it won't fire. Shouldn't I include it in the dragComplete functions? Thanks and superb job on the code...
  61. Maggie

    Maggie

    Hello,

    I have the select populating just fine - however when the data comes in, I am binding the data to input text fields and a group of radio buttons. The text binding works fine, but of course the radio buttons are a different issue. To accomodate this, I am using a function, which onChange sets the radio button value by using status.selectedData = myGrid.selectedItem.COLUMN. This works great if I manually select an item from the select list, but when the data initially loads, it does not bind, because it doesn't trigger the onChange event. Since there is no onLoad event I can use when the data is populated, I'm not sure what to do. Is there any way to either:

    a) force the first item in the select box to recognize the <option value = "">Select xyz</option> (even though I have it, once flash remoting presents the data, the first column automatically selected is the first result)

    b) use another event that I'm not aware of instead of onChange in the select box, so that once the data populates in the cfselect, the radio button can recognize that and be properly bound?

    I hope this makes sense - please help! :)
  62. Maggie

    Maggie

    Ok...I almost have option a working - by doing the following to force the first item to be "please select xyz":

    after the responseHandler.onResult = function( results: Object):Void {
    selectList.labelField = COLUMNNAME;
    selectList.dataProvider = results;

    I put

    selectList.addItemAt(0, {label:'Select xyz'});
    selectList.selectedIndex = 0;
    }

    In the drop down, Select xyz shows up great, but when I select another item, you can see the top option display as 'Select xyz, undefined, undefined, undefined, undefined' - weird. What parameters is it looking for there? When I select that option, it still just displays 'Select xyz', but upon expanding the list the undefined list is appended to it. Any ideas on how I can get rid of those? I am *this* close!
  63. Ben
    Maybe this can be added to http://landofcoldfusion.blogspot.com

    there is an open source cf_select running.
  64. Bill Foresman
    I'm trying to use dateformat within cfselect in a flash form. No dice so far. Any help will be appreciated.
  65. John
    Hi all,

    I am getting some strange behaviour occurring using Flash Remoting to populate a few cfselects. As well as using Flash Remoting to populate the cfselects dynamically, I am also using it to enable/disable the cfselects dynamically based on certain selections made.

    The issue occurs after the form has been submitted and the cfselects are repopulated with their submitted selections. If a cfselect has been disabled via Flash Remoting, while it correctly displays the selection made before the submit, as well as disabling the cfselect appropriately, the actual dropdown looks as though it has shrunk to a width of 0 (just the down arrow is displayed), with the text from the dropdown overlapping that. It only does this when the cfselect has been disabled. Could this be a bug? I have set the width in the <cfselect> tags, as well as within the ActionScript, but it still comes up with the problem.

    If anyone can shed light on this issue, that would be great!

    Cheers,

    John
  66. Meghan

    Meghan

    I know this particular post hasn't garnered many comments lately, but because I saw this problem hinted at but not concretely resolved above, I figured I'd try and save someone else the headache I experienced today.

    I have a tabbed form with twelve different sections. Certain input on early tabs populates data on subsequent tabs. In one instance, I have a selection made on tab four populate a cfselect on a later tab, and also create records in the cfgrid in that same later tab. Then I use Remoting to refresh the cfgrid that displays the records that were just created. The cfgrid was "bound" to the cfselect by a line of Actionscript in the onChange event of the cfgrid.

    After using the AsFusion technique to refresh my cfselect via Remoting, I tried to select one of the records in the cfgrid, and found that the cfselect value never changed. If I refreshed the page, so that the same cfgrid and cfselect were populated using the query attribute of their tags, it worked fine.

    I used the "data" and "label" option discussed above, and originally was doing this in my onResult remoting call:

    responseHandler.refreshMatrixAudiences_Result = function( results: Object ):Void {
       //this is the cfselect

       Strategy_Matrix_Audience.dataProvider = results;
    }


    After much futzing around, I found that I had to change that cfselect refresh to:

    responseHandler.refreshMatrixAudiences_Result = function( results: Object ):Void {
       //this is the cfselect

       Strategy_Matrix_Audience.dataProvider = results.items;
    }


    After that, it worked perfectly.

    I would suggest that if anyone is having any binding problems after trying to refresh a cfselect, they add .items to their results in the Remoting onResult.
  67. marco van den oever
    i want to give the onchange value of the cfselect the value of its own display value, is that possible? i tried:

    <cfselect name="prov" query="provincies" display="naam" value="naam" onChange="prov.selectedIndex">
    </cfselect>

    thank you
  68. marco van den oever
    ok, was thinking to complicated, found an easier solution, the solution, over here:
    http://www.asfusion.com/blog/entry/multiple-selects-related-flash-cfform
  69. Ron Conrad

    Ron Conrad

    I have a ColdFusion 8 Flash Form for an equipment reservation system. For each day of the reservation there is a cfselect dropdown to select the equipment for that day. Most of the time, the same equipment will be available for all days. Each cfselect is populated by their own query that displays available items for that day.

    I want to add the capability of making each cfselect point to the same item (if it exists for that day) using actionscript (comparing it to the 1st cfselect). If the item doesn't exist for that day, I want to point to the first item in the list, and change the font color of the textbox to red (or something like that). Since I'm fairly new to actionscript, and can't seem to find any examples, any help would be appreciated. Here is the code for my form:

    <cfform action="ReserveMultipleForm.cfm" method="POST" name="DynamicForm" format="Flash" skin="halosilver" width="700" height="#FormHeight#">

    <cfformgroup type="horizontal" >
    <cfinput type="checkbox" name="SameForAllDays" label="Same Equipment for All Days" checked="no">
    </cfformgroup>
    <cfformitem type="html"><br /></cfformitem>

    <cfset count = 0>
    <cfloop index="date" list="#list_o_dates#" delimiters=",">
    <cfset count = count + 1>
    <cfset queryname = "a#count#">
    <cfformgroup type="horizontal">
    <cfinput type="text" name="DateDisplay#count#" width="75" value="#DateFormat(date, 'mm/dd/yyyy')#" disabled="true">
    <cfinput type="hidden" name="Date#count#" value="#date#">
    <cfselect name="f_ReserveItemID#count#"
       query="#queryname#"       value="ReserveItemID"
    display="Equipment"
    width="400" />
    </cfformgroup>
    </cfloop>

    </cfform>
  70. Ron Conrad

    Ron Conrad

    I have a ColdFusion 8 Flash Form for an equipment reservation system. For each day of the reservation there is a cfselect dropdown to select the equipment for that day. Most of the time, the same equipment will be available for all days. Each cfselect is populated by their own query that displays available items for that day.

    I want to add the capability of making each cfselect point to the same item (if it exists for that day) using actionscript (comparing it to the 1st cfselect). If the item doesn't exist for that day, I want to point to the first item in the list, and change the font color of the textbox to red (or something like that). Since I'm fairly new to actionscript, and can't seem to find any examples, any help would be appreciated. Here is the code for my form:

    <cfform action="ReserveMultipleForm.cfm" method="POST" name="DynamicForm" format="Flash" skin="halosilver" width="700" height="#FormHeight#">

    <cfformgroup type="horizontal" >
    <cfinput type="checkbox" name="SameForAllDays" label="Same Equipment for All Days" checked="no">
    </cfformgroup>
    <cfformitem type="html"><br /></cfformitem>

    <cfset count = 0>
    <cfloop index="date" list="#list_o_dates#" delimiters=",">
    <cfset count = count + 1>
    <cfset queryname = "a#count#">
    <cfformgroup type="horizontal">
    <cfinput type="text" name="DateDisplay#count#" width="75" value="#DateFormat(date, 'mm/dd/yyyy')#" disabled="true">
    <cfinput type="hidden" name="Date#count#" value="#date#">
    <cfselect name="f_ReserveItemID#count#"
       query="#queryname#"       value="ReserveItemID"
    display="Equipment"
    width="400" />
    </cfformgroup>
    </cfloop>

    </cfform>
  71. Jeff
    I need to extract the selectedItems from a cfselect and pass that to a cfc. I want to update a table in my database using all the values in a SQL WHERE FIELD_ID IN(id1,id2,id3) format. I know the selectedItems values are in an array, but can you pass that array directly to the cfc, or should it be done via a variable. I read the post from Tim back in #47, and he figured it out, but wasn't complete in his response. He said to loop over the array length and add to the variable (data in his case). I can do that and get my values, but how do I then pass either the data values, or label values to the cfc? Can someone provide a working example please (AS and component)
  72. Jeff
    I need to extract the selectedItems from a cfselect and pass that to a cfc. I want to update a table in my database using all the values in a SQL WHERE FIELD_ID IN(id1,id2,id3) format. I know the selectedItems values are in an array, but can you pass that array directly to the cfc, or should it be done via a variable. I read the post from Tim back in #47, and he figured it out, but wasn't complete in his response. He said to loop over the array length and add to the variable (data in his case). I can do that and get my values, but how do I then pass either the data values, or label values to the cfc? Can someone provide a working example please (AS and component)
  73. umuayo

    umuayo

    The problem I have is that I have three seslect options, When my Users do their Post, I need to remember their previous select options and default those three cfselect inputs to their previous selection than them starting all over again to make new selections. I know in regular CF, you can cfoutput the query and use a cfif statement to set the desired option as selected. How can I accomplish this in Flas form
  74. Bob Marley

    Bob Marley

    Hi Gang,

    I am trying to refresh my cfselect via flash remoting. I have done this before with no problems, but for some reason I can't get this instance to work. The data is returning correctly, but the data value isn't binding correctly. The label field should be 'category_name' and the data value should be 'category_id'.

    I populated a cfgrid with this returned data and everything is returning from the CFC properly. I have no idea why it is not working for the cfselect. I have double checked names, case, and I have read the above posts.

    Additional Info: We just upgraded from MX7 to CF8.

    Summary of Code:

    var myForm = myForm;

    responseHandler.onResult = function(results: Object):Void{
    myForm.category.labelField = 'category_name';
    myForm.category.dataProvider = results.items;
    }

    <cfselect name="category" label="Parent Category:" query="myCategories" value="category_id" display="category_name" width="250" required="true" enabled="false">
    </cfselect>

    Note: This select is initially populated by a Coldfusion component invoke and everything works perfect. But, once the remoting call fires, the data value of 'category_id' will not bind to the corresponding labelField.

    Halp!
  75. Bob Marley

    Bob Marley

    I finally found out the problem but I'm still unsure why this is happening. If I reference the cfselect value using the syntax mySelect.selectedItem.data prior to remoting, it has value. If the remoting call has refreshed the select, it doesn't have value. Instead, I had to reference it as mySelect.selectedItem.cat_id (cat_id being the column name returned from the database.)

    Laura, do you know why this is? Am I setting the value wrong?
  76. Katja
    Hi
    How can I set multiple selections from database via remoting?

    I have tried:

    responseHandler.hae_Result = function( tulos: Object ):Void {   
    for (var i = 0; i < _root.citys.length; i++){
    for (var x = 0; x < tulos.length; x++){
       _root.citys.selectedIndices = tulos.items[x].kiid;
    break;
    }
    }
    }

    Where citys is my cfselect and tulos is the result from the query from my CFC. Kiid is a field of the database.
    I've also tried:
    _root.citys.selectedItems[i].data = tulos.items[x].kiid;
    and
    _root.citys.selectedItems[i].id = tulos.items[x].kiid;
    and
    _root.citys.selectedIndex = tulos.items[x].kiid;
    but nothing happens or I get only one selected result.
    Can anyone help me?
  77. Scott
    Major Kudos for your Flash Form work/examples. You have made programming fun again for me.

    I used your real estate form as the basis for a registration form. One of the selections in the form is a dropdown of teachers names. The list I quite long (several hundred names). It can become cumbersome typing the first letter of the last name and then scrolling thru names to get to the teacher name you’re looking for. Is there a way thru actionscript to have an input field where you start typing in the name and it starts filtering out the names in the dropdown? I have a similar filter in place for the grid, but don’t seem to be able to figure it out for the dropdown.

    Thanks
  78. thomary

    thomary

    I would love to get an answer for this too. I ended up using very small grid to get this working for me.