I added a new module and it breaks Javascript from my theme. How can I fix?

Question

I have recently installed a new module, "Views Nivo Slider", and it is breaking the javascript on my web site that I have added via my theme. I'm at a loss as to what I should do to fix the issue.

By Break, I mean that the code from my theme no longer executes. It also throws no errors. It just acts like the code no longer exists

In my custom theme, I add javascript by adding this line in the theme:

scripts[] = js/js.js

I had added the code by using the onready event:

$(document).ready(function() {

Now I read online that perhaps this was not the best method to add code and that I should bind with drupal events. I tried to change my code to use this method to see if it would make a difference:

Drupal.behaviors.addMenu = function (context) {

My code always works IF this module is not being used. However, whenever I turn this module on, it breaks all of my javascript. I've spent about 2 hours looking around and searching for articles and I have had no luck so far.

The articles I was looking at to learn more about behaviors were:

http://www.phase2technology.com/node/663/

http://mydrupalblog.lhmdesign.com/drupal-theming-jquery-basics-inc-drupal-behaviors

The javascript code being used by this module is:

// $Id: views_nivo_slider.js,v 1.1.2.5.2.2 2010/06/18 15:04:17 pedrofaria Exp $ 
Drupal.behaviors.views_nivo_sliderBehavior = function (context) {
  $('.views-nivo-slider').each(function() {
    var id = $(this).attr('id');
    var vns = $(this);
    var cfg = Drupal.settings.views_nivo_slider[id];

    // Fix sizes
    vns.data('hmax', 0).data('wmax', 0);
    $('img', vns).each(function () {
      hmax =  (vns.data('hmax') > $(this).height()) ? vns.data('hmax') : $(this).height();
      wmax =  (vns.data('wmax') > $(this).width()) ? vns.data('hmax') : $(this).width();

      vns.width(wmax).height(hmax).data('hmax', hmax).data('wmax', wmax);
    });

    vns.nivoSlider(cfg);
  });
};

The only error on the page is from jqeuery reading the minified javascript. I don't think this is causing the issue b/c the rotator (what uses this) still works.

Can someone please provide me with some guidance?

Answer 1

The screenshot in your question shows an error regarding the jQuery live() function, this was added in jQuery 1.3 and Drupal 6 comes with 1.2.6.

If you want to use a newer version of jQUery (needed by some modules), you can user the jQuery update module or see this tutorial: Using Newer Versions of jQuery with Drupal 6.

Answer 2

I have a custom theme with javascript and the Nivo Slider working together fine on a d6 site. The only thing I did with my javascript in the theme was wrap it in:

 Drupal.behaviors.THEMENAME = function () {

     // ALL of my theme javascript here

 }

Looking at your examples above, it appears that you might be wrapping individual js functions in your theme that way instead, so if that's the case, just stuff them inside the drupal behaviors wrapper function.

ADDITION: Re: question below regarding THEMENAME, I used it just to avoid any potential namespace collisions, but, from http://drupal.org/node/304258...

Any function defined as a property of Drupal.behaviors will get called when the DOM has loaded. drupal.js has a $(document).ready() function which calls the Drupal.attachBehaviors function, which in turn cycles through the Drupal.behaviors object calling every one of its properties, these all being functions declared by various modules as above, and passing in the document as the context.

...so I guess any random name could be put there.