Huffy,
Are you looking to run the delete query from an Ajax call and then have the JavaScript output your message on return of the call? I've used jQuery in CF apps to accomplish those sort of tasks. To do so, I've used code along the lines of the excerpts below. It's a good bit of code for the post but I thought you might like to see snippets of how you can get CF and jQuery to work together.
JavaScript (jQuery) Code:
$(document).ready
(
function() // this function sets up the Ajax call for jQuery
{
var options = {
target: '#OUTPUTDIVID', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse, // post-submit callback
resetForm: true, // resets form after actions complete (successfully)
dataType: 'json' // 'xml', 'script', or 'json' (expected server response type)
// other available options:
//url: url // override for form's 'action' attribute -- I prefer to rely on the action attribute for the form to tell jQuery where to access the server-side function but you don't have to and can explicitly set it here.
//type: type // 'get' or 'post', override for form's 'method' attribute
//clearForm: true // clear all form fields after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind form using 'ajaxForm'
$('#FORMIDVALUE').ajaxForm(options);
});
// pre-submit callback, validate your data, etc.
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string to display it
var queryString = $.param(formData);
// some sample error checking you can do with the pre-submit callback
var myField = $("#field").val();
var errors = 0;
if (myField == null || myField == '')
{
errors++;
}
if (errors > 0)
{
alert ("Errors were found on the form");
return false;
}
else
{
return true;
}
}
// post-submit callback, display your error message, success message, etc.
function showResponse(responseText, statusText) {
// show results
$( '#OUTPUTDIVID' ).html( '<p>Form Submission Status: ' + statusText + '<br/>(reloading new staff data...)</p>' );
waitToFade();// a "fancy" function in my code that makes a Fade/Glow effect on my output div
}
ColdFusion/Client code
Here's the code I use for my form tag (generated from a CFC):
<form action="/model/MyCFC.cfc?method=save&returnformat=JSON" method="post"
name="FORMIDVALUE" id="FORMIDVALUE">
...fields
</form>
Elsewhere, in my HTML, I have a DIV element I use in the post-submit callback function (above) to output a message to the user:
<div id="OUTPUTDIVID"></div>
CFC
Here's my save method of my CFC that gets called based on the action attribute of the form tag above and the jQuery function that binds my form to the Ajax function:
<cffunction name="save" output="true" access="remote" returntype="void">
...other code
<cfscript>
// return object
msg = StructNew();
msg.message = "Staff deleted. Previouly published staff has been removed from the system.";
</cfscript>
<cfoutput>#SerializeJSON(msg)#</cfoutput>
</cffunction>
The important thing is that my access attribute is set to "remote". You *must* have it set to remote or no Ajax calls will work. If you're returning JSON or XML, make sure you also set output to true so that CF outputs your JSON data (or XML data) so that jQuery can "read" it.
AdChoices