<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:
<script language="javascript" src="scripts/index_handlers.js"></script>
<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.
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>
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!
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;
}
}
