javascript - How can I load multiple versions of a jQuery plugin on the same page? -

javascript - How can I load multiple versions of a jQuery plugin on the same page? -

i'm trying utilize latest version of timepicker addon jquery ui.

another library loaded @ before version (1.0.4) want utilize latest (1.4.5) version.

in source, plugin checks see if has been loaded before proceeding:

$.ui.timepicker = $.ui.timepicker || {}; if ($.ui.timepicker.version) { return; }

i did lot of searching ways didn't come helpful. did see might possible load multiple versions of jquery on page using noconflict , attach different version of jquery thought there should easier way.

i gave seek not working - think because variables getting referenced , maybe need instantiated instead - i'm not js expert @ to the lowest degree i'm trying:

// jquery, jqueryui, , 1.0.4 version loaded beforehand <script> var _old_jquery_ui_timepicker = jquery.ui.timepicker; var _old_jquery_ui_timepicker_function = jquery.fn.datetimepicker; jquery.ui.timepicker = null; </script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script> <script> jquery.ui.mytimepicker = jquery.ui.timepicker; jquery.ui.timepicker = _old_jquery_ui_timepicker; jquery.fn.mydatetimepicker = jquery.fn.datetimepicker; jquery.fn.datetimepicker = _old_jquery_ui_timepicker_function; </script>

writing code felt dirty, , again, didn't work. so, after not having luck tried searching more , still didn't come anything. tried searching for:

loading multiple jquery plugin versions on same page jquery plugins noconflict load jquery plugins in different namespace load jquery plugins in different domain load jquery plugins in different context

is simple , i'm not searching or right thing or impossible?

why i'm attempting this

i need features newer version of the timepicker, don't want code break when other library updated or replaced.

the web app using (non-jquery) plugin big codebase reliant on before version (1.0.4) of timepicker addon it's not place update other plugin's codebase i don't want write code reliant on before version (1.0.4) of timepicker addon, reliant on other codebase load older version (and perchance break when updated)

so, agree using 2 versions of jquery plugin not ideal. however, need add together in functionality later version of jquery timepicker plugin. i believe possible this, maybe javascript's prototyping , inheritance, , without having 'hack it' @oliboy50 suggests doing find-and-replace plugin's sourcecode.

are there javascript pros demonstrate how in (even though not ideal)?

please note: yes, have established "it bad idea" seek , this, principle know if javascript's prototypal language allow done. noconflict (i.e. loading multiple versions of jquery) mentioned in comments , answers. although "would work" it's not reply i'm looking for. also, modifying plugin sourcecode find-and-replace not elegant solution either.

this doesn't appear possible, plugin. one, plugin doesn't allow redefined/overwritten:

/* * lets not redefine timepicker, prevent "uncaught rangeerror: maximum phone call stack size exceeded" */ $.ui.timepicker = $.ui.timepicker || {}; if ($.ui.timepicker.version) { return; }

so can't load older version, initialize it, , load newer version on top of old one, newer 1 won't load.

secondly, if plugin loaded in separate context, via requirejs, doesn't have handle on jquery ui widgets. in other words can bring in plugin , attach separate jquery instance, jquery ui uses 1 global div datepicker , separate instance doesn't work it. i've set next illustration (see total jsfiddle):

html

<script src="http://rawgit.com/trentrichardson/jquery-timepicker-addon/v1.0.4/jquery-ui-timepicker-addon.js"></script> <p><input id="date1" type="text" /></p> <p><input id="date2" type="text" /></p> <p><input id="date3" type="text" /></p> <div id="qunit"></div> <div id="qunit-fixture"></div>

javascript

require.config({ paths: { 'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min', 'jquery-ui': 'http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min', 'jquery.timepicker': 'http://rawgit.com/trentrichardson/jquery-timepicker-addon/v1.4.5/dist/jquery-ui-timepicker-addon' }, shim: { 'jquery.timepicker': { deps: ['jquery', 'jquery-ui'], init: function(jquery) { homecoming jquery.noconflict(true); } } }, }); qunit.test('global timepicker 1.0.4', function (assert) { assert.ok($.timepicker.version == '1.0.4', $.timepicker.version); }); $('#date1').timepicker(); require(['jquery', 'jquery.timepicker'], function ($) { qunit.test('amd timepicker 1.4.5', function (assert) { assert.ok($.timepicker.version == '1.4.5', $.timepicker.version); }); // not working... $('#date2').datepicker(); }); settimeout(function() { qunit.test('global timepicker still 1.0.4', function (assert) { assert.ok($.timepicker.version == '1.0.4', $.timepicker.version); }); $('#date3').timepicker(); }, 2000);

the solution can see @oliboy50 suggests, clone source , rename plugin.

edit

hmm... maybe works (fiddle):

// maybe working... $.datepicker = jquery.datepicker; $.fn.datepicker = jquery.fn.datepicker; $('#date2').timepicker();

javascript jquery jquery-ui jquery-ui-datepicker datetimepicker