Ajax type applications allow developers to update parts of a web page without needing to refresh the entire page. Click on a link and another area of the screen is updated, click a toggle arrow to expand and collapse an inline detail box, submit a form and receive confirmation without updating the page, and so on.
This type of interaction uses asynchronous HTTP calls back to the server (to get data, or process form submissions, and so on) and client side JavaScript to update specific parts of a page (usually defined using <DIV> tags).
ColdFusion 8 makes this type of interaction very simple by allowing controls to be bound to other controls, so that when one control changes (or an event occurs) a second control may be updated by making an asynchronous call to ColdFusion on the server.
To demonstrate this, here is a simple example. A list of art items is displayed in a <SELECT> control, and clicking on any item updates a description below it. The list of descriptions are not in the client, rather, when an art item is selected the following CFC method is invoked on the server:
<cfcomponent output="false">
<cfset THIS.dsn="cfartgallery">
<!--- Get art description --->
<cffunction name="getArtDescription" access="remote" returnType="string">
<cfargument name="artid" type="numeric" required="true">
<!--- Define variables --->
<cfset var data="">
<cfset var result="">
<!--- Get data --->
<cfquery name="data" datasource="#THIS.dsn#">
SELECT description
FROM art
WHERE artid = #ARGUMENTS.artid#
</cfquery>
<!--- Got it? --->
<cfif data.RecordCount IS 1>
<cfset result=data.description>
</cfif>
<!--- And return it --->
<cfreturn result>
</cffunction>
</cfcomponent>
This simple method accepts an artid and returns the art description as a string.
Now for the client side code:
<!--- Get artlist --->
<cfquery datasource="cfartgallery" name="art">
SELECT artid, artname
FROM art
ORDER BY artname
</cfquery>
<!--- Display art list --->
<cfform>
<cfselect name="artid"
query="art"
display="artname"
value="artid"
size="10" />
</cfform>
<!--- DIV for description --->
<cfdiv bind="cfc:art.getArtDescription({artid})"
style="background-color:grey; color:white; height:100; width:200" />
First the art list is retrieved (and yes, this is a bad example, the query should have been in the CFC too, not in the client, but I wanted to keep this example as simple as possible). <CFSELECT> is used to display the list of art items. And then <CFDIV> is used to define a <DIV> and to provide a binding. This <CFDIV> points to the previous CFC method, and passes {artid} (the name of the <SELECT> control) as an argument. This way, whenever the selection in the <SELECT> changes, the binding is fired, the CFC method is invoked, and the display is updated with the returned string.
http://samfarmer.instantspot.com/blog/
http://www.youtube.com/watch?v=whjPKSqPl6c
--- Ben
Duncan, not very well, and that's a hole with any and all Ajax stuff, JavaScript is an absolute requirement. Fortunately that's not as big an issue nowadays, but if it is a concern for your user base, then you'd be best off avoiding anything Ajax.
--- Ben
This problem happens when you are using the Application.cfc method onRequestEnd() to display content.
Suppose my Application.cfc onRequestEnd() method looks like this:
<cffunction name="onRequestEnd" output="true" returnType="void" description="Runs at the end of a request, after all other CFML code">
<cfargument name="targetPage" type="string" required="yes" />
THIS IS HTML CONTENT in Application.onRequestEnd<br>
</cffunction>
The return from CFC invocation in the bind argument will ALSO return content from the onRequestEnd() method.
I'm working on some code that will display a list of state abbreviations from a list of selected states (checkboxes).
*** IMPORTANT ***
CF8 suggests that you append "cfdebug" to the URL for debugging ajax calls. I wish that I had noticed this before it would have saved me at least 90 minutes.
*** IMPORTANT ***
After appending "cfdebug=1" to the URL, I noticed that it can display the calls to the CFC in real time. This is an awesome debugging tool. The following is an example of what was returned when the onRequestEnd() method used the snippet above:
info:http: CFC invocation response: "KY, ND" THIS IS HTML CONTENT in Application.onRequestEnd
Now see what it looks like when Application.onRequestEnd() does nothing:
info:bind: Assigned bind value: 'KY, ND' to StateProvinceList.innerHTML
info:http: CFC invocation response: "KY, ND"
Notice that when there is content in onRequestEnd() that the bind event never occurs. It just gets as far as the CFC invocation response.
So, if you are using onRequestEnd() to display debugging info or other content, I would recommend moving this code to the end of onRequest() or find some other place for it.
The ARTID argument passed to the getArtDescription function is not of type numeric.
Now there is no error but no description is displayed either.
What I'm doing wrong?
Thx
Thx
With my setup, using returntype=string, I get just one record, and I should get many.
When I try to use returntype="query" in my cfc I just get "[object Object]" in my div. ??