Simple Ajax Forms
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/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:
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.
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.
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!