wordpress jquery error Property '$'

Question

I'm getting the following error when using the simple code within wordpress. any idea how to solve this problem?

error:

Uncaught TypeError: Property '$' of object [object Object] is not a function 
(anonymous function) 
x.event.dispatch
v.handle

Javascript:

<script type="text/javascript">
jQuery('#room_type').change(function(){
        var location = $(this).val(),
            div = $('#' + location);
        jQuery('div').hide();
        div.show();
});
</script>

HTML:

<select id="room_type">
    <option value="">-- Type --</option>
    <option value="oneroom">One room</option>
    <option value="tworoom">Two room</option>
</select>

<div id="oneroom" style="display:none">
    CONTENT 1
</div>
<div id="tworoom" style="display:none">
    CONTENT 2
</div>

Right here in the documentation: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers — Matthew Blancarte, Aug 29 '13 at 20:25

Jonny Sooter · Accepted Answer · 2013-08-29T20:42:52.550

3

Wrap your functions and jQuery code in this:

;(function ($) {

    //Code in here

})(jQuery);

This assigns the $ to jQuery only. Doing this prevents conflicts with other libraries/code that also use the $. Also leading this code with a ; protects your function from unclosed scripts. I wouldn't rely on the noConflict() method.

<script type="text/javascript">
;(function ($) {
    $('#room_type').change(function(){
        var location = $(this).val(),
            div = $('#' + location);
        $('div').hide();
        div.show();
    });
})(jQuery);
</script>

jsFiddle

For you other problem, try this:

<script type="text/javascript">
;(function ($) {
    $('#room_type').change(function(){
        var location = $(this).val(),
            div = $('#' + location);
        $("div[id$='room']").hide();
        div.show();
    });
})(jQuery);
</script>

edited Aug 29 '13 at 20:42

answered Aug 29 '13 at 20:20

Jonny Sooter

2,417
1
24
40

the page when blank when selecting an option from the drop down – acctman Aug 29 '13 at 20:23
@acctman doesn't sound like a related problem. Your code, once fixed, hides all divs on teh page which of course makes your page go away. – Kevin B Aug 29 '13 at 20:24
@KevinB I removed other jquery code from the page and it still does the blank page on select – acctman Aug 29 '13 at 20:31
@acctman This will cause your page to appear blank: `jQuery('div').hide();` it selects all divs and hides them. – Kevin B Aug 29 '13 at 20:34
@acctman I don't know what to tell you. I built a fiddle and your code works just fine here: http://jsfiddle.net/jonnysooter/KyajU/ – Jonny Sooter Aug 29 '13 at 20:36
@JonnySooter here is an example of whats happening `nemx.me/avant/floorplans/` – acctman Aug 29 '13 at 20:39
1

@acctman try the code from my latest edit and it should work. – Jonny Sooter Aug 29 '13 at 20:44
is there a way to make all selections display as a default? – acctman Aug 29 '13 at 20:58
1

This question has been answered. If you need additional help, you should open another question. – Jonny Sooter Aug 29 '13 at 21:03

score 3 · Answer 2 · answered Aug 29 '13 at 20:21

3

That is because $ is not defined in your code (jQuery.noConflict was probably used somewhere)

Just use jQuery as your jQuery variable

answered Aug 29 '13 at 20:21

Naftali

144,921
39
244
303

score 2 · Answer 3 · answered Aug 29 '13 at 20:21

2

jQuery.noConflict was probably called, so you won't be able to use the shorthand $ without first setting up an alias.

This is often done with:

(function ($) {//jQuery is now stored as the `$` parameter in this function
    ...code here...
}(jQuery));

Alternatively, for document.ready you can use the aliasing shorthand:

jQuery(function ($) {
   //this code will execute on DOM ready and the `$` parameter will be set
    ...code here...
});

Alternatively, stop using $(...) as a function, and replace it with the more verbose jQuery(...):

jQuery('#room_type').change(function(){
    var location = jQuery(this).val(),
        div = jQuery('#' + location);
    jQuery('div').hide();
    div.show();
});

answered Aug 29 '13 at 20:21

zzzzBov

174,988
54
320
367

the page is being refreshed to a blank window every time I select an option from the drop down. no error in the console window – acctman Aug 29 '13 at 20:29
1

@acctman, that would be because you are hiding every div on the page with `jQuery('div').hide()`. – zzzzBov Aug 29 '13 at 20:35
how do i target just id="oneroom" and id="tworoom" – acctman Aug 29 '13 at 20:50
@acctman, I recommend googling that question first, and if you can't find an answer, to then move on to asking a question on [SO]. [That question is so laughably easy to answer, that it concerns me that you're not able to find the answer on your own](http://api.jquery.com/id-selector/). – zzzzBov Aug 29 '13 at 21:10

score 1 · Answer 4 · answered Aug 29 '13 at 20:22

Do what Jonny Sooter said, or change any $ to jQuery like so:

<script type="text/javascript">
jQuery('#room_type').change(function(){
    var location = jQuery(this).val(),
        div = jQuery('#' + location);
    jQuery('div').hide();
    div.show();
});
</script>

score 1 · Answer 5 · edited Aug 29 '13 at 20:25

1

<script type="text/javascript">
jQuery('#room_type').change(function(){
        var location = $(this).val(),
            div = $('#' + location);
        jQuery('div').hide();
        div.show();
});
</script>

change this to:

<script type="text/javascript">
jQuery('#room_type').change(function(){
        var location = jQuery(this).val(),
            div = jQuery('#' + location);
        jQuery('div').hide();
        div.show();
});
</script>

edited Aug 29 '13 at 20:25

Kevin Jantzer

9,215
2
28
52

answered Aug 29 '13 at 20:23

Pranay Bhardwaj

1,059
8
9

1

Need to do it to the `$(this)` line too. – Kevin B Aug 29 '13 at 20:24
thanks Kevin, I missed that – Pranay Bhardwaj Aug 29 '13 at 20:25

wordpress jquery error Property '$'

5 Answers5