• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Trying to use jQuery with Genesis

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Trying to use jQuery with Genesis

This topic is: resolved

Tagged: jquery, Sample Theme, scripts

  • This topic has 2 replies, 2 voices, and was last updated 6 years, 7 months ago by fuzzy247.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • June 26, 2016 at 6:16 pm #188344
    fuzzy247
    Member

    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/
    June 26, 2016 at 7:21 pm #188350
    Victor Font
    Moderator

    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?

    June 26, 2016 at 10:37 pm #188357
    fuzzy247
    Member

    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
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble