Rick,
First will you be using Rob Gonda's AjaxCFC for jQuery? I'd recommend
it, even though it's still in alpha3. I'm using it on a client's
application and it works just fine.
So for this mortgage calculator, you've got your form with the fields
for input (technically speaking this doesn't even have to be an html
form since you'll be using Ajax to send the data and receive the
calculation):
<script type="text/javascript" src="Include/js/jquery.js"></script>
<script type="text/javascript"
src="Include/js/jquery.AjaxCFC.js"></script>
<script
type="text/javascript">$.AjaxCFC({require:'json,wddx,dump,log4j,someotherjsfiles'});</script>
<script>
function CalculateMortgage(){
// first use jQuery to get all the field values we'll need to
make the calculation
// this example assumes the very simple form I've got listed
below.
var Params = {};
// select all inputs of type text
$("input:text").each(function(){
Params[$this.name] = $this.value;
});
//once this is done above we'll have an object (like a CF
structure) which is the equivalent of {"VarName":"Value",
"VarName2":"Value"}
// these are named arguments, so you'll notice in the code below
that unnamedargs is set to false.
$.AjaxCFC({
url: "CFC/MortgageCalculator.cfc",
method: "CalculateResult",
data: Params,
unnamedargs: false,
serialization: "string",
success: function(data) {
// great we got our calculation back. So now append it
to the span tag holding the result.
$("#Result").empty().append(data);
}
});
}
</script>
<form name="f">
<input type="text" name="Principal">
<input type="text" name="InterestRate">
<input type="text" name="Duration">
<span id="Result"></span>
<input type="button" value=" Calculate "
onClick="CalculateMortgage();">
</form>
Your CFC would look something like:
<cfcomponent extends="ajax.cfc">
<cffunction name="CalculateResult" returntype="numeric">
<cfscript>
// Rick, you should note, that this is just the way *I*
handle arguments coming into a cfc and there are possibly better ways.
var my = StructNew();
// this loop takes everything that was passed into the
arguments structure and puts it in the local 'my' structure.
// I do this because 'my' has been var'd so everything in it
is var'd as well. This means that throughout my function
// I don't have to var anything else.
for(my.KeyName in Arguments){
"my.#my.KeyName#" = Arguments[my.KeyName];
}
// now do the calculation... I'm not going to pretend that I
know how to do the interest calculation off the top of my head.
// I'm assuming you can do this already.
return my.Principal * my.InterestRate * my.Duration; // or
whatever.... you get the idea I hope.
</cfscript>
</cffunction>
</cfcomponent>
The calculated result will be returned to the ajaxcall in the 'success:'
section. Does this make sense? Does it help? If not, let me know where
you need clarification, and I'll see what I can do. :o)
Cheers,
Chris
Rick Faircloth wrote:
Hi, all...
I've just started using jQuery recently and now
I'm trying to understand how to use it with AJAX
and I just don't know enough about how it works
to get started on a fairly simple app. The sample app I've
been tinkering with sends a URL variable for a User_ID
using AJAX to a CF page, which runs a query and
returns the info to the calling page and appends
it to the body. I'd like to send results back to the
form fields, as well as the calculated result.
I just don't have a clue how to set this up.
I have a mortgage calculator and I want the user
to be able to enter the principal, interest rate,
and duration in years, then run a calculation on it
and return the result.
I've set this up in a regular form that submits back
to the page it's on and it works fine. It's coded in CF.
I'd like to be able to calculate and return the results using AJAX.
I've worked some very simple code using AJAX (actually
it was given to me), but I have no idea how to code for
the above scenario.
Would anyone care to give this CF'er some guidance
on creating this small jQuery/CF/AJAX app?
Thanks for any help!
Rick
------------------------------------------------------------------------
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
http://www.cjordan.us
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
