Mark Drew (Redux)- cf_etc...

a compendium of railo, cfml, cfeclipse and technology topics

Mark Drew (Redux)- cf_etc...

Simple Ajax Forms

November 25, 2005 ·

I stumbled across a great and very simple way to implement AJAX in your applications. The library is available at http://redredmusic.com/brendon/ajform/ It is very simple to implement, download the library, link it and then put an onSubmit handler on your form. I have put an example here How the form is implement is as follows: A link to the library and I linked to a file that handles the preSubmit and on Response functions
<script language="javascript" src="scripts/ajform.js"></script>
<script language="javascript" src="scripts/index_handlers.js"></script>
Then in the form I add a onSubmit handler and define what function handles the pre-submission and the return of the data:
<form action="search.cfm" method="post" onsubmit="javascript:preForm(this);ajform:getSearchData();">
The script uses the action in the form as the submit recipient. In this case a search script, and whatever is returned from that is handled by the getSearchData() function. The search script does a quiery and then loops through the results outputting the html that makes up the images.
<cfquery name="getArt" datasource="#appllication.dsn#">
SELECT ajax_art.*, ajax_artists.FIRSTNAME, ajax_artists.LASTNAME
FROM ajax_art LEFT JOIN ajax_artists ON ajax_art.ARTISTID = ajax_artists.ARTISTID
</cfquery>

<cfoutput query="getArt">
<div class="artIamge" id="art_#ARTID#">
<img src="images/thumbs/#getArt.LARGEIMAGE#" width="50">
</div>
</cfoutput>
In this case, the getSearchData() function simply checks the response from the search function and writes out what is returned to a div.
function getSearchData(data , statusCode , statusMessage){
            if( statusCode != AJForm.STATUS['SUCCESS'] ) {
             alert( statusMessage );
             return false;
             }
             //AJFORM succeeded.              else {
             //we write the output to the div              document.getElementById('contentdiv').innerHTML = data;
             return false;
             }

   }
Very simple and straigh tforward... I like these kind of solutions!
del.icio.us Digg Facebook reddit Google Bookmarks

Tags: ajax

7 responses

  • 1 Richard Jordan // Sep 22, 2008 at 4:11 PM

    I really like this and like the way it returns the results below the search, but is it possible to adapt it (by a novice - this be me) to search an external site, like eBay for instance and simply retrieve a list of results (with or without pictures) and display them as your example version does?

  • 2 Mark Drew // Sep 22, 2008 at 4:11 PM

    You could do this, I have been working on an amazon service to do this. But the page that you post to would be doing the searching, so the quiery page would do the searching function and return the results. I havent looked at how ebay does its api though, you would have to read up, either that or do some cfhttp and screen scrape the results.

  • 3 Richard Jordan // Sep 22, 2008 at 4:11 PM

    thanks for the reply, I'm not experienced with coding at all (so I have no idea what cfhttp is) so I will see if I can get any answers regarding the eBay API and how to send a search query to it, although I'm sure you have to sign up as a member on their developer site to gain any information regarding their API. The Amazon one sounds cool, does that work with an API or use CFhttp like you mentioned?

  • 4 Mark Drew // Sep 22, 2008 at 4:11 PM

    amazon uses a web service. It just depends which programming language you are using. I use coldfusion a lot (funny that) so I use the remote webservice calls.

    I cant help you with the ebay one tho!

    MD

  • 5 Richard Jordan // Sep 22, 2008 at 4:11 PM

    I hope to be using standard JavaScript. I shall dive into the eBay API and see what's what. Cheers for your help.

  • 6 Mark Ireland // Sep 22, 2008 at 4:13 PM

    Can I see the search.cfm code please?

  • 7 Mark Drew // Sep 22, 2008 at 4:13 PM

    The search.cfm code (in this example) is simply a quiery that then outputs the images with links.

    I shall update the post a bit so you can see how I was displaying the images on the main page