Alright... now I've got this working very well.
The only problem I have now is validation.
I normally submit a page back to itself, run some
checks on the form values and throw up any errors messages
before the form processes.
However, with the function "CalculateMortgage" below, I can't do that.
So I need some input on how to use jQuery for validation.
Is there some info somewhere that will walk me through that?
I need the following validation for form input:
Principal: There must be an entry and it must be a number after
all "$ , ." are taken out.
Interest: There must be an entry and it must be a number after
a % sign which might be entered is taken out.
Years: There must be an entry and the entry must be numerical.
Can anyone point me to some validation technique info that I could
draw from?
Thanks!
Rick
===
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/
>
>
--
View this message in context:
http://www.nabble.com/Need-some-guidance...-tf3323366.html#a9244359
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/
