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

The infamous spinner as done by JQuery:

Create a div that contains the image that you want to use as a "loader" image.

<div id="loader">
  <img alt="" src="path/to_graphic" />
</div>

It just takes a small piece of Javascript (JQuery) to make the magic happen

$('#loader').hide() //this initially hides the div
   .ajaxStart(function(){
     $(this).show(); // show the div when the Ajax call starts
   )}
   .ajaxStop(function(){
     $(this).hide(); //hide the div when the Ajax call stops
   )};

Place the loader div within the div that's receiving the results of the ajax call, and JQuery code with the rest of your JQuery code and you have a quick and dirty loader

Terry  Ryan posted a link to a StackOverflow thread asking about the merits of ColdFusion… while the thread itself is closed, I’m going to post my own commentary here.

Many fellow CF devs came out in support of the product, which we should. What surprised me was the incredible lack of knowledge on the part of the naysayers. One in particular, a humorless little Frenchman named Pascal Thivent…