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

 

Archives
RSS

 

 

 

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(){
  $.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..
Share |
Posted by admin at 10:19 PM| Link  |  0 comments |

 

01 February 2010

JQuery Nuts and Bolts

a quick entry, the loader graphic
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
Share |
Posted by admin at 12:00 AM| Link  |  0 comments |

 

Addressing the death of ColdFusion

yet again...sigh

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…

Share |
Posted by admin at 12:00 AM| Link  |  0 comments |

 

 

© 2011 Scott Stewart / SSTWebworks
Design by Contented Designs