This entry is about the "Ajax Post", sending data to a form action and returning results to a receiving div. I want to throw out big mad props to John Arrowwood from the JQuery List for parameterizing and wrapping my code in a function.

What this piece does is take form data from a named form, post it to an action page which can point to (or contain business logic), and then display a sucess page in a desgnated div.

The form exists within a global div called 'content-box'.

The original code:

$("#getTOByWeek").live("click", function(){
$.ajax({
type:"post",
url:"webapps/hr/admin/actions/act_adminHR_Handler.cfm",
data:$("#toByWeek").serialize(),
cache:"false",
success: function(){
$("#content-box").load("webapps/hr/admin/display/dsp_TOList.cfm");
},
error: function(){
alert("data");
}
});
return false;
});

#getTOByWeek is the button that triggers the post., act_adminHR_Handler.cfm is the called action which in this case invokes a ColdFusion component which contains the business logic.. The form data is contained in #toByWeek and is serialized in the post.

When you look at the sucess function it loads dsp_TOList.cfm in #content-box,. Dsp_TOList.cfm, contains a generated table based on a query who's results are modified by the business logic invoked by the action template.

What I was running into, being a JQuery noob at the time was that I had working code but it wasn't parameterized or reusable, a brief post to the JQuery list brought the following:

(function($){
var defaults = {
button: '#buttonId',
form: '#formId',
target: '#targetId',
url: '/change/me',
page: '/change/me/too',
};
clickToLoad = function( options ) {
var o = $.extend({},defaults,options);
$(o.button).live('click',function(){
$.ajax({
type: 'post',
url: o.url,
data: $(o.form).serialize(),
cache: false,
success: function(){$(o.target).load(o.page)},
error: function(){alert('data');},

 });
return false;
});
})(jQuery);

and it's called this way

clickToLoad({
button: '#theButton',
form: '#theForm',
target: '#theDiv',
url: '/path/to/data/handler',
page: '/page/to/load',
});

This gives you a reusable Ajax form handler..