0

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() ) ?

5
  • 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. Commented Sep 6, 2016 at 7:27
  • What reason do you have for multiple versions in one page? Crazy I say Commented 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? Commented 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. Commented 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. Commented Sep 6, 2016 at 7:32

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.