CODEWITHSUNDEEP
javascriptjquery
radiantstatic
radiantstatic

Reputation: 342

Initializing jQuery plugin with noConflict

So I'm attempting work within the constraints of a request and have made some progress bet am still getting locked up. Here's the scenario:

Currently, I'm working with a website that depends on jQuery v1.4.2. Since the only access I'm given on the backend is the ability to inject content into a CMS driven page, I had been sideloading jQuery 1.11 to support for some much needed functionality.

Flash forward to yesterday and I was made aware that the client's dev team has now bundled v1.4 and v1.11 and has noConflicted 1.11 into $$.

(function() {
    $$ = $.noConflict( true );  // Move jQuery 1.11.0 into $$ and restore $ to jQuery 1.4.2
})();

// Use the following self-invoking anonymous function 
// when you need to run code that depends on $ = jQuery 1.11
// Otherwise, you can access jquery 1.11 with $$
//  (function( $ ){
// inside here $ is jQuery 1.11
// and jQuery 1.4.2 is out of scope
//  })( $$ );

Since my scripts (and the plugin I am attempting to load into the page) are injected in the middle of the page and the jQuery v1.4 and v1.11 are at the bottom of the page, I am loading it this way:

(function checkForJquery() {
    if ('$$' in window) {
        (function($) {
            console.log('success');
            $.getScript("myplugin.jquery.js", function() {
                $( ".devices").myplugin({
                    // devices - Array | productID
                    prop1: ["prod3960155", "prod3640151", "prod3640152", "prod5530141"],
                    prop2: "attribute",
                    prop3: "attribute"
                });
            });
        })($$);
    } else {
        console.log('not yet');
        window.setTimeout(checkForJquery, 1000);
    }
})();

So the issue I'm having is that if I use:

(function( $ ){})( $$ );

I get nothing - the plugin never initializes. However, if I use:

(function( $ ){})( jQuery );

it does work, but then I don't have access to the latest API. Any ideas why one would work and not the other?

For clarity, I'm using the jQuery Plugin Boilerplate and it starts like this:

;( function( $, window, document, undefined ) { } )( jQuery, window, document );

Any insights would be much appreciated!

Thanks, Joe

Upvotes: 1

Views: 751

Answers (1)

eisbehr
eisbehr

Reputation: 12452

The reason your script won't work is not your call of the plugin, it is the creation.

To explain, the code below only uses the second instance $$ to search for all elements with the class .devices and starts your plugin myPlugin. Nothing else.

(function($) {
    $(".devices").myplugin();
})($$);

But you have registered your plugin only to the old version. This is the reason why it workes, when you use jQuery instead of $$ on the code above.

To use the $$ jQuery instance in your plugin, you have to set it on creation too. But there you has passed in jQuery. And because you used noConflict, the name jQuery belongs to the old version of jQuery.

To register your plugin to the right instance, you have to change it to $$ on the creation too.

;(function($, window, document, undefined){})($$, window, document);

To make your plugin working on other installations, you can add jQuery as a fallback. This would help if you use the plugin on other sites too and don't want to change it every time.

;(function($, window, document, undefined){})($$ || jQuery, window, document);

Thats it.

Upvotes: 2

Related Questions