cfselect bindings

[Guest]

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

Queries.cfc

<cfcomponent>

    <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

      </cfquery>

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

      <cfreturn result>
    </cffunction>
</cfcomponent>

================================================================================

test.cfm

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

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

</cfform>

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?

[Guest]

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?

[Guest]

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.

[ilssac]

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.

http://www.w3schools.com/Ajax/Default.Asp

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

HTH

Ian

[Guest]

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?

[ilssac]

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.		Articles		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.		Articles		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.		Articles		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.		Articles		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.		Articles		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.		Articles		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!		Articles		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.		Articles		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.		Articles		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.		Articles		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

http://livedocs.adobe.com/coldfusion/8/htmldocs/ajaxui_1.html#1096321

Using Ajax Data and Development Features

http://livedocs.adobe.com/coldfusion/8/htmldocs/ajaxdata_01.html#1156467

HTH

Ian Skinner

[Guest]

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?

[ilssac]

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.

[Guest]

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?

[ilssac]

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.