Re: [jQuery] Need some guidance...
Rick Faircloth schrieb: All formatting should be done via external stylesheets. The plugin lets you customize the class used to mark them as error labels, but that's it. What is the class used to mark them as 'error labels'? Is that a class that I assign to them for the stylesheets to rference? By default, both invalid elements and their error label get a class error. You can just style the element with that class, or customize the error class via the errorClass option. -- Jörn Zaefferer http://bassistance.de ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Need some guidance...
Im finding it nearly impossible to get the positioning of the error message relative to the form field. It looks like that's because they are both linked by being lumped together in the class error. I think I could get what I'm after if I could address the error message and invalid elements separately, as in error.message and error.element or whatever. Is there a way separately style the message and the element? Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jörn Zaefferer Sent: Friday, March 09, 2007 12:26 PM To: jQuery Discussion. Subject: Re: [jQuery] Need some guidance... Rick Faircloth schrieb: All formatting should be done via external stylesheets. The plugin lets you customize the class used to mark them as error labels, but that's it. What is the class used to mark them as 'error labels'? Is that a class that I assign to them for the stylesheets to rference? By default, both invalid elements and their error label get a class error. You can just style the element with that class, or customize the error class via the errorClass option. -- Jörn Zaefferer http://bassistance.de ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Need some guidance...
It's good to know that the label and input can be styled separately.
I didn't understand that...
Ok... here's the code I'm using (the part that's relevant, anyway)...
errorPlacement: function(error, element) {
error.insertBefore(element);
},
style type=text/css
label.error {
color: red;
font: Arial Helvetica San-Serif;
font-size: 12px;
position: relative;
top: -21 px;
}
input.error {
position: relative;
left: -144;
}
/style
Now that works for the top formfield, Principal.
But like you mentioned earlier, Jorn, when the error
message is displayed for the bottom two fields,
it's in the wrong position because of the length of the
error message and is on top of the field above.
Have a look at the site again, http://bodaford.whitestonemedia.com
and let me know what you think.
Any tweaks to this solution you can think of?
Rick
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Jörn Zaefferer
Sent: Friday, March 09, 2007 1:23 PM
To: jQuery Discussion.
Subject: Re: [jQuery] Need some guidance...
I don't quite see the problem:
label.error { styles for error messages }
input.error { styles for invalid fields }
--
Jörn Zaefferer
http://bassistance.de
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Need some guidance...
Well, Jorn... I finally figured out the problem... I hadn't assigned an id's to my form fields (Principal, Interest, Years), so I couldn't see the conflict. However, it looks like id's were automatically being assigned to my form fields when published... they were renamed using the form id and then the field name attached, as in #Mortgage_Calculation_FormPrincipal and I guess this id was confusing the validation plug-in (although I'm not quite sure why because even though the automatically generated id name included the form id name, it was not the same name exactly. However, the lesson learned: Always assign id's (unique ones) to every element. So I've got the plug-in working. Now I've got two more questions: 1) How do I format the validation message? In the plug-in settings? Can I put CSS formatting in there? 2) How can I get the messages to display above the form fields? Can the label tag take CSS formatting in-line? Thanks for all your help with this... Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jörn Zaefferer Sent: Tuesday, March 06, 2007 1:48 PM To: jQuery Discussion. Subject: Re: [jQuery] Need some guidance... Rick Faircloth schrieb: Hmmm cant get any reaction from the validation code. Heres my script and html whats wrong with it? (Ive included my show/hide script and my CalculateMortgage script in case theres a conflict) The Mortgage Calculation still runs fine, but when I submit the form without an entry I get a CF error stating that the expression that calculates the payment cant be evaluated. Isnt the validation code supposed to prevent submission when a form field is blank? And in this case, with debug on, it should stop all submissions? But, it's pretty much like the validation code is not even active. I don't get any kind of response from it. I can't find any hint of an issue in your code, so I suspect the problem lies in my plugin. I hope you can be patient enough to wait for beta 1. I've implemented all features, and just need to do a little bit more testing. -- Jörn Zaefferer http://bassistance.de ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Need some guidance...
Rick Faircloth schrieb: Well, Jorn... I finally figured out the problem... I hadn't assigned an id's to my form fields (Principal, Interest, Years), so I couldn't see the conflict. However, it looks like id's were automatically being assigned to my form fields when published... they were renamed using the form id and then the field name attached, as in #Mortgage_Calculation_FormPrincipal and I guess this id was confusing the validation plug-in (although I'm not quite sure why because even though the automatically generated id name included the form id name, it was not the same name exactly. The plugin genereates IDs by combining the form's id with the element's name. Of course that doesn't happen when element already have IDs. Can you tell me what combination of IDs and names caused the confusion? I'd like to fix that. However, the lesson learned: Always assign id's (unique ones) to every element. So I've got the plug-in working. Now I've got two more questions: 1) How do I format the validation message? In the plug-in settings? Can I put CSS formatting in there? All formatting should be done via external stylesheets. The plugin lets you customize the class used to mark them as error labels, but thats it. 2) How can I get the messages to display above the form fields? Can the label tag take CSS formatting in-line? You can use the errorPlacement option to take the placement of the labels in your own hand. So you could append them to the body element and add absolute positioning. Beware that the example of the errorPlacement option is flawed. The second argument is not the ID, but the element itself as a jQuery object. The documentation for the option itself is correct. -- Jörn Zaefferer http://bassistance.de ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Need some guidance...
Can you tell me what combination of IDs and names caused the confusion? What was happening is this: I had a form with an id of #Mortgage_Calculation_Form. I had inputs for the form named Principal, Interest, and Years. However, these inputs did not have any id assigned to them. When the plug-in ran, it created id's for them: For Principal, the id became #Mortgage_Calculation_FormPrincipal. For Interest, the id became #Mortgage_Calculation_FormInterest. For Years, the id became #Mortgage_Calculation_FormYears. It combined the form id with the name of the inputs to form the id... at least that's what I gathered from looking at the response that Firebug returned. All formatting should be done via external stylesheets. The plugin lets you customize the class used to mark them as error labels, but that's it. What is the class used to mark them as 'error labels'? Is that a class that I assign to them for the stylesheets to reference? Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jörn Zaefferer Sent: Thursday, March 08, 2007 5:23 PM To: jQuery Discussion. Subject: Re: [jQuery] Need some guidance... Rick Faircloth schrieb: Well, Jorn... I finally figured out the problem... I hadn't assigned an id's to my form fields (Principal, Interest, Years), so I couldn't see the conflict. However, it looks like id's were automatically being assigned to my form fields when published... they were renamed using the form id and then the field name attached, as in #Mortgage_Calculation_FormPrincipal and I guess this id was confusing the validation plug-in (although I'm not quite sure why because even though the automatically generated id name included the form id name, it was not the same name exactly. The plugin genereates IDs by combining the form's id with the element's name. Of course that doesn't happen when element already have IDs. Can you tell me what combination of IDs and names caused the confusion? I'd like to fix that. However, the lesson learned: Always assign id's (unique ones) to every element. So I've got the plug-in working. Now I've got two more questions: 1) How do I format the validation message? In the plug-in settings? Can I put CSS formatting in there? All formatting should be done via external stylesheets. The plugin lets you customize the class used to mark them as error labels, but thats it. 2) How can I get the messages to display above the form fields? Can the label tag take CSS formatting in-line? You can use the errorPlacement option to take the placement of the labels in your own hand. So you could append them to the body element and add absolute positioning. Beware that the example of the errorPlacement option is flawed. The second argument is not the ID, but the element itself as a jQuery object. The documentation for the option itself is correct. -- Jörn Zaefferer ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Need some guidance...
Rick Faircloth schrieb: Hmmm… can’t get any reaction from the validation code. Here’s my script and html… what’s wrong with it? (I’ve included my show/hide script and my CalculateMortgage script in case there’s a conflict) The Mortgage Calculation still runs fine, but when I submit the form without an entry I get a CF error stating that the expression that calculates the payment can’t be evaluated. Isn’t the validation code supposed to prevent submission when a form field is blank? And in this case, with debug on, it should stop all submissions? But, it's pretty much like the validation code is not even active. I don't get any kind of response from it. I can't find any hint of an issue in your code, so I suspect the problem lies in my plugin. I hope you can be patient enough to wait for beta 1. I've implemented all features, and just need to do a little bit more testing. -- Jörn Zaefferer http://bassistance.de ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Need some guidance...
Thanks, Daemach...I'll have a look at it! Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Daemach Sent: Sunday, March 04, 2007 11:09 PM To: discuss@jquery.com Subject: Re: [jQuery] Need some guidance... http://bassistance.de/jquery-plugins/jquery-plugin-validation/ :) Rick Faircloth wrote: Alright... now I've got this working very well. The only problem I have now is validation. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Need some guidance...
Rick,
You could use Ajax, but it might be simpler to use JavaScript
validation. The jQuery validation plugin that Daemach pointed you to
would be an example of that. I wrote a validation plug-in myself that I
use for a client, and it works pretty well. I think the other plug-in is
maybe more feature-full than mine is, but that's neither here nor there.
For your calculator, I'd definitely suggest JavaScript validation. Give
a holler if you need help with that. I've not used the big jQuery
validation plugin, but I can show you the one I wrote, and maybe it
would suit your needs.
Cheers,
Chris
Rick Faircloth wrote:
First question I have is about which type of validation I need:
Ajax or non-Ajax?
Here's my current jQuery code... I believe it would be classified
as Ajax, however, it doesn't mention Ajax anywhere, so I'm unsure...
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(Mortgage_Calculation.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);
}
);
}
I have three form fields to validate:
Principal: Validate for entry / Validate that entry is numerical after $ ,
. are all stripped from entry.
Interest: Validate for entry / Validate that entry is numerical
Years: Validate for entry / Validate that entry is numerical
There are so many examples on
http://bassistance.de/jquery-plugins/jquery-plugin-validation
that I'm not sure which one is most appropriate. I usually use RegEx to
validate the principal entry, too.
So... two questions...
Do I need the Ajax validation plug-in?
Which one of the examples would be best, or is it just a matter of style
preference. ( I usually put
a general message at the top of the form stating that there are errors.
Then I put specific messages
above each form field.)
Thanks for any assistance and guidance!
Rick
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Rick Faircloth
Sent: Monday, March 05, 2007 8:46 AM
To: 'jQuery Discussion.'
Subject: Re: [jQuery] Need some guidance...
Thanks, Daemach...I'll have a look at it!
Rick
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Daemach
Sent: Sunday, March 04, 2007 11:09 PM
To: discuss@jquery.com
Subject: Re: [jQuery] Need some guidance...
http://bassistance.de/jquery-plugins/jquery-plugin-validation/ :)
Rick Faircloth wrote:
Alright... now I've got this working very well.
The only problem I have now is validation.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
http://www.cjordan.us
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Need some guidance...
Rick Faircloth schrieb:
Principal: Validate for entry / Validate that entry is numerical after $ ,
. are all stripped from entry.
Interest: Validate for entry / Validate that entry is numerical
Years: Validate for entry / Validate that entry is numerical
There are so many examples on
http://bassistance.de/jquery-plugins/jquery-plugin-validation
that I'm not sure which one is most appropriate. I usually use RegEx to
validate the principal entry, too.
Princial: Required Add your own validation method, using the mentioned
regex. Something like this:
$.validator.addMethod(numeric, function(value) {
return /myregex/.test(value);
});
Interest: required + number
Years: required + number
Watch out for the beta 1 release, that improves a lot of things. I see
if I can get to improve the method examples too.
--
Jörn Zaefferer
http://bassistance.de
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Need some guidance...
Thanks for the guidance, Chris. I'll have a look at
the code and see what I can do!
Rick
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Christopher Jordan
Sent: Monday, March 05, 2007 4:41 PM
To: jQuery Discussion.
Subject: Re: [jQuery] Need some guidance...
Rick,
You could use Ajax, but it might be simpler to use JavaScript validation.
The jQuery validation plugin that Daemach pointed you to would be an example
of that. I wrote a validation plug-in myself that I use for a client, and it
works pretty well. I think the other plug-in is maybe more feature-full than
mine is, but that's neither here nor there.
For your calculator, I'd definitely suggest JavaScript validation. Give a
holler if you need help with that. I've not used the big jQuery validation
plugin, but I can show you the one I wrote, and maybe it would suit your
needs.
Cheers,
Chris
Rick Faircloth wrote:
First question I have is about which type of validation I need:
Ajax or non-Ajax?
Here's my current jQuery code... I believe it would be classified
as Ajax, however, it doesn't mention Ajax anywhere, so I'm unsure...
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(Mortgage_Calculation.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);
}
);
}
I have three form fields to validate:
Principal: Validate for entry / Validate that entry is numerical after $ ,
. are all stripped from entry.
Interest: Validate for entry / Validate that entry is numerical
Years: Validate for entry / Validate that entry is numerical
There are so many examples on
http://bassistance.de/jquery-plugins/jquery-plugin-validation
that I'm not sure which one is most appropriate. I usually use RegEx to
validate the principal entry, too.
So... two questions...
Do I need the Ajax validation plug-in?
Which one of the examples would be best, or is it just a matter of style
preference. ( I usually put
a general message at the top of the form stating that there are errors.
Then I put specific messages
above each form field.)
Thanks for any assistance and guidance!
Rick
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Rick Faircloth
Sent: Monday, March 05, 2007 8:46 AM
To: 'jQuery Discussion.'
Subject: Re: [jQuery] Need some guidance...
Thanks, Daemach...I'll have a look at it!
Rick
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Daemach
Sent: Sunday, March 04, 2007 11:09 PM
To: discuss@jquery.com
Subject: Re: [jQuery] Need some guidance...
http://bassistance.de/jquery-plugins/jquery-plugin-validation/ :)
Rick Faircloth wrote:
Alright... now I've got this working very well.
The only problem I have now is validation.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
http://www.cjordan.us
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Need some guidance...
=width: 202px;
padding-right: 4px;
font: Arial Helvetica San-Serif;
font-weight: bold;
font-size: 12px;
text-align: right;
Payment
/td
td style=width 202px;
text-align: left;
font: Arial Helvetica San-Serif;
font-size: 12px;
span id=Result/span
/td
/tr
tr
td style=width: 202px;
padding-right: 4px;
font: Arial Helvetica San-Serif;
font-weight: bold;
font-size: 12px;
text-align: right;
/td
td style=width 202px;
text-align: left;
font: Arial Helvetica San-Serif;
font-size: 12px;
INPUT Class=Submit Value=Submit Type=Submit
onClick=CalculateMortgage();return false;
/td
/tr
/table
/form
/div
/div
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Jörn Zaefferer
Sent: Monday, March 05, 2007 5:32 PM
To: jQuery Discussion.
Subject: Re: [jQuery] Need some guidance...
Rick Faircloth schrieb:
Principal: Validate for entry / Validate that entry is numerical after $
,
. are all stripped from entry.
Interest: Validate for entry / Validate that entry is numerical
Years: Validate for entry / Validate that entry is numerical
There are so many examples on
http://bassistance.de/jquery-plugins/jquery-plugin-validation
that I'm not sure which one is most appropriate. I usually use RegEx to
validate the principal entry, too.
Princial: Required Add your own validation method, using the mentioned
regex. Something like this:
$.validator.addMethod(numeric, function(value) {
return /myregex/.test(value);
});
Interest: required + number
Years: required + number
Watch out for the beta 1 release, that improves a lot of things. I see
if I can get to improve the method examples too.
--
Jörn Zaefferer
http://bassistance.de
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Need some guidance...
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=rightstrongPrincipal:/strong/td
tdinput type=text name=Principal/td
/tr
tr
td align=rightstrongInterest
Rate:/strong/td
tdinput type=text name=InterestRate/td
/tr
tr
td align=rightstrongDuration:/strong/td
tdinput type=text name=Duration/td
/tr
tr
td align=rightstrongResult:/strong/td
tdspan id=Result/span/td
/tr
tr
td align=rightnbsp;/td
tdinput type=button value= Calculate
onClick=CalculateMortgage();return false;/td
/tr
/table
/form
Page from which you are getting the data:
cfsetting showdebugoutput=nocfset calc = form.Principal *
form.InterestRate * form.Duration
cfcontent reset=yescfoutput#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
Re: [jQuery] Need some guidance...
http://bassistance.de/jquery-plugins/jquery-plugin-validation/ :)
Rick Faircloth wrote:
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=rightstrongPrincipal:/strong/td
tdinput type=text name=Principal/td
/tr
tr
td align=rightstrongInterest
Rate:/strong/td
tdinput type=text name=InterestRate/td
/tr
tr
td align=rightstrongDuration:/strong/td
tdinput type=text name=Duration/td
/tr
tr
td align=rightstrongResult:/strong/td
tdspan id=Result/span/td
/tr
tr
td align=rightnbsp;/td
tdinput type=button value= Calculate
onClick=CalculateMortgage();return false;/td
/tr
/table
/form
Page from which you are getting the data:
cfsetting showdebugoutput=nocfset calc = form.Principal *
form.InterestRate * form.Duration
cfcontent reset=yescfoutput#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
Re: [jQuery] Need some guidance...
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=rightstrongPrincipal:/strong/td
tdinput type=text name=Principal/td
/tr
tr
td align=rightstrongInterest
Rate:/strong/td
tdinput type=text name=InterestRate/td
/tr
tr
td align=rightstrongDuration:/strong/td
tdinput type=text name=Duration/td
/tr
tr
td align=rightstrongResult:/strong/td
tdspan id=Result/span/td
/tr
tr
td align=rightnbsp;/td
tdinput type=button value= Calculate
onClick=CalculateMortgage();return false;/td
/tr
/table
/form
Page from which you are getting the data:
cfsetting showdebugoutput=nocfset calc = form.Principal *
form.InterestRate * form.Duration
cfcontent reset=yescfoutput#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
Re: [jQuery] Need some guidance...
Gotcha. I thought that might be the case. Good on ya. ;o)
Daemach wrote:
Yeah it's education - it's good for new folks to see that you can pass
complex structures back and forth seamlessly.A simple value would be
fine in this case.
I like the loop over the inputs to create the object in your example - more
elegant than hardcoding for sure ;)
Christopher Jordan wrote:
Daemach,
I suppose it's just for the sake of education or something, but putting
the return value in a structure and passing it back seems like overkill
to me. Since there can be only one result from the calculation, just
pass it back as a string or numeric... no need for a structure in this
case imo.
Rick, is any of this helping? :o)
Chris
Daemach wrote:
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=textbr
secondVal: input id=secondVal name=secondVal type=textbr
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
Re: [jQuery] Need some guidance...
Hmm... I hadn't thought of that. So you're saying that you would
eliminate the looping over the argument structure and just set my =
arguments;? Would that make a *copy* of the arguments structure in the
'my' variable, or would 'my' be a *reference* to the arguments structure?
Chris
Daemach wrote:
BTW, since you don't need a deep copy of the arguments structure in the cfc
you can just do cfset my = arguments to simplify.
Christopher Jordan wrote:
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
Re: [jQuery] Need some guidance...
Rick,
what Daemach means by 'ser/deser' is serialize/deserialize.
Serialization is taking a JavaScript object and formatting it into a
proper wdx packet (or JSON string, or whatever). De-serialization then
is the reverse of that process, taking the serialized data and turning
it back into native data.
I probably didn't say that too well. Take for example, the param
variable that we created yesterday. Setting aside the cool loop to
create it, here's the manual ka-chunck-a-chunck way to create it:
var param = {}; // this is the same as 'var param new Object();' It's
fewer characters and I'm lazy :o)
param.principle = 2;
param.interestRate = 4.5;
param.duration = 5;
That code would create the JavaScript object called param with the
members principle, interestRate, and duration. If this seems really
familiar (like it's a ColdFusion structure), that's because it is! It
behaves just about the same as a CFStructure. However, you couldn't pass
it as is to a CF page (or a CFC) in its current form, because CF doesn't
savvy a JavaScript Object.
Enter serialization! :o)
I'll use JSON here as an example, but the principle is the same for
other forms of serialization.
If we were to serialize the above JavaScript object the output would be
a string that looks like this:
{interestrate:4.5,duration:5,principle:2}
This string is *valid* JavaScript code, and if you were to evaluate it
(using the JavaScript eval() function) your outcome would be a native
JavaScript object. However, we can now pass this string to our CF page,
and use the jsondecode() UDF to turn that string into a native
ColdFusion structure. If we then took a ColdFusion structure and ran the
jsonencode() UDF on it, we would end up with the string
{interestrate:4.5,duration:5,principle:2} which we could pass
back to JavaScript, evaluate and have ourselves a native JavaScript object.
Similarly a wddx serializer/de-serializer would turn that JavaScript
object into a valid wddx packet (which it just sees as a string of
data), and could pass it to ColdFusion which can handle a properly
formatted wddx packet, and from it construct a native structure (or
array, or whatever).
Does that make sense? Have I made it as clear as mud? :o)
Chris
Rick Faircloth wrote:
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=rightstrongPrincipal:/strong/td
tdinput type=text name=Principal/td
/tr
tr
td align=rightstrongInterest
Rate:/strong/td
tdinput type=text name=InterestRate/td
/tr
Re: [jQuery] Need some guidance...
It's a reference, but in this case you're just trying to avoid having to type
arguments so it works - I do the same thing. The only time you really need
to do a deep copy is if you are planning to manipulate the second structure
and need to keep the first intact for some reason.
Christopher Jordan wrote:
Hmm... I hadn't thought of that. So you're saying that you would
eliminate the looping over the argument structure and just set my =
arguments;? Would that make a *copy* of the arguments structure in the
'my' variable, or would 'my' be a *reference* to the arguments structure?
Chris
Daemach wrote:
BTW, since you don't need a deep copy of the arguments structure in the
cfc
you can just do cfset my = arguments to simplify.
Christopher Jordan wrote:
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
Re: [jQuery] Need some guidance...
Rick... To be honest, if you're just performing calculations on the values from the form fields, you don't even need an AJAX call. Just do the math in javascript. It'll be faster and seem more responsive to the user. _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rick Faircloth Sent: Wednesday, February 28, 2007 3:31 PM To: 'jQuery Discussion.' Subject: [jQuery] Need some guidance... 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/
Re: [jQuery] Need some guidance...
Andy, I'm assuming (and please tell me if I'm wrong here, Rick) that Rick is just using this as an example to get himself comfortable with Ajax concepts. Have I read too much into your post Rick? Btw, Rick, I'm writing a response, but work just stepped in the way again so I've had to put it on hold for the moment. Hopefully, you won't have to wait too long for help from me or anyone else who wants to take a crack at helping you out. :o) Cheers, Chris Andy Matthews wrote: Rick... To be honest, if you're just performing calculations on the values from the form fields, you don't even need an AJAX call. Just do the math in javascript. It'll be faster and seem more responsive to the user. *From:* [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] *On Behalf Of *Rick Faircloth *Sent:* Wednesday, February 28, 2007 3:31 PM *To:* 'jQuery Discussion.' *Subject:* [jQuery] Need some guidance... 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/
Re: [jQuery] Need some guidance...
Hi, Andy. Are you talking about one of those calculate as you enter apps? My client mentioned doing this, but I didn't know if it would be useful, since the info has to be completely entered before any beneficial result can be calculated. But I'm game if you think that's a better approach. I wouldn't mind using a simple app like this to learn some more about jQuery and AJAX, however. Would it be difficult to do that way? Rick From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Andy Matthews Sent: Wednesday, February 28, 2007 4:36 PM To: 'jQuery Discussion.' Subject: Re: [jQuery] Need some guidance... Rick... To be honest, if you're just performing calculations on the values from the form fields, you don't even need an AJAX call. Just do the math in javascript. It'll be faster and seem more responsive to the user. _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rick Faircloth Sent: Wednesday, February 28, 2007 3:31 PM To: 'jQuery Discussion.' Subject: [jQuery] Need some guidance... 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/
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=textbr
secondVal: input id=secondVal name=secondVal type=textbr
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
___
Re: [jQuery] Need some guidance...
Daemach, did you figure out the config information for AjaxCFC yourself, or
is it documented somewhere? I looked in the docs that download with AjaxCFC
but I couldn't find any config information. There are so many js files in
there, I didn't know which ones to include.
-- Josh
- Original Message -
From: Daemach [EMAIL PROTECTED]
To: discuss@jquery.com
Sent: Wednesday, February 28, 2007 2:59 PM
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=textbr
secondVal: input id=secondVal name=secondVal type=textbr
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
Re: [jQuery] Need some guidance...
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/
Re: [jQuery] Need some guidance...
The jQuery port is still in Alpha - hasn't made beta yet. I pieced most of
this together from reading the code and some examples Rob provided in Alpha
1.
If you just follow the instructions, it should work in nearly every case.
Really the only things that change are in the ajaxcfc call itself; the URL
to your cfc (if you split your functions up for different applications), the
data you're sending and the success function. You can pretty much cut and
paste everything else. Just make sure you put the ajaxcfchelper calls
outside the document.ready function.
Also note that for some reason the guy that ported json to json.cfc decided
to break from the wddx recordset convention by creating a subnode for the
query data (called .data). wddx puts the column arrays in the root of the
object. iow, getting to the first row of a column named foo in json is
myObj.data.foo[0] - in wddx it's myObj.foo[0].
I have entertained thoughts of modifying json.cfc so that the resulting
recordset structures are identical but I don't want to break compatibility.
Frankly, the json structures are more compact so I'm just converting to
using them instead of wddx.
Josh Nathanson-2 wrote:
Daemach, did you figure out the config information for AjaxCFC yourself,
or
is it documented somewhere? I looked in the docs that download with
AjaxCFC
but I couldn't find any config information. There are so many js files in
there, I didn't know which ones to include.
-- Josh
- Original Message -
From: Daemach [EMAIL PROTECTED]
To: discuss@jquery.com
Sent: Wednesday, February 28, 2007 2:59 PM
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=textbr
secondVal: input id=secondVal name=secondVal type=textbr
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
Re: [jQuery] Need some guidance...
Daemach,
I suppose it's just for the sake of education or something, but putting
the return value in a structure and passing it back seems like overkill
to me. Since there can be only one result from the calculation, just
pass it back as a string or numeric... no need for a structure in this
case imo.
Rick, is any of this helping? :o)
Chris
Daemach wrote:
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=textbr
secondVal: input id=secondVal name=secondVal type=textbr
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
Re: [jQuery] Need some guidance...
Yeah it's education - it's good for new folks to see that you can pass
complex structures back and forth seamlessly.A simple value would be
fine in this case.
I like the loop over the inputs to create the object in your example - more
elegant than hardcoding for sure ;)
Christopher Jordan wrote:
Daemach,
I suppose it's just for the sake of education or something, but putting
the return value in a structure and passing it back seems like overkill
to me. Since there can be only one result from the calculation, just
pass it back as a string or numeric... no need for a structure in this
case imo.
Rick, is any of this helping? :o)
Chris
Daemach wrote:
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=textbr
secondVal: input id=secondVal name=secondVal type=textbr
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
Re: [jQuery] Need some guidance...
BTW, since you don't need a deep copy of the arguments structure in the cfc
you can just do cfset my = arguments to simplify.
Christopher Jordan wrote:
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/
--
View
Re: [jQuery] Need some guidance...
I'm sorry, I just noticed that you're using serialization = string. I am
used to using json or wddx to pass complex objects back and forth so they
arrive as native objects.
Christopher Jordan wrote:
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
Re: [jQuery] Need some guidance...
Cool, got stuff from the examples...thanks. It's working as expected now.
I like that you can send any kind of argument to your cfc now. I think in
the past you had to send an array. This is good stuff.
-- Josh
- Original Message -
From: Daemach [EMAIL PROTECTED]
To: discuss@jquery.com
Sent: Wednesday, February 28, 2007 3:43 PM
Subject: Re: [jQuery] Need some guidance...
The jQuery port is still in Alpha - hasn't made beta yet. I pieced most
of
this together from reading the code and some examples Rob provided in
Alpha
1.
If you just follow the instructions, it should work in nearly every case.
Really the only things that change are in the ajaxcfc call itself; the URL
to your cfc (if you split your functions up for different applications),
the
data you're sending and the success function. You can pretty much cut and
paste everything else. Just make sure you put the ajaxcfchelper calls
outside the document.ready function.
Also note that for some reason the guy that ported json to json.cfc
decided
to break from the wddx recordset convention by creating a subnode for the
query data (called .data). wddx puts the column arrays in the root of the
object. iow, getting to the first row of a column named foo in json is
myObj.data.foo[0] - in wddx it's myObj.foo[0].
I have entertained thoughts of modifying json.cfc so that the resulting
recordset structures are identical but I don't want to break
compatibility.
Frankly, the json structures are more compact so I'm just converting to
using them instead of wddx.
Josh Nathanson-2 wrote:
Daemach, did you figure out the config information for AjaxCFC yourself,
or
is it documented somewhere? I looked in the docs that download with
AjaxCFC
but I couldn't find any config information. There are so many js files
in
there, I didn't know which ones to include.
-- Josh
- Original Message -
From: Daemach [EMAIL PROTECTED]
To: discuss@jquery.com
Sent: Wednesday, February 28, 2007 2:59 PM
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=textbr
secondVal: input id=secondVal name=secondVal type=textbr
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
Re: [jQuery] Need some guidance...
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=textbr
secondVal: input id=secondVal name=secondVal type=textbr
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
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=rightstrongPrincipal:/strong/td
tdinput type=text name=Principal/td
/tr
tr
td align=rightstrongInterest Rate:/strong/td
tdinput type=text name=InterestRate/td
/tr
tr
td align=rightstrongDuration:/strong/td
tdinput type=text name=Duration/td
/tr
tr
td align=rightstrongResult:/strong/td
tdspan id=Result/span/td
/tr
tr
td align=rightnbsp;/td
tdinput type=button value= Calculate
onClick=CalculateMortgage();return false;/td
/tr
/table
/form
Page from which you are getting the data:
cfsetting showdebugoutput=nocfset calc = form.Principal *
form.InterestRate * form.Duration
cfcontent reset=yescfoutput#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
