Classes (1)  /  ColdFusion (14)  /  ColdFusion Jobs (2)  /  General (7)  /  JQuery (7)  /  Quick and Dirty (3)  / 
Search Blog






Adobe Community Expert in ColdFusion


Adobe Ceritfied Instructor


CTT+ Certified Technical Trainer


Hosted By:

Alurium Hosting

Powered by BlogCFM v1.14

22 February 2010
JQuery Nuts and Bolts
The "Ajax Post"

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(){
     success: function(){
     error: function(){
  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:


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


and it's called this way
        button:  '#theButton',
        form:    '#theForm',
        target:  '#theDiv',
        url:     '/path/to/data/handler',
        page:    '/page/to/load',

This gives you a reusable Ajax form handler..
Posted by admin at 10:19 PM | Link | 0 comments

No comments found.

Post a comment (login required)


© 2011 Scott Stewart / SSTWebworks
Design by Contented Designs