CODEWITHSUNDEEP
jquery
turbonerd
turbonerd

Reputation: 1306

Using two versions of jQuery and the simplest, most code-efficient method of noConflict

I'm developing a widget which runs within a framework that I have no control over. My widget uses an up-to-date version of jQuery where the framework uses some fairly horrendous old version.

Recently I've been having some problems with my code and I (eventually) worked out that it was a jQuery conflict issue.

The widget format is a bit bizarre, and is run as an iframe within this framework/template.

It uses the widget.onload function instead of any jQuery doc ready function. I tend to run one or two functions in there to initialise a separate class.

<script type="text/javascript">
//<![CDATA[

    MyClass = {
        init : function() {
            // Where I build my "pseudo-class"
        }
    }

    widget.onLoad = function(){
        /* My code goes here */

        MyClass.init();
    };

//]]>
</script>

This isn't a problem - it's just context - and usually I can run jQuery as normal as follows:

widget.onLoad = function(){
    /* My code goes here */

    var id = $('a.student_iframe_popup').attr("id");
    MyClass.init(id);
};

I also reference other scripts within my widget as normal in javascript:

<script type="text/javascript" src="/user/74/187887.js"></script> <!-- jQuery 1.10.2 -->
<script type="text/javascript" src="/user/74/188165.js"></script> <!-- jQuery bPopup -->
<script type="text/javascript" src="/user/74/188166.html"></script> <!-- Student Flags Iframe Popup -->

The last script I've linked there is just a simple function that I intend to use in a number of my widget scripts:

  $('body').on("click", ".student_iframe_popup", function() {
        $('body').append('<iframe></iframe>');

    var student_id = 'student_' + $(this).attr("id");

    $('iframe').attr("width", 800);
    $('iframe').attr("height", 600);
    $('iframe').attr("id", student_id);
    $('iframe').attr("src", '/index.phtml?d=825090');

    $('iframe').bPopup({
        modalClose: true,
        escClose: true,
              opacity: 0,
        position: ['auto', 10]
    });
  });

This all works fine - except that in IE, with some of my widgets, I get random bugs. If I change my code to utilise the following...

widget.onLoad = function(){
    /* My code goes here */
    jQuery.noConflinct();

    var id = jQuery('a.student_iframe_popup').attr("id");
    MyClass.init(id);
};

And change my referenced script from $ to jQuery everything works fine - the "bugs" magically disappear.

However, I use a lot of dollar signs in my scripts and now that I've CTRL+H replaced $ with jQuery everything has become vastly more difficult to read and it will naturally take me longer to type new code.

If I was writing a normal HTML/JS document I know I could use the following code to continue using $(blah) instead of jQuery(blah):

jQuery( document ).ready(function( $ ) {
    // You can use the locally-scoped $ in here as an alias to jQuery.
    $( "div" ).hide();
});

But as I'm not using the document ready functionality I have no idea how to implement that variant of noConflict.

Can anyone provide a better alternative that will work within my widget framework?

Upvotes: 0

Views: 198

Answers (1)

Nick Tomlin
Nick Tomlin

Reputation: 29221

You don't have to use ready(), you can just create a closure and pass jQuery as an argument:

jQuery.noConflict();

(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);

jQuery docs

An additional note: load order is important here, if jQuery.bPopup is loading an additional version of jQuery (which, from your explanation, it sounds like it is), it will overwrite jQuery (unless it is loading jQuery in noconflict mode itself). You may need to do something like after you load jQuery 1.10, but before the <script> tag that loads the plugin:

// --- before jquery.bPopup is loaded
var jQ-1.10.2 = jQuery.noConflict(true); // alias jQuery-1.10.2

(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery-1.10.2
  });
})(jQ-1.10.2);

// --- after jQuery.bPopup is loaded
// outside of closure $ refers to jQuery.bPopup version of jQuery

Upvotes: 1

Related Questions