How can I create tabs (jQuery UI) with jQuery 1.8.3

Question

I used to create tabs by calling $(element).tabs(...) when I was using jQuery 1.4.4. Now, with jQuery 1.8.3, I get an error:

Uncaught TypeError: Object # has no method 'tabs'

Why such an error? The only difference is the version of jQuery (not even jQuery UI, just jQuery).

NB I'm using jQuery-UI version 1.10.0

Answer 1

I found the problem, it was to do with conflicting versions of jQuery.

Basically, drupal loads 1.4.4, but I want to use 1.8.3, so I do something like this:

var drupalsJQuery = jQuery;
// Load jq.1.8.3.js
// Load jq.ui.1.9.2.js

// MY CODE GOES HERE

$ = jQuery = drupalsJQuery; // Restore $ and jQuery to their original value (the jQuery object of Drupal's version of jQuery (1.4.4))

In the MY CODE GOES HERE section, if I write console.log($().jquery);, it prints out 1.8.3, which is what I want, so I thought my version conflicts were over. What I hadn't noticed was that it doesn't always work. Take this example (still in the MY CODE GOES HERE section):

console.log($().jquery);
// Prints 1.8.3
$(document).ready(function () {
  console.log($().jquery);
  // Prints 1.4.4 !!!!
});

As you can see, the version changes inside of $(document).ready(function () { /*HERE*/ });

The solution was to pass the jQuery object along as a parameter to the anonymous function:

console.log($().jquery);
// Prints 1.8.3
$(document).ready(function ($) {
  console.log($().jquery);
  // Prints 1.8.3 !!!!
});

Now the version stays correct.

I can't properly explain this behaviour, so maybe someone can come up with a better answer based on these findings... The other problem being that my original question was beside the point after all.. Not too sure what to do here to make this relevant to other users.