9 Replies Latest reply on Jun 10, 2009 1:26 PM by ilssac

    cfselect bindings

    Mrs. Man Level 1

      I am trying to do a bind with a cfselect, below is the code i have so far:







          <cffunction name="getStates" access="remote" returntype="array" output="no">


            <cfset var data="">
            <cfset var result=ArrayNew(2)>
            <cfset var i=0>


            <cfquery name="data" datasource="#request.dsn#">
            SELECT abbr,state
            FROM tbl_zips



            <cfloop index="i" from="1" to="#data.RecordCount#">
               <cfset result[i][1]=data.abbr[i]>
               <cfset result[i][2]=data.state[i]>


            <cfreturn result>






      <cfform name="testForm" action="" method="post">


      <cfselect name="state" bind="cfc:cfc.Queries.getStates()" bindonload="true"/>





      When i run the test.cfm file, the drop down never populates. I also turned on debugging and i don't even see it trying to call the CFC. But if i manually invoke the component using cfinvoke, it grabs the data.


      Has anyone ever come across this issue before?

        • 1. Re: cfselect bindings
          Mrs. Man Level 1

          Here's something else i found out, whenever i try to do a bind using cfselect i don't even see it calling the cfc using the debugger, but i can call the cfc all day manually invoking it, has anyone seen this happen before?

          • 2. Re: cfselect bindings
            Mrs. Man Level 1

            OK, i give up with cfc bindings. Would it be possible to maybe have a javascript function call a cfc based on the onchange event from a select box?


            So as soon as they choose a state, it will automatically call the cfc with the state as the argument and then populate the next select box, of cities in that state.

            • 3. Re: cfselect bindings
              ilssac Level 5

              Sure it is possible.  It is not that difficult to roll your own AJAX functionality.  You just write a basic JavaScript function that use the XMLHttpRequest object that will make a HTTP request and expect XML returned.  (Amazing how they name these functions isn't it.).


              Here is the first thing that turned up for me on a Google Search for AJAX.



              Then your CFC just needs to return the data in the proper format whenever it receives a request.




              • 4. Re: cfselect bindings
                Mrs. Man Level 1

                I like your idea alot, i will definitely go that route. Do you know where i could find a very simple example on how to do something like this?

                • 5. Re: cfselect bindings
                  ilssac Level 5

                  Well if find the W3schools tutorials, such as the one I already linked to, to be pretty damn easy to follow.


                  Here is an 11 part series I found very informative:


                  Mastering Ajax, Part 11: JSON on the server side

                  In the last article, you learned how to take an object in JavaScript and convert it into a JSON representation. That format is an easy one to use for sending (and receiving) data that maps to objects, or even arrays of objects. In this final article of the series, you'll learn how to handle data sent to a server in the JSON format and how to reply to scripts using the same format.


                  14 Aug 2007

                  Mastering Ajax, Part 10: Using JSON for data transfer

                  Plain text and XML are both data formats that you can use for sending and receiving information in your asynchronous applications. This installment of "Mastering Ajax" looks at another useful data format, JavaScript Object Notation (JSON), and how it makes moving data and objects around in your applications easier.


                  27 Mar 2007

                  Mastering Ajax, Part 9: Using the Google Ajax Search API

                  Making asynchronous requests isn't just about talking to your own server-side programs. You can also communicate with public APIs like those from Google or Amazon, and add more functionality to your Web applications than just what your own scripts and server-side programs provide. In this article, Brett McLaughlin teaches you how to make and receive requests and responses from public APIs like those supplied by Google.


                  23 Jan 2007

                  Mastering Ajax, Part 8: Using XML in requests and responses

                  In the last article of the series,you saw how your Ajax apps can format requests to a server in XML. You also saw why, in most cases, that isn't a good idea. This article focuses on something that often is a good idea: returning XML responses to a client.


                  07 Nov 2006

                  Mastering Ajax, Part 7: Using XML in requests and responses

                  Brett McLaughlin demonstrates how you can use XML as the data format for sending asynchronous requests.


                  10 Oct 2006

                  Mastering Ajax, Part 6: Build DOM-based Web applications

                  Continue to explore how DOM programming fits into interactive Ajax applications as Brett McLaughlin completes his trilogy of articles on DOM programming with a DOM application in practice.


                  12 Sep 2006

                  Mastering Ajax, Part 5: Manipulate the DOM

                  Last month Brett introduced the Document Object Model, whose elements work behind the scenes to define your Web pages. This month he dives even deeper into the DOM. Learn how to create, remove, and change the parts of a DOM tree, and take the next step toward updating your Web pages on the fly!


                  11 Apr 2006

                  Mastering Ajax, Part 4: Exploiting DOM for Web response

                  The great divide between programmers (who work with back-end applications) and Web programmers (who spend their time writing HTML, CSS, and JavaScript) is long standing. However, the Document Object Model (DOM) bridges the chasm and makes working with both XML on the back end and HTML on the front end possible and an effective tool. In this article, Brett McLaughlin introduces the Document Object Model, explains its use in Web pages, and starts to explore its usage from JavaScript.


                  14 Mar 2006

                  Mastering Ajax, Part 2: Make asynchronous requests with JavaScript and Ajax

                  Most Web applications use a request/response model that gets an entire HTML page from the server. The result is a back-and-forth that usually involves clicking a button, waiting for the server, clicking another button, and then waiting some more. With Ajax and the XMLHttpRequest object, you can use a request/response model that never leaves users waiting for a server to respond. In this article, Brett McLaughlin shows you how to create XMLHttpRequest instances in a cross-browser way, construct and send requests, and respond to the server.


                  17 Jan 2006

                  Mastering Ajax, Part 1: Introduction to Ajax

                  Ajax, which consists of HTML, JavaScript, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together -- from an overview to a detailed look -- to make extremely efficient Web development an easy reality. He also unveils the central concepts of Ajax, including the XMLHttpRequest object.


                  06 Dec 2005


                  I also find that Google searches tuns up TONS of information for popular topics like 'AJAX'.


                  And of course the ColdFusion documentation has entire chapters on using AJAX with CF complete with sample code.


                  Using Ajax UI Components and Features



                  Using Ajax Data and Development Features




                  Ian Skinner

                  1 person found this helpful
                  • 6. Re: cfselect bindings
                    Mrs. Man Level 1

                    Wow, thank you very much for this info, defintely was very helpful. Also i finally figured out what was going on with it not calling the CFC, the reason was that i needed to create a shortcut in my root directory to the CFIDE/scripts directoryt and now i see it calling the CFC but it still doesn't display anything in the cfselect box even though i see it grabbing all the info in the debugger window. Any ideas on why this would be happening?

                    • 7. Re: cfselect bindings
                      ilssac Level 5

                      Not really, as I have little idea what your code looks like or how you are doing this.


                      A couple of well known gotcha's:


                      Having onRequestStart() or OnRequest() functions in an Applicaiton.cfc file that mangle the request and|or response.


                      Having content in Application.cfm file that is prepended to the beginning of the response, whcih will break XML formats.


                      Not having a JavaScript handler that does something with the xmlhttprequest response.


                      Not returning infomation in a format that can be handled by the response handler.


                      I beleive the Firebug debugger tool is indespensible in debugging all of this, if you are not using it.

                      1 person found this helpful
                      • 8. Re: cfselect bindings
                        Mrs. Man Level 1

                        Ur the man, i just did some more research on what you said and created a dummy OnRequestEnd.cfm with nothing inside of it and now it populates the select box. But i'm running into something weird though, it populates it fine, but the first one always comes up blank, do you know of way to fix this?

                        • 9. Re: cfselect bindings
                          ilssac Level 5

                          I can only presume that the response you are sending has a blank element at the top of it.  Or the response handler that is processing the response into the select element is doing so in a manner the creates or leaves a blank element at the top of the select elements child nodes.