TypeError: $(…) is null error in firebug but code works on jsFiddle

Question

You can see my js (and associated html and css) at: http://jsfiddle.net/twsx7/9/

I am working on a tweak to work with Blackboard Learn 9.1 (so if anyone has experiencing with the learning management system, or with the tweaks building block they might have some clue already as to why I am getting this problem).

The change I am making involves checking what course theme is applied and then adding a class to a table based on that so that the table is styled to match the theme.

When i run this on our server I get the error $(...) is null when it reaches var theme_id = $(".current").attr("id");. The rest of the JS works (note that the top section of the JS is normally another file that's included on the page, couldn't link it to jsfiddle as its on an authenticated server)

My contributions to this file are (and where the code is failing):

line 242

$unitMap.addClass(getTheme());

lines 381 - 385

function getTheme() {
    var theme_id = $(".current").attr("id"); // error occurs this line
    var theme = $("#"+theme_id).find("a").html();
    return theme.toUpperCase();
}

This is my first attempt at jQuery so one of my concerns is that I'm using the wrong syntax for the version of jQuery the code was written with.

I located the following within the code when you select to include a tweak:

<script src='/webapps/qut-tweakbb-BBLEARN/jquery.js' type='text/javascript'></script><script src='/webapps/qut-tweakbb-BBLEARN/jquery.tweakSetup.js' type='text/javascript'></script>

The code in the top of the jsFiddle is from jquery.tweakSetup.js

I am hoping I've just used the wrong markup for the version of jQuery (though I can't seam to find what version the original code was written in) any advice would be greatly appreciated.

Answer 1

1. Make sure jQuery is loaded before you run your custom script
2. Did you copy your code from JSFiddle and then used it immediately? Fiddle code has the habit to be corrupt. The ; is often defined as an invalid character. Remove it and retype it yourself.

ADDED: 3. As John Fontaine pointed out, it is possible that jQuery conflicts with another library. To bypass this, you canuse jQuery noConflict mode. The documentation is quite clear on this, but I'll give some examples, just in case.

The best methods are the following, or at least that is my preference:

Use another variable instead of $, such as $j. By doing so, it is clear to you and to any other revisor of your code that this code depends on another library than $.

Example:

var $j = jQuery.noConflict();

// Use jQuery via $j(...)
$j(document).ready(function () {
  var secondary = $j("#secondary-footer");
  secondary.hide().addClass("fixed").fadeIn("fast");

  $j(window).scroll(function () {
    if (secondary.offset().top >= ($j(document).height() - 350)) {
      secondary.removeClass("fixed");
    } else if (secondary + ":not('.fixed')") {
      secondary.addClass("fixed");
    }
  });
});

The "danger" of this method is that you might forget to use this variable sometimes. What you can do is start of by using the normal dollar sign and when you have finished, do a find of replace.

Possibly the most straight-forward method:

jQuery(function ($) {
  var secondary = $("#secondary-footer");
  secondary.hide().addClass("fixed").fadeIn("fast");

  $(window).scroll(function () {
    if (secondary.offset().top >= ($(document).height() - 350)) {
      secondary.removeClass("fixed");
    } else if (secondary + ":not('.fixed')") {
      secondary.addClass("fixed");
    }
  });
});

This allows you to use jQuery in that block, i.e. the block that starts with jQuery(function ($) { and ends with });.

Answer 2

Blackboard Learn uses the prototypejs http://www.prototypejs.org/ library on most pages. If you want to use JQuery scripts and plugins you must use no-conflict mode and invoke your $('') style calls as JQuery('') calls instead. See JQuery docs at http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Answer 3

I have several scripts running on same page using jQuery.noConflict();

var $j = jQuery.noConflict();

function getTheme() {
    var theme_id = $j(".current").attr("id"); // error occurs this line
    var theme = $j("#"+theme_id).find("a").html();
    return theme.toUpperCase();
}

just use $j where $ or you can use create more by using jQuery.noConflict()