-1

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>
Improve this question
1

5 Answers 5

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

the page when blank when selecting an option from the drop down
@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.
@KevinB I removed other jquery code from the page and it still does the blank page on select
@acctman try the code from my latest edit and it should work.
This question has been answered. If you need additional help, you should open another question.
|
3

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

Just use jQuery as your jQuery variable

Improve this answer

Comments

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();
});
Improve this answer

4 Comments

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, that would be because you are hiding every div on the page with jQuery('div').hide().
how do i target just id="oneroom" and id="tworoom"
@acctman, I recommend googling that question first, and if you can't find an answer, to then move on to asking a question on Stack Overflow. That question is so laughably easy to answer, that it concerns me that you're not able to find the answer on your own.
1

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>
Improve this answer

Comments

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>
Improve this answer

2 Comments

Need to do it to the $(this) line too.
thanks Kevin, I missed that

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.