JQuery Tools tabs conflicts with JQuery UI

Question

I'm using JQuery tools' tabs feature and at the same time I use JQuery UI.

If I include both JS libraries, Jquery tools with tabs does not work.

How to fix this conflict? Any help is appreciated.

Thanks in advance.

Unexceptionable

Answer 1

You could get a custom jQuery-ui build that that doesn't include the tabs but that might cause some confusion later on. A better approach, IMHO, would be to edit the jQuery-tools tabs.js and change this line:

$.fn.tabs = function(query, conf) {

to something like this:

$.fn.fpTabs = function(query, conf) {

I used "fpTabs" for "flowplayer.org tabs", you can use whatever name works for you. That should clear up your conflicts without causing problems anywhere else. Of course, you'd have to remember that you changed tabs.js if you ever upgrade but that should be less troublesome than messing around with a tab-less jquery-ui.js file.

Wampumpeag

jQuery-UI has tabs and has taken $.tabs for its own use, the jQuery-tools tabs from flowplayer.org also wants to use $.tabs in its tabs.js so edit the tabs.js from flowplayer.org as above and the conflict should go away. Of course, you'll have to host your own copy of tabs.js for this to work. – Wampumpeag

I figured it out by naming the flowplayer tabs. Thanks. – Unexceptionable

I have spent the last week chasing this issue. Your solution worked, but I had to de-minify jquery.tools.min.js V1.2.7 which was included with the WP LinkedIn WordPress plugin. Thanks! – Robbi

@BobJones: You might be able to get around that with some monkey patching and carefully controlling the load order. (1) Load jquery.tools.min.js. (2) Patch the names with something like $.fn.fpTabs = $.fn.tabs; delete $.fn.tabs. (3) Load the jQuery UI JavaScript. I don't know how well that would work with a WP plugin though. This sort of hackery would also let you pull everything off a CDN. I think this is the sort of thing that Carl G is suggesting above . – Wampumpeag

Answer 2

There is an easier method. Whenever you use jquery with other libraries (Tools | Prototype | MooTools | etc.) you can use a special noConflict function to re-assign the $ to another variable. For example:

var $j = jQuery.noConflict();    // assign the main jQuery object to $j
$j("#tabs-container").tabs();    // use $j as you would normally use $

Or you can be more explicit and use jQuery.someFunction() instead of $.someFunction.

Engleman

I'm not sure how this helps. Both jQuery UI and jQuery Tools are built on jQuery. The problem is that both try to define a function on jQuery objects named tabs. So even if I use your method of renaming jQuery, when I use jQuery to get a jQuery object (which is the usual first step for using either jQuery UI or jQuery Tools) the conflict will exist in the returned object. – Chauchaucer

Answer 3

You can build your own jquery UI in this url http://jqueryui.com/download

only pick tools you need and do not include component TAB in the options to avoid conflict with jquery tools

Ecliptic

Answer 4

Our solution is to include complete jQuery UI and jQuery Tools libraries, but to interject a small javascript fix that renames jQuery UI's tabs so that it does not interfere with jQuery Tools (which contains the tabs feature we use in our site.) We first import jQuery UI, then perform the fixup, and then import jQuery Tools.

jquery-ui-jquerytools-tabsconflictfix.js:

// Both jQuery UI and jQuery Tools define a tabs function on jQuery objects.
// We use both libraries (jQuery Tools for its non-restricting tabs function and overlay; jQuery UI for autocomplete.)
// To avoid a conflict over tabs, rename the jQuery UI tabs.  Call this code after loading jQuery UI but before
//  calling jQuery Tools.
var oldTabs = $.fn.tabs;
delete $.fn.tabs;
$.fn.jQueryUiTabs = oldTabs;

It is preferable to set this up so that other programmers are unlikely to accidentally avoid it. We are in an ASP.NET MVC 4 environment, so we create a script bundle that automatically includes the scripts in the correct order:

App_Start\BundleConfig.cs

namespace OurWebApp
{
    public class BundleConfig
    {
        /// <summary>
        /// Good Bundling resource, succinctly highlighting a range of ways to use this feature:
        /// http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
        /// </summary>
        /// <param name="bundles"></param>
        public static void RegisterBundles(BundleCollection bundles)
        {
            ...
            bundles.Add(new ScriptBundle("~/js/jquery-ui-and-tools").Include(
                "~/Scripts/jquery-ui-1.9.2.min.js",
                // Both jQuery UI and jQuery Tools define .tabs on jQuery objects.  We use
                // jQuery Tools' version, and this fix renames jQuery UI's version to get it out of the way.
                // So the load order must be: jQuery UI, the fix, and then jQuery Tools
                "~/Scripts/jquery-ui-jquerytools-tabsconflictfix.js",
                "~/Scripts/jquery-tools-1.2.7.min.js"));
            ...
        }
    }
}

Chauchaucer

Or $.fn.fpTabs = $.fn.tabs; delete $.fn.tabs if you want to do it the other way around. – Wampumpeag

Answer 5

in my case i change the name of the jquerytools tabs function. from:

 (e.initialIndex)}a.fn.tabs=function(b,c){

to:

(e.initialIndex)}a.fn.tooltabs=function(b,c){

so i didn't have to change jquery-ui-tools, this is usefull if you are getting this script from CDN.

Koziel

Answer 6

This specific question is about a conflict between the Tabs function in jQueryTools and jQueryUI and not between libraries that both wish to use the "$" and so the noConflict comments are not relevant.

You need to redefine the tabs function (from either library) as one is loaded and before the next is loaded.

First you load your jQuery library and jQueryTools...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/all/jquery.tools.min.js"></script>

Then you redefine the tabs function...

<script type="text/javascript">
var oldTabs = $.fn.tabs;
delete $.fn.tabs;
$.fn.jTabs = oldTabs;

jQuery(document).ready(function($){
    $("ul.tabs").jTabs("div.panes > div");}
);

Then you load the jQueryUI library...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

Of course, credit to Carl G for this solution, but I thought it was important to draw the distinction between the noConflict solutions that will not work and the loading sequence/redefinition of the tabs function.

Jemie