Ben Forta

AdobeStock_455007340

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

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 control) as an argument. This way, whenever the selection in the

20 responses to “ColdFusion Ajax Tutorial 4: Partial Page Updates”

  1. Sam Farmer Avatar
    Sam Farmer

    This is an extremely cool new tag. I blogged about it this morning, with a different type of example, along with a screencast that is up on Youtube.
    http://samfarmer.instantspot.com/blog/
    http://www.youtube.com/watch?v=whjPKSqPl6c

    Reply
  2. Gary Funk Avatar
    Gary Funk

    Does anyone have an example of an expandable directory tree done in Ajax?

    Reply
  3. Ben Forta Avatar
    Ben Forta

    Gary, I am working on that for one of the next posts, server-side directory tree browsing using an Ajax <CFTREE>.
    — Ben

    Reply
  4. Gary Funk Avatar
    Gary Funk

    How did I guess that. While your at it, can you show us how to rewrite Major BBS, PCBoard, TBBS and Wildcat so those of us that remember those days, can go back to them.

    Reply
  5. duncan Avatar
    duncan

    How does this work when Javascript is disabled or not available? The same question applies to all the new cfajax functionality. Thinking here about the accessibility of pages; is the information still available to people using text readers etc, or do we need to roll our own accessible pages using javascript detection etc?

    Reply
  6. Ben Forta Avatar
    Ben Forta

    Gary, that tree example was just posted.
    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

    Reply
  7. Cory Miller Avatar
    Cory Miller

    In the documentation that ships with the beta – the cfdiv tag has an example that uses <cfdiv source="page.cfm?urlvar={something}" /> but when I try to use run it I get an error stating ‘required attribute ‘bind’ not provided’ (and I tried putting the page source as the bind attribute but that didn’t work). So how can I do this – is the documentation wrong (pg 887 of the downloadable pdf file).

    Reply
  8. Scott Jibben Avatar
    Scott Jibben

    After a couple of frustrating hours of debugging, I found a problem with binding to a CFC.
    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.

    Reply
  9. Victor Avatar
    Victor

    I’m trying to run this example and I’m getting th efollowing error:
    The ARTID argument passed to the getArtDescription function is not of type numeric.

    Reply
  10. Victor Avatar
    Victor

    OK, I have fixed the erorr by adding the selected atribute to the cfselect.
    Now there is no error but no description is displayed either.
    What I’m doing wrong?
    Thx

    Reply
  11. Victor Avatar
    Victor

    FIX IT. The color of the text that was specified in the <cfdiv was white so it was actually displayed but I could not see it,
    Thx

    Reply
  12. Preserved Avatar
    Preserved

    Can you bind a CFDIV to a cfc with returntype’="query"?
    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. ??

    Reply
  13. Russ Avatar
    Russ

    The problem I’ve run into when binding a cfselect to a cfdiv is when a form in the cfdiv creates a new record, how do you trigger an update of the cfselect’s binding so that the new record is reflected in the cfselect list?

    Reply
  14. manoj kothari Avatar
    manoj kothari

    Please solve this problem:
    How the ‘cfdiv’ bind with the return value of a function in a same page?
    For example:
    <!—Page.cfm—>
    <cffunction name=’addRecord’>
    <!—Function body —>
    <cfreturn rtnValue>
    </cffunction>
    <cfajaxproxy tags=’cfform,cfdiv’ >
    <cfform name=’frm’>
    <cfinput type=’text’ name=’txtValue’ />
    </cfform>
    <cfdiv id=’divName’ bind=’addRecord({txtValue})’ />

    Reply
  15. stefan Avatar
    stefan

    Hello, I need some help please:I want to make a partial page update from the following:
    on top of the page to have a text input box and next to it a search button. When I press the search button this would trigger a cfc (the cfc would query the results from a database based on a keyword entered in the text inputbox) and display the results from the called cfc ON THE SAME PAGE, below the textinput and search button area. How can I do that? Thanks a million for your help!

    Reply
  16. Chris Avatar
    Chris

    Hey guys,
    Something strange is going on. I am using CF8 and I have multiple records in a table and they all display fine with a table within a cfoutput query="foo". However I want to use cfdiv instead to take advantage of partial page updates.
    So I am binding my cfdiv to a cfc and when it runs it only displays the first record. I have had similar problems with using cfoutput query and divs in the past. Is there something about divs that don’t allow multiple results to display?
    Here is my code:
    ——————————————————————————————————
    <cfinvoke component="services.PostService" method="getPosts" returnvariable="post">
    <cfinvokeargument name="numberOfRows" value="4">
    </cfinvoke>
    <cfoutput>
    <cfdiv bind="cfc:services.PostService.getPosts(4)">
    #post.description# <br />
    </cfdiv>
    </cfoutput>
    ——————————————————————————————————-
    Here is my component in case you need to look at it:
    <cfcomponent output="no">
    <cffunction name="getPosts" access="remote">
    <cfargument name="numberOfRows" type="numeric" required="yes">
    <cfset var getPosts = "">
    <cfinclude template="../dal/qry_getPosts.cfm">
    <cfreturn getPosts>
    </cffunction>
    </cfcomponent>
    Thanks for any help you can provide.
    Thank you,
    Chris

    Reply
  17. KRoman Avatar
    KRoman

    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.

    Reply
  18. Rafael Avatar
    Rafael

    Hello! I have a question, I am trying to display an image after a selection is made with cfselect…
    here is a part of the form where i make the selection:
    <cfselect name="pais_id" id="pais_id" required="yes" value="pais_id" display="pais_nom" bind="cfc:pais.getPais()" bindonload="true" />
    on the cfc i have…
    <cffunction name="DatosPais" access="remote" returnType="any">
    <cfargument name="pais_id" type="any" required="true">
    <!— Define variables —>
    <cfset var data="">
    <cfset var result=0>
    <!— Get data —>
    <cfquery name="data" datasource="enmovimiento">
    SELECT pais_foto
    FROM paises
    WHERE pais_id = #ARGUMENTS.pais_id#
    </cfquery>
    <!— Convert results to array —>
    <cfset result=data.pais_foto>
    <!— And return it —>
    <cfreturn result>
    </cffunction>
    I get the filename to display with this…
    <cfdiv bind="cfc:pais.DatosPais({pais_id})" />
    I would like to know how to display the image…
    Any help will be greatly appreciated!

    Reply
  19. Rafael Avatar
    Rafael

    Hello! I have a question, I am trying to display an image after a selection is made with cfselect…
    here is a part of the form where i make the selection:
    <cfselect name="pais_id" id="pais_id" required="yes" value="pais_id" display="pais_nom" bind="cfc:pais.getPais()" bindonload="true" />
    on the cfc i have…
    <cffunction name="DatosPais" access="remote" returnType="any">
    <cfargument name="pais_id" type="any" required="true">
    <!— Define variables —>
    <cfset var data="">
    <cfset var result=0>
    <!— Get data —>
    <cfquery name="data" datasource="enmovimiento">
    SELECT pais_foto
    FROM paises
    WHERE pais_id = #ARGUMENTS.pais_id#
    </cfquery>
    <!— Convert results to array —>
    <cfset result=data.pais_foto>
    <!— And return it —>
    <cfreturn result>
    </cffunction>
    I get the filename to display with this…
    <cfdiv bind="cfc:pais.DatosPais({pais_id})" />
    I would like to know how to display the image…
    Any help will be greatly appreciated!

    Reply
  20. Grietje Avatar
    Grietje

    Does anybody knows a way to make the content of the <cfdiv> visible for search engine bots?
    For instance Google sees the description of an advertiser on my website like this:
    <div id="Category">
    </div>
    But I would like Google to be able to see this:
    Chef and owner of the Limassol based restaurant Ta Piatakia (Little Plates) Roddy Damalis has not only stirred up the culinary scene in Cyprus, he also managed to become one of the island’s most celebrated chefs. Ta Piatakia may be categorized as a Cypriot restaurant, but the menu is nothing like that of a local taverna, even though the ingredients are all local, traditional produce.
    Am I the only one who has a problem with this side effect of cfdivs?

    Reply

Leave a Reply