Single JavaScript function on individual WordPress Page

Question

I have read through a few articles on how to add JavaScript to WordPress pages though it seems overly complex for what I need. I have this small script (see below) and I want it to work on just 1 page. I thought adding it within <script> tags after the main content would do the trick but I get the following error in the Console:

Uncaught TypeError: undefined is not a function

Even though the script works fine in the console, it doesn't work.

For this script do I have to use the complex methods or is there a simpler one?

$('#tSubmit').on('click', function() {
    var amt = +$('#tCount').val(),
        tier = $('#tType').val(),
        h = +$('#tH').val() > 0 ? +$('#tH').val() : 0,
        m = +$('#tM').val() > 0 ? +$('#tM').val() : 0,
        s = +$('#tS').val() > 0 ? +$('#tS').val() : 0,
        time = ((h*60+m)*60+s)/amt;
    alert('Individual time for Tier ' + tier + ' troops: ' + time.toFixed(2) + ' seconds');
});

Are you sure your code is executed after your form is displayed on the page? — Design by Adrian
– Design by Adrian, Commented Sep 6, 2014 at 17:17
wordpress theme likely using noConflict, try replacing $ with jQuery — charlietfl
– charlietfl, Commented Sep 6, 2014 at 17:18
Yes, jQuery is included in the theme. The script doesn't get executed until #tSubmit is clicked. — Spedwards
– Spedwards, Commented Sep 6, 2014 at 17:20
@AndrewHoffman You can't mark it as an answer straight away. I have now though — Spedwards
– Spedwards, Commented Sep 6, 2014 at 18:06

doublesharp · Accepted Answer · 2014-09-06 17:27:19Z

In WordPress jQuery is loaded using the jQuery.noConflict() function, which means that the $ variable is aliased to jQuery so as to not conflict with other Javascript libraries.

You can include your javascript in your page template, or even within the post content (if you are using the text editor, not visual), as long as you replace $ with jQuery.

jQuery('#tSubmit').on('click', function() {
    var amt = +jQuery('#tCount').val(),
        tier = jQuery('#tType').val(),
        h = +jQuery('#tH').val() > 0 ? +jQuery('#tH').val() : 0,
        m = +jQuery('#tM').val() > 0 ? +jQuery('#tM').val() : 0,
        s = +jQuery('#tS').val() > 0 ? +jQuery('#tS').val() : 0,
        time = ((h*60+m)*60+s)/amt;
    alert('Individual time for Tier ' + tier + ' troops: ' + time.toFixed(2) + ' seconds');
});

If you don't want to change the code, you can pass the jQuery variable into a function that takes $ as an argument, and use your code as is.

(function($){
    // your code goes here and jQuery is known as $
    // $(document).on()... or whatever
})(jQuery);

Mindastic · Accepted Answer · 2014-09-06 17:18:14Z

0

Why don't you try to create a separated js file for this functionality (and also execute it on jQuery(document).ready()) and then, refer to it from your page with wp_enqueue_script('scrip name', 'script url', array('jQuery')). That will make your script load after jQuery was loaded.

answered Sep 6, 2014 at 17:18

Mindastic

4,1413 gold badges22 silver badges20 bronze badges

Collectives™ on Stack Overflow

Single JavaScript function on individual WordPress Page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related