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..