Conflict Between Two Jquery Plugins With Same Function Name

I am working in a large site that has 2 conflicting jquery plugins included for doing autocmplete. 1) jquery.autocomplete.js (not part of jquery ui) that does : $.fn.extend({ a

Solution 1:

As the second autocomplete is using the $.Widget method of registering itself with jQuery it'll be easiest to change the behaviour of the in-house one.

You won't be able to load both of them without making some sort of change to the jQuery object between the two script loads because they'll just conflict with (or overwrite) each other.

I would try this:

<script src="jquery.autocomplete.js"> </script>
<script>
    // rename the local copy of $.fn.autocomplete
    $.fn.ourautocomplete = $.fn.autocomplete;
    delete $.fn.autocomplete;
</script>
<script src="jquery-ui.autocomplete.js"> </script>

Which will then make:

$().autocomplete()

use the jQuery UI version, and

$().ourautocomplete()

use your local version.

Solution 2:

I tried to do it with the tabs function of jQuery UI, it should work the same for you. A function is technically a js object, so you could simply rename it :

    $.fn.tabs2 = $.fn.tabs;
    delete $.fn.tabs;
    $("#tabz").tabs2({});

Hope that helps!

Edit

Like Alnitak suggested, you also need to delete the previous function's name. Also, I think .fn is required.