CODEWITHSUNDEEP
jquerytwitter-bootstrap
Arshad
Arshad

Reputation: 1

How can I Pass a specific jquery version to booststrap.min.js

I have a widget type js application that gets embedded in many web sites. My widget uses its own jQuery and Bootstrap. Some of the websites also uses jQuery but of a lower version than the one I use in my widget.

To resolve the conflict between the two jQuery instances and making the website code unaware of my jQuery, I added the below simple logic:

// Backup websites jQuery objects
var websites$=$;
var websitesjQuery=jQuery;

var my$;

// Code for loading jQuery here...

function onjQueryLoad() {
    my$=$.noConflict();
    // Reverting jQuery variable objects to the one it was before loading my jQuery
    $=websites$;
    jQuery=websitesjQuery;
}

Now I want the bootstrap.min.js to use my jQuery version (saved in var my$). By default it uses the predefined jQuery variable. I want to do this because the website's jQuery is too old and is not compatible with the bootstrap. I will appreciate your help. Thank you.

Upvotes: 0

Views: 342

Answers (2)

Arshad
Arshad

Reputation: 1

Thanks Rocket for the hint "It all depends on the order in which you are loading your scripts.", that solved my problem.

I put the bootstrap loader after jQuery load complete but before the $.noConflict()

// Code for loading jQuery here...

function onjQueryLoad() {
    // Code for loading bootstrap.min.js here...
}

function onBootstrapLoad() {
    my$=$.noConflict(true);
}

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227240

It all depends on the order in which you are loading your scripts. You don't need any of this logic, in fact $.noConflict does most of this for you.

Try to do something like this

<script src="jquery_to_be_used_by_bootstrap.js"></script>
<script src="bootstrap.js"></script>
<script src="other_jquery_version.js"></script>
<script>
    // 'true' tells it to restore *both* `$` and `jQuery`
    // otherwise it just restores `$`
    var website_$ = $.noConflict(true);
</script>

Now, $ and jQuery (the global vars) will be jquery_to_be_used_by_bootstrap and website_$ will be other_jquery_version.

Since you can't edit bootstrap to tell it to use a different $ (or jQuery) variable, you'll need to update your website to do so.

This can be fixed simply by doing:

website_$(function($){
    // Anything in here can use `$`
    // and it'll be from `other_jquery_version`
});

Demo of this concept: http://jsbin.com/dopomiyehu/1/edit?html,js,console

Docs: http://api.jquery.com/jquery.noconflict/

Upvotes: 1

Related Questions