Thanks for the explanation and code, Daemach!
As I study it, it begins to make more and more sense.
(Not to say that I could write it, but at least I'm beginning
to understanding how the parts relate...)
I'll work with this code some and see what I can do.
I'll check out the link to openwddx.org, too.
btw... what are ser/deser functions?
Rick
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Daemach
Sent: Thursday, March 01, 2007 12:54 AM
To: discuss@jquery.com
Subject: Re: [jQuery] Need some guidance...
Ugh - that's right. It is actually more simple than it looks - it makes a
lot more sense when you actually get to use it ;)
Well then, this should work for you
(http://jquery.bassistance.de/api-browser/#postStringMapFunction): I hacked
Christopher Jordan's example because I like the loop over the form fields to
build the object :)
I would highly recommend using firebug with firefox either in the console or
on the net tab to watch how all of this works. You can see the actual post
and what is returned that way.
This example returned a simple string. You can also download the wddx sdk
at www.openwddx.org to get the javascript ser/deser functions. This will
allow you to return complex objects such as queries, structures, arrays or
combinations of those using <cfwddx action="cf2wddx"> (available in cf 4.5)
in the same manner. When the wddx packet hits your processing function you
would deserialize the packet into a javascript object then loop over it or
what ever else you need to do to deal with the results.
===
Calc page:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
function CalculateMortgage(){
var Params = {};
// select all inputs of type text
$("input:text").each(function(){
Params[$(this).attr("name")] = $(this).val();
});
// "post" the form. The Param object mimics form fields
$.post("/path/to/yourdatapage.cfm", Params,
function(data){
// this is the processing function.
// append what you get back to the element
with ID = Result after
clearing its contents
$("#Result").empty().append(data);
}
);
}
</script>
<form name="f">
<table>
<tr>
<td align="right"><strong>Principal:</strong></td>
<td><input type="text" name="Principal"></td>
</tr>
<tr>
<td align="right"><strong>Interest
Rate:</strong></td>
<td><input type="text" name="InterestRate"></td>
</tr>
<tr>
<td align="right"><strong>Duration:</strong></td>
<td><input type="text" name="Duration"></td>
</tr>
<tr>
<td align="right"><strong>Result:</strong></td>
<td><span id="Result"></span></td>
</tr>
<tr>
<td align="right"> </td>
<td><input type="button" value=" Calculate "
onClick="CalculateMortgage();return false;"></td>
</tr>
</table>
</form>
========
Page from which you are getting the data:
<cfsetting showdebugoutput="no"><cfset calc = form.Principal *
form.InterestRate * form.Duration>
<cfcontent reset="yes"><cfoutput>#DollarFormat(calc)#</cfoutput>
Rick Faircloth wrote:
Hi, Daemach...
Thanks for the guidance, but unfortunately, I'm still using
CF 4.5, so CFC's are obviously not an option. I plan to
upgrade this summer to CF 8 and catch up with everyone.
I was looking over your code, too... that complicated stuff!
(For someone just starting out, anyway...) After looking over
the code, I can begin to see how it's being done... just wish
I could use AjaxCFC!
Thanks for your time and help!
Rick
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Daemach
Sent: Wednesday, February 28, 2007 6:00 PM
To: discuss@jquery.com
Subject: Re: [jQuery] Need some guidance...
Hi Rick -
This is one of those things I would use ajaxCFC for since it handles
serialization automatically. The idea here is that you need to serialize
the values of your form fields, send them to the server, deserialize,
calculate and put the results into some kind of structure which gets
serialized again and returned to the browser for processing which starts
with deserializing. Dealing with the serialization/deserialization
transparently is what makes ajaxCFC so great.
First, download ajaxcfc here:
http://www.robgonda.com/blog/projects/ajaxcfc/download.cfm
in the zip file drill down to ajaxCFC/branches/jquery/core/. Put the
.cfc's
in some accessible folder on your web server, then copy everything inside
the /js folder to your javascript repository - I create a subfolder to
keep
it separate: /js/ajaxCFC. That's it for the install.
This sample code should get you started. I stuck the ajax call directly
into the click event on the button, but you could put all of that in a
separate function and then call the function from the click event handler
if
you want.
===========================
your html/cfm page with the calculator:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript"
src="/js/ajaxCFC/jquery.AjaxCFC.js"></script>
<script type="text/javascript">
// additional files
$.AjaxCFC({require:'json'});
// more additional files
// $.AjaxCFC({require:'json,wddx,dDumper,log4j,DWRSyntax,blockUI'});
// optional global settings
// using these setters also automatically include dependencies
//$.AjaxCFCHelper.setAjaxLoadImage("#snort","/images/ajax_circleball.gif");
$.AjaxCFCHelper.setDebug(false);
$.AjaxCFCHelper.setBlockUI(false);
$.AjaxCFCHelper.setUseDefaultErrorHandler(false);
$.AjaxCFCHelper.setSerialization('json'); // json, wddx
$(document).ready( function() {
// Add click event to button
$('#ajaxit').click(function() {
//create an object to pass to the cfc. can also be an
array, simple
value, whatever you want. Objects turn into cf structures.
var obj = {firstVal:$('#firstVal').val(),
secondVal:$('#secondVal').val(),
thirdVal:$('#thirdVal').val(), randomstring:"why not"}
//do ajax call
$.AjaxCFC({
url: "/pathto/your.cfc",
method: "calculate",
data: obj,
// can be an anonymous function, or the name of the
function that will
handle the return results.
success: showResults
});
});
});
function showResults(data){
// data will be whatever the cfc passed back in js format -
structure in
this case to make it easy.
$('#result').val(data.results);
}
</script>
firstVal: <input id="firstVal" name="firstVal" type="text"><br>
secondVal: <input id="secondVal" name="secondVal" type="text"><br>
thirdVal: <input id="thirdVal" name="thirdVal" type="text">
<input id="ajaxit" type="submit" name="ajaxit" value="AjaxIt">
<hr>
result: <input id="result" name="result" type="text">
================
Your cfc file should go in the same folder as ajax.cfc:
<cfcomponent extends="ajax">
<!---
<cfscript>
setDebugMode('request');
</cfscript>--->
<cffunction name="calculate" output="no" access="private">
<cfscript>
obj = arguments;
data = structNew();
temp = obj.firstVal + obj.secondVal + obj.thirdVal;
StructInsert(data, "results", temp);
</cfscript>
<cfreturn data>
</cffunction>
</cfcomponent>
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/
--
View this message in context:
http://www.nabble.com/Need-some-guidance...-tf3323366.html#a9240414
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
