A while back, I mentioned to Rey that I thought Mike Alsup's taconite plugin was a nearly perfect bridge for CF programmers learning ajax. It's time to see if I was right ;)
First of all, go here and download the plugin: http://www.malsup.com/jquery/taconite/#download I install all of my javascript to a folder called /js in my web root. If you do something different, update the script tags below. Copy and paste this into a file called CalcTest.cfm and put it somewhere on your server then load it in firefox. It ain't pretty, but it works on my end. I don't think I have anything in here that isn't in cf4.5 - let me know if there is. Now open firebug and flip to the console then start typing in the fields. As you blur them by tabbing out, watch what happens in the console. Open up some of the posts and look at the response data. Once you have played with it for a while, go back to the taconite site and read every page thoroughly. Take extra time in the examples and debugging page: http://www.malsup.com/jquery/taconite/#overview All taconite is doing is converting the XML in the taconite block to jquery calls - the command I'm using here is replaceContent - that's actually a jquery plugin that does $("yourselector").empty().append("the stuff you passed between the replacecontent tags"); You're familiar with creating tag-based markup - this is the same as making a table. Sort of :) Read the code, watch the output in the console and if something starts to click, you owe Mike a beer ;) =============================================================== <cfsetting showdebugoutput="no"> <cfif isDefined('form.fieldnames')> <!---init lacking list---> <cfset lacking = ""> <!---Clean the Numbers---> <cfloop list="#form.fieldnames#" index="i"> <!---Replace anything that isn't a number with ""---> <cfset "Form.#i#" = reReplaceNoCase(evaluate(i),"[^0-9]","","ALL")> <!---After cleaning, if it's not numeric then we still need this number---> <cfif not isNumeric(evaluate(i))> <cfset Lacking = listPrepend(lacking,i)> </cfif> </cfloop> <!---if there is nothing in the "lacking list" calculate!---> <cfif not listLen(lacking)> <cfset interest = form.interest/(12*100)> <cfset payment = form.principal*(interest/(1-(1+interest)^-( form.years*12)))> </cfif> <cfcontent type="text/xml" reset="yes"> <cfheader name="Content-Type" value="text/xml"> <cfoutput> <taconite> <replaceContent select="##Result_Principal"> <cfif listFindNoCase(lacking,"Principal")>Please enter a valid principal</cfif> </replaceContent> <replaceContent select="##Result_Interest"> <cfif listFindNoCase(lacking,"Interest")>Please enter a valid interest rate</cfif> </replaceContent> <replaceContent select="##Result_Years"> <cfif listFindNoCase(lacking,"Years")>Please enter a number of years</cfif> </replaceContent> <replaceContent select="##Result"> <cfif listLen(lacking)>Waiting for numbers...<cfelse>Your payment is: #DollarFormat(payment)#!</cfif> </replaceContent> </taconite> </cfoutput> <!---If there are form fields submitted, this must be an ajax call. Otherwise show the form---> <cfelse> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Mortgage Calculator</title> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.taconite.js"></script> <script language="JavaScript" type="text/javascript"> $.taconite.debug = true; $(document).ready(function(){ $("input:text").each(function(){ $(this).blur(function () { var Params = {}; $("input:text").each(function(){ Params[$(this).attr("name")] = $(this).val(); }); $.post("CalcTest.cfm",Params); }); }); }); </script> </head> <body> <h3>Mortgage Calculator</h3> <form id="Calculate_Mortgage" Name="Calculate_Mortgage"> <table> <tr> <th align="right">Principal:</th> <td><input tabindex="1" id="Principal" name="Principal" type="Text"></td> <td><div id="Result_Principal"></div></td> </tr> <tr> <th align="right">Interest:</th> <td><input tabindex="2" id="Interest" name="Interest" type="Text"></td> <td><div id="Result_Interest"></div></td> </tr> <tr> <th align="right">Years:</th> <td><input tabindex="3" id="Years" name="Years" type="Text"></td> <td><div id="Result_Years"></div></td> </tr> <tr> <th align="right">Result: </th> <td><div id="Result"></div></td> <td> </td> </tr> </table> </form> </body> </html> </cfif>
_______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
