Saturday, March 20, 2010    
Home My Books Blog ColdFusion About Me Back    

Calendar
<< Jun 2007 >>
S M T W T F S
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
             

Search

Categories
 • Acrobat (3) [RSS]
 • Adobe (90) [RSS]
 • AdobeMAX06 (45) [RSS]
 • AdobeMAX07 (59) [RSS]
 • AdobeMAX08 (66) [RSS]
 • AdobeMAX09 (39) [RSS]
 • AdobeMAX10 (1) [RSS]
 • AIR (219) [RSS]
 • Appearances (191) [RSS]
 • Books (72) [RSS]
 • CFEclipse (15) [RSS]
 • ColdFusion (1381) [RSS]
 • Data Services (34) [RSS]
 • Fish Tank (5) [RSS]
 • Flash (197) [RSS]
 • Flex (498) [RSS]
 • Home Automation (5) [RSS]
 • Jobs (116) [RSS]
 • JRun (14) [RSS]
 • Labs (43) [RSS]
 • LiveCycle (34) [RSS]
 • MAX (232) [RSS]
 • Mobile (120) [RSS]
 • Regular Expressions (17) [RSS]
 • RIA (21) [RSS]
 • SQL (40) [RSS]
 • Stuff (536) [RSS]
 • Tips (CF Studio) (80) [RSS]
 • Tips (CF) (795) [RSS]
 • Tips (Dreamweaver) (91) [RSS]
 • Tips (Flex Builder) (2) [RSS]
 • Using CF (162) [RSS]

Other BLOGs
 • Charlie Arehart
 • Lee Brimelow
 • Ray Camden
 • Christophe Coenraets
 • Sean Corfield
 • Mihai Corlan
 • Cornel Creanga
 • Mark Doherty
 • John Dowdell
 • Danny Dura
 • Enrique Duvos
 • Steven Erat
 • Kevin Hoyt
 • Serge Jespers
 • Adam Lehman
 • Duane Nickull
 • Miti Pricope
 • Andrew Shorten
 • Ryan Stewart
 • James Ward
 • Greg Wilson
 • Full As A Goog

RSS Feeds
 • Feed
 • Subscribe

Join my mailing list and find out about new books and other topics of interest.

Thoughts, ideas, tips, musings, and pontifications (not necessarily in that order) by Ben Forta ...
NOTE: This is my personal blog, and the opinions and statements voiced here are my own.

Viewing By Entry / Main
June 4, 2007

ColdFusion Ajax Tutorial 4: Partial Page Updates

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.

TrackBacks
There are no trackbacks for this entry.

No trackback URL. Trackbacks are only allowed via interactive form.

Comments
Hello!,
I have two <cfdivs> on a page: Cfdiv1 and cfdiv2. I have a form in cfdiv1 and wish to update content in cfdiv2 when a submit button is clicked in cfdiv1.
Is this possible with cf8/9? Can someone please show me how to do this?

Thanks in advance.
# Posted By KRoman | 11/2/09 8:08 PM

  © Copyright 1997-2009 Ben Forta, All Rights Reserved