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..
No comments found.
Post a comment (login required)