2

2 days ago my javascript was located in my footer folder running correctly, until suddenly it stopped working. I was lazy to do the proper way of enqueueing, so I officially did that to see if it would resolve the problem, it did not. When I inspect the html, the javascript is loaded within, but does not play. So then I thought it was the script, and then test ran a script I know is working fine from tuts plus, again, nothing.

Here's their script, which of course I rearranged to match my folder layout.

<?php 

function twentyfifteen_child_scripts() {
    wp_enqueue_script( 'transition js', get_stylesheet_directory_uri() . '/js/transition.js' );
}
add_action('wp_enqueue_scripts','twentyfifteen_child_scripts');

And within my transition.js folder there is...

alert("yo");

Checking the console on chrome two errors pop up:

(1) Failed to load resource: the server responded with a status of 404 (Not Found)

(2) Uncaught TypeError: $ is not a function

Which is referring to this script.

 <script type="text/javascript">
        $(".menu-button").click(function () {
    $(this).parents(".wrapper").toggleClass("show-menu");
});
    </script>

This script works fine on HTML testbeds.


I'm assuming the problem has nothing to do with this code, but I'd thought it would help. Please, if anyone is fammiliar or has heard of a situation similar to do this happening, offer some advice on it, feel like I'm in a dead end right now. Thanks.

  • Have you checked the console in your browser for any errors? – colecmc Aug 10 '15 at 22:13
  • What are the things that you've done before the problem exist? – 5ervant Aug 11 '15 at 2:35
  • Yes I did check for errors, and this popped up. Failed to load resource: the server responded with a status of 404 (Not Found) – OtherClare Aug 11 '15 at 13:48
2

The "Failed to load resource" is probably a red herring and isn't related to your issue. The fact that it is throwing an error about the $ shortcut means your js file is being loaded correctly.

The likely issue is that jQuery in WordPress loads in "noConflict" mode. As such the $ shortcut will not work by default. Try replacing your script with this:

<script type="text/javascript">
    jQuery(".menu-button").click(function () {
        jQuery(this).parents(".wrapper").toggleClass("show-menu");
    });
</script>

Or, alternatively if you really like the $ shortcut:

<script type="text/javascript">
    (function($) {
        $(".menu-button").click(function () {
            $(this).parents(".wrapper").toggleClass("show-menu");
        });
    })(jQuery);
</script>

There is also an issue with the logic in your javascript. The line

$(this).parents(".wrapper").toggleClass("show-menu");

Will not work as expected. jQuery.parents() returns a set of results while jQuery.toggleClass() expects a single element. If you know that the element directly above show-menu will always be wrapper and that is the only element you wish to effect, then you can simply swap that line out for this

$(this).parent(".wrapper").toggleClass("show-menu");

Alternatively, if wrapper can be an arbitrary height above show-menu, you will need something like this

<script type="text/javascript">
    jQuery(".menu-button").click(function () {
        jQuery(this).parents(".wrapper").each(function(){
            jQuery(this).toggleClass("show-menu");
        });
    });
</script>

Incidentally, the reason you are getting that "Not Found" error is because transitions.js does not exist at this url: https://generation-co.co/wp-content/themes/twentyfifteenG-CHILD/js/transition.js

  • I've tried both of your examples, but the problem still persist. – OtherClare Aug 11 '15 at 14:31
  • What does the console output say now? – TheGentleman Aug 11 '15 at 17:57
  • The second error is now gone and the first error remains. – OtherClare Aug 11 '15 at 20:35
  • Have you confirmed that the resource it is trying to load exists? Is that resource related to the transition.js file? When you say that "it isn't working", what exactly isn't working? – TheGentleman Aug 11 '15 at 21:21
  • I'm kind of beginner, so I'm not sure what you mean by resource, but I'm assuming you "if the file is there" and yes it is when I inspect the html. Whats not working are the transition menu's and any form of javascript implemented. – OtherClare Aug 11 '15 at 23:04

protected by Community Aug 11 '15 at 14:08

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.