Let's say i am using 3 different versions of jquery(1.3, 1.5, 2.3) in index.html. And i am using a CSS framework which uses jquery 1.3(and of course in that css framework $ symbol has been used as alias for jQuery. Is there anyway that i can tell the CSS framework to use the 1.3 jquery, without modifying js files of that framework, using noconflict mode and changing every occurrence of $ symbol in that framework's js files to $j(assuming i have create this variable $j = noconflict() ) ?
-
1"Let's say i am using 3 different versions of jquery(1.3, 1.5, 2.3) in index.html" Let's say that's a very bad idea, and rather than spending time dealing with the problems it causes, you're much better off spending that time standardizing your code on a single, up-to-date version.T.J. Crowder– T.J. Crowder2016-09-06 07:27:56 +00:00Commented Sep 6, 2016 at 7:27
-
What reason do you have for multiple versions in one page? Crazy I sayStudioTime– StudioTime2016-09-06 07:27:59 +00:00Commented Sep 6, 2016 at 7:27
-
1@T.J.Crowder it sounds like it's a third party framework which utilizes an older version of jQuery, so that may not be plausible. But none the less, I've not heard of a CSS framework which relies on jQuery, perhaps the Javascript files within that framework?N.J.Dawson– N.J.Dawson2016-09-06 07:29:01 +00:00Commented Sep 6, 2016 at 7:29
-
1@N.J.Dawson: Right. So the fix is to update to a newer version of it, or if it's been abandoned so long that it relies on the features in jQuery 1.3 that have changed/gone away in something modern, to move off it to something actually maintained.T.J. Crowder– T.J. Crowder2016-09-06 07:29:56 +00:00Commented Sep 6, 2016 at 7:29
-
@T.J.Crowder in a perfect world, perhaps. I'm not saying slap together something that works, but occasionally what you need is niche, and the "fork and fix" is sometimes a little too much work (or perhaps out of the question, depending on the extent of changes required) when you first intended on an easy plug n' play technique.N.J.Dawson– N.J.Dawson2016-09-06 07:32:55 +00:00Commented Sep 6, 2016 at 7:32
1 Answer
If the CSS framework is written half-properly, you do it like this:
<script src="jquery-1.3.js"></script>
<script src="the-css-framework.js"</script>
<script>
var jq1_3 = jQuery.noConflict();
</script>
<script src="jquery-up-to-date.js"></script>
The CSS framework will (if it's written half-properly) grab the then-current version of jQuery and use that in its code. If you need to use it in your code, you do that with jq1_3, not $.
Here's an example with jQuery 1.11, loading the SimpleModal plugin into it, then loading jQuery 2.2.4. We can use SimpleModal with jQuery 1.11, but not with jQuery 2.2.4:
// Works
jq1_11.modal("<div>Hi there jQuery 1.11</div>");
// Fails, the plugin isn't loaded on this version
try {
$.modal("<div>Hi there jQuery 2.2.4</div>");
} catch (e) {
console.log("Error: " + e.message);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js"></script>
<script>
var jq1_11 = jQuery.noConflict();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
But that's a workaround. The fix is to not spend time dealing with the problems loading multiple copies of jQuery causes, but instead spend that time standardizing and updating your various libs to use a single, up-to-date version of jQuery. Sometimes that's not possible in the short-term and you have to work around things, but it should be the primary goal.