Buy Now
Sign in

A custom JS issue CF4 --> CF5 or 6, don't care

CrystalFrontier , August 03 at 13:22
Answered
C
CrystalFrontier
Dear all
In an attempt to re-create a CF4 form into either CF5 or 6, I have tried as much as I can to mirror a key custom JS that had been established years ago through this very helpful forum. In short, it's a simple in-form calculation with one complex element, culminating in showing the calculated result in a field ID 'fees_acc'.​
​​
​It begins simple enough: 'debaters', 'judges', 'observers' are three client groups with three different fee values. Number of clients per group X fee = total fee. Add onto this 'extra_nights' and 'singles' (for single rooms), you receive a total fee_acc (includes accommodation).
However, there are two key field values when determining a discount: 'teams' and 'judges'. Should one team bring one judge, no discount applies. Should an 'n' number of teams bring +1 judge, a discount of € 30 applies to all judges, in the case of n+2 (or more), the discount is € 50 per judge (so, we're incentivising teams to bring judges).
The JS script co-operatively compiled through this forum back then (CF4) was this:
window.addEvent('domready', function() {​
​ $('debaters').addEvent('change', rekenen1);​
​ $('judges').addEvent('change', rekenen1);​
​ $('observers').addEvent('change', rekenen1);​
​ $('singles').addEvent('change', rekenen1);​
​ $('extra_nights').addEvent('change', rekenen1);​
​});​
​function rekenen1(){​
​ var num_teams = $('teams').value;​
​ var num_judges = $('judges').value;​
​ var num_extras = num_judges - num_teams;​
​ var discount = 0;​
​ if(num_extras > 0) {​
​ discount = 30;​
​ if(num_extras > 1) {​
​ discount = 50;​
​ }​
​ }​
​ $('fees_acc').value = $('debaters').value * 220 + $('judges').value * (220 - discount) + $('observers').value * 350 + $('singles').value * 90 + $('extra_nights').value * 30;​
​}
...and it worked like a charm as a JS script in the 'Events' section (see here).
Now in CF 5 or 6 (I am currently working parallel on both, but prefer CF5 bc of Google Spreadsheet item), nothing happens, and it seems as if some striking change has occured in the way JS is being used.
I assume, the change is not significant, but not being a coder myself (which is why I use CF in the first place), I do not see what needs to be done. I have tried adopting principles that may apply to CF 5 (replacing $ with jQuery etc...) but I can't create the same result, or any result for that matter.
Any help is much appreciated!​
​Thanks and have a nice weekend,​
​Christopher
GreyHead
Hi Christopher,
At the time of CFv4 the default Joomla JavaScript library was MooTools and I'm guessing that your script was written to use that. Joomla then switched to use the jQuery library, for a while both were supported but in the recent Joomla releases there is only jQuery. Here is a code snippet that I wrote a while back which shows both MooTools and jQuery versions - that should help you edit your code to a jQuery version
MooTools
window.addEvent('domready', function () {​
​ $('search_btn').addEvent('click', function () {​
​ var postcode, service;​
​ postcode = $('postcode').value;​
​ postcode = postcode.replace(" ", '');​
​ if (postcode === "EnterPostcode" || postcode === "") {​
​ alert('Enter Postcode');​
​ } else if (!postcode.match(/^[a-zA-Z0-9]+$/)) {​
​ alert('Invalid Postcode');​
​ } else {​
​ service = $$('input[name=local]:checked')[0];​
​ if (service == undefined || service.value === '') {​
​ alert('Please Select the local service');​
​ } else {​
​ window.open("http://www.xxx.uk/Service-Search/Disambiguation/Location?" + service.value + "&locationName=" + postcode, '', '');​
​ }​
​ }​
​ });​
​});
and jQuery
jQuery(document).ready(function(jQ){​
​ jQ('#search_btn').click( function () {​
​ var postcode, service;​
​ postcode = jQ('#postcode').val();​
​ postcode = postcode.replace(" ", '');​
​ if (postcode === "EnterPostcode" || postcode === "") {​
​ alert('Enter Postcode');​
​ } else if (!postcode.match(/^[a-zA-Z0-9]+$/)) {​
​ alert('Invalid Postcode');​
​ } else {​
​ service = jQ('input[name=local]:checked');​
​ if ( service.length <= 0 ) {​
​ alert('Please Select the local service');​
​ } else {​
​ window.open("http://wwwxxx.uk/Service-Search/Disambiguation/Location?" + service.val() + "&locationName=" + postcode, '', '');​
​ }​
​ }​
​ });​
​});
to call a function in jQuery you can use e.g.
jQ( ".target" ).change(function_name);
Bob
PS you can use jQuery or $ in place of my jQ - I used jQ as it was short and avoided confusion with the MooTools use of $ The abbreviation is defined in the first line of the jQuery code
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
C
CrystalFrontier
Dear Bob
Thanks so much for your reply.
I've surgically implemented the changes I believe to have identified. Still, it's not running yet. I assume it's just a little something, like a wrong bracket or the use of ('._XXX') versus ('#_XXX'). I am truly sorry, but when you suggested to me how to call a function I really don't know what this means and where I need it
Here's the jQ-ed code so far:
jQuery(document).ready(function(jQ) {​
​ jQ('#debaters').change( rekenen1 ) ;​
​ jQ('#judges').change( rekenen1 ) ;​
​ jQ('#observers').change( rekenen1 ) ;​
​ jQ('#singles').change( rekenen1 ) ;​
​ jQ('#extra_nights').change( rekenen1 ) ;​
​});​
​function rekenen1(){​
​ var num_teams = jQ('#teams').val();​
​ var num_judges = jQ('#judges').val();​
​ var num_extras = num_judges - num_teams;​
​ var discount = 0;​
​ if(num_extras > 0) {​
​ discount = 30;​
​ if(num_extras > 1) {​
​ discount = 50;​
​ }​
​ }​
​ jQ('#total').val() = jQ('#debaters').val() * 220 + jQ('#judges').val() * (220 - discount) + jQ('#observers').val() * 350 + jQ('#singles').val() * 90 + jQ('#extra_nights').val() * 30;​
​}
About this 'rekenen1' function: I assume some Dutch progammer advised me here? Basically, it doesn't matter what to call it, right? Because I determine it in the bottom section anyway, right?
Oh, and does it matter in which order the Custom JS is placed in the on load section?
Thanks again for your help
Christopher
C
CrystalFrontier
Hello to all
It would be very much helpful if anyone could check the last mentioned jQuery code for mistakes. I assume there is one. Many thanks in advance!
Christopher
healyhatman
jQ('#total').val() =  jQ('#debaters').val() * 220 +  jQ('#judges').val() * (220 - discount) +  jQ('#observers').val() * 350 +  jQ('#singles').val() * 90 +  jQ('#extra_nights').val() * 30;
Should probably be
jQ('#total').val(jQ('#debaters').val() * 220 +  jQ('#judges').val() * (220 - discount) +  jQ('#observers').val() * 350 +  jQ('#singles').val() * 90 +  jQ('#extra_nights').val() * 30);
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
C
CrystalFrontier
Thank you! However, it didn't solve the problem.
​​
​I have two conflicting instructions, however (from two different forums). Can​
jQ('#debaters').change( rekenen1 ) ;
work properly? It's been said that I need to change it to
jQ('#debaters').on('change', rekenen1);
...but neither seem to be working as well.
I know it's just a little piece of programming but I'm simply not a programmer. Apologies for the confusion and thanks for the help
Christopher
healyhatman
I would really need to have a look properly at how you have it set up. But are there any errors in the console?
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
C
CrystalFrontier
Yes:
Sry, uploaded same pic twice...
Browser_with_accomm.png
Attachments
Browser_with_accomm.png
Browser_with_accomm.png
(15.55 KiB)
25 Downloads/Views
Browser_with_accomm.png
Browser_with_accomm.png
(15.55 KiB)
28 Downloads/Views
healyhatman
OK so replace all instances of "jQ" with "jQuery" except for the one in the function call (as in .ready(function(jQ), which you should probably just have as .ready(function()
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
C
CrystalFrontier
That was it!! Thanks!​
​​
​So what then is the difference between using jQ vs jQuery vs $ ?
total_works.png
Attachments
total_works.png
total_works.png
(26.48 KiB)
28 Downloads/Views
healyhatman
Just the way Joomla is set up, can't use the $ namespace or something
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
C
CrystalFrontier
Hmm, alright.
Well, thanks a ton! It's really helpful to have this feature back!!
Christopher
GreyHead
Hi Christopher,
"So what then is the difference between using jQ vs jQuery vs $ ?"
jQuery is the default namespace used by jQuery itself to identify it's functions and methods. Joomla uses $ in place of this - but there was a time when the MooTools library used $ and so when both were in use on the same site you needed to use jQuery to differentiate. I found jQuery inconvenient to type many times a day so used jQ instead - you can define the short version when you call the library as in
jQuery(document).ready(function(jQ) {​
​ . . .​
​}
The problem with your code is that the function rekening() is outside that definition:
jQuery(document).ready(function(jQ) { ​
​ . . .​
​}​
​function rekening() {​
​ . . .​
​}
to use the jQ abbreviation it needs to be inside
jQuery(document).ready(function(jQ) {​
​ . . .​
​ function rekening() {​
​ . . .​
​ }​
​}
Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
C
CrystalFrontier
Ah, alright!
Thanks for the clarification! I'll now get to adding the multiple +1 field features into databanks. See how that goes. You may hear from me again
Best regards!​
​Christopher