multiple jquery extensions on the same page cause an error, solutions anybody?

Question

Hello all,

I am using IE 8, have got a web page with 2 jquery extensions (one is a menu, the other one is a fency textbox). When I run each of the extensions alone they work fine, when I run them together I get the following js error:

Error: Object doesn't support this property or method

I am registring the handlers in the following way:

The Textbox:

<script type="text/javascript">
        $().ready(function() {
            $('#ctl00_Main_Status1_tbStatus').textboxhelp({ help: 'I am thinking of a...' });           
        });
    </script>

The Menu:

<script type="text/javascript">
        $(function() {
            alert('in menu');
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

Any help would be greatly appriciated, I am very new to the jquery...

Answer 1

When you run them or include them? If the error happens when you include them there's probably some collision in function names or something.

In either case, try downloading Firefox and running the FireBug plugin to see if that helps tracking down the issue.

Answer 2

Shouldn't your second script The Menu, also be enclosed in the document.ready handler?

$().ready(function() { 
    /*the menu script here*/ 
    /*the textbox script here */
});

Answer 3

Ok, I've updated the code. still same error.

Answer 4

It might be the $ alias, check the plugins to see.

(function($){
   //theplugin code here
})( jQuery );

This allows the use of the $ inside without confusion

---

@Jeff THIS:

$(function(){
  //stuff here
});

Is the same as:

(function($) {
  $(document).ready(function() {
    // your code here
  })
})(jQuery)

but perhaps not as good as (without the binding (jQuery) at the end), which only comes into play if you use other libraries that use the $.

Answer 5

Ok, Thank you everyone for your help. Mark's answer was the solution to my problem. I used the third option and well... it worked. As to your reply Jeff, Well, I moved the code arround, though even when I corrected it to what you said it gave me the same error.

So, if anyone's interested or will happen to fall into the same error here's the code for both my controls:

Ctrl 1:

<script type="text/javascript">
        (function($) {
            $(document).ready(function() {
            $('#ctl00_Main_StatusCtrl_tbStatus').textboxhelp({ help: 'I am thinking of...' });
            });
        })(jQuery)
    </script>

Ctrl 2:

<script language="javascript" type="text/javascript">
  (function($) {
      $(document).ready(function() {
          $("#1, #2, #3").lavaLamp({
              fx: "backout",
              speed: 700,
              click: function(event, menuItem) {
                  return false;
              }
          });
      });
  })(jQuery)
</script>

once again, thank you.

Answer 6

Specifically to: Object doesn't support this property or method

are your includes in order, and above your scripts? You can get this kind of error if you do not have all your dependant plugin files.

Put your jquery include first...