1

I've been reading several articles dissuading WP developers from replacing the enqueued jQuery with the Google CDN version of jQuery. I'm sold.

I am now enqueueing the WP jQuery version which uses jQuery.noConflict().

However, I am getting the 'undefined is not a function' error in a home-grown .js file that uses $ selectors. Even when I change the selector to 'jQuery' I still get the error. I made sure that jquery is loaded prior to the .js file.

For testing, if I switch out the WP jQuery enqueue with Google CDN's version, I get no errors at all.

I want to be able to use WP's jQuery, but I can't seem to get it to work with the home-grown jquery code.

Any thoughts on other debugging ideas?

EDIT:

Here's a slice of the home-grown .js file that is failing:

var brk = {
    start: function($){

    $("#navigation ul li a").css("color", "#FFF").css("text-decoration", "none");
    $("#topButtons a.clearbtn").css("color", "#FFF").css("background", "transparent").css("border", "1px solid #FFF");
    }
}

jQuery(document).ready(brk.start($));

The 'undefined is not a function' error is on the first $ line: $("#navigation ul li a")...

4
  • How do you ensure jQuery is loaded before your script? Had you verified that it is present in page source and being correctly loaded (via browser dev tools)?
    – Rarst
    Sep 11 '14 at 18:23
  • Yes, I verified that the jQuery lib is present in the page source above the .js file (which is in the footer). Sep 11 '14 at 18:29
  • 1
    looks like you have a syntax error in your code, start function is not closed, missing an additional } Sep 11 '14 at 18:49
  • Sorry to confuse, that was a paste error. Actual code has the close brace. Edited code above to correct. Sep 11 '14 at 18:51
0

Well, the short of it is that your code is incorrect.

jQuery(document).ready(brk.start($));

The $ here doesn't refer to anything. You should change this to:

jQuery(document).ready(function($) { brk.start($) } );

With noConflict mode enabled, the $ value is not defined. If you want it to be defined, then you have to define it yourself.

This code:

jQuery(document).ready(function($) {
...
});

Does a couple things.

First, it hooks a function to the document.ready event. Secondly, it defines a function to call. Third, it sets the $ value to be jQuery for the code inside that function.

Your code was not defining a function nor setting the $ value. You were trying to call brk.start with a parameter of $ and then attach whatever the return value of it was to the document.ready.

The brk.start(whatever) is a function call, not a function definition itself. You need to define a function to attach it to a document.ready event.

Alternatively, this might work. I have not tested it.

jQuery(document).ready(brk.start);

The brk.start, without the parentheses, is a function and so it can be referred to in this manner. Maybe.

Although honestly, if you don't want to attach the function call to document.ready and just want to call it in real time, then this would do the job:

brk.start(jQuery);
3
  • Ok, so it's an issue with how the jQuery is coded then. Thanks for explaining (as you can see I'm not a jQuery expert). So I guess if you are implementing home-grown jquery into WordPress, you have to be cognizant that minor changes will have to be made if you're using a '$' selector. Sep 12 '14 at 14:02
  • No, it's not an issue with how jQuery is coded. It's an issue with the code you posted being incorrect. jQuery works just fine and as intended. This line of code is simply wrong regardless of whether noConflict mode is enabled or not: jQuery(document).ready(brk.start($));
    – Otto
    Sep 12 '14 at 18:26
  • The implication of my comment was that the issue is with how I coded jQuery, not how the actual language is coded. Sep 13 '14 at 1:01
0

Use WP's noConflict version of jQuery. Then use your custom calls like this.

<script type="text/javascript">
  <!--
  jQuery(document).ready(function($) {

    $('#topmenu').toggle();

  });
  //-->
</script>

You can also use $ inside. That's what I do.

5
  • 1
    Question says that using jQuery instead of $ doesn't work either, so wrapper will fail just as well...
    – Rarst
    Sep 11 '14 at 18:23
  • I think you are doing something wrong otherwise it should work. Do you have a link where we can check it online?
    – Robert hue
    Sep 11 '14 at 18:27
  • I am not the OP, just pointing out why your answer likely doesn't apply. :)
    – Rarst
    Sep 11 '14 at 18:27
  • Oops. I didn't check username before replying. Sorry.
    – Robert hue
    Sep 11 '14 at 18:28
  • Correct, the wrapper doesn't work. I will post some code.. Sep 11 '14 at 18:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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