Trying to use jQuery with Genesis

[fuzzy247]

Hello,
I'm trying to use a jQuery script which will change ingredient amounts as a viewer changes the serving size of a recipe.

The sample script is here: https://jsfiddle.net/fuzzy247/tjz8ekoq/

The test page I'm working on is here: http://cone-6.com/2016/06/26/test/

Unfortunately I don't know anything about jQuery. The script seems to work on the jsfiddle site but I can't get it to work on my Genesis site. I am using the sample child theme. I've tried putting the script in the script box at the bottom of the page editor and in the header script box in Genesis settings and I have tried to enqueue it in my functions.php file. I've used scripts like Google Analytics before but maybe there is something else I have to do for this one?

Any advice would be amazing.

http://cone-6.com/2016/06/26/test/

[Victor Font]

Getting this script to work on your site has nothing to do with Genesis, but everything to do with how WordPress functions. WordPress has jQuery enabled in what is called strict mode. This means the jQuery short cut ($) will not work unless you invoke the full jQuery name and pass the short cut as a parameter to the function. This is the reworked function:

jQuery(function( $ ) {
      $('input.serving').change(function(event) { // When the value changes
            var servings = parseFloat($(this).val());
            $('li.ingredient').each(function(index, elem) { // Recalculate each ingredient amount
                  var amount = $('span.amount', elem);
                  var serve = servings * parseFloat(amount.data('single'));
                  amount.text(Math.round(serve * 100) / 100); // Round to 2 decimals
            });
      }).change(); // And initialise
});

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[fuzzy247]

Thanks Victor!
Thanks for explaining the jQuery thing. I was disappointed at first but then I realized it wasn't the jQuery anymore, WordPress was deleting the empty spans. Fortunately, it looks like there are a few options that can fix that. Everything seems to be working just as I hoped.

Thanks again,
Brandon

[Author]

Posts