Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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({
    autocomplete: function   ...

2) jquery.ui.autocomplete.js (from the latest jquery ui library), that also uses the autocomplete keyword.

$.widget( "ui.autocomplete", {   ...

Is there a way to specify that i am using only the second, jquery.ui widget when calling

$( "#tags" ).autocomplete ...

without changing the 2 files?

like image 282
dov.amir Avatar asked Aug 10 '12 09:08

dov.amir


People also ask

How to avoid conflict between two jQuery?

Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.

Is an alias of jQuery?

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery , so all functionality is available without using $ . If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.

Is not defined in jQuery?

You may experience the “jQuery is not defined error” when jQuery is included but not loaded. Make sure that it's loaded by finding the script source and pasting the URL in a new browser or tab. The snippet of text you should look for to find the URL to test.

Is not a function error jQuery?

on if not a function" jQuery error occurs for 2 main reasons: Loading an old version of the jQuery library that doesn't support the on function. Loading a library that overrides the value of the dollar sign $ variable.


2 Answers

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.

like image 75
Alnitak Avatar answered Oct 19 '22 15:10

Alnitak


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.

like image 2
Gil Zumbrunnen Avatar answered Oct 19 '22 17:10

Gil Zumbrunnen