[SalesForce] How to use jQuery in Lightning Communities without? How to deal with the jQuery version loaded by Salesforce as defaut

We are creating several components to be used on a Lightning Community using the Napili template. Some of our components will require jQuery.

Now I've noticed, that in this release (Winter'16) an older version (v1.5.2) of jQuery is loaded by default in the vanilla community without any configuration or custom code from

/sfsites/assets/Scripts/jquery/jquery.js

Now how to deal with that fact inside our components?

If we do nothing at the first glance it's fine, we go with the shipped version 1.5.2 which might be sufficient. But I'm not sure if it's a good idea to use it, since it might be changed or removed in the future an then break the components. Plus at least for debugging it looks like we need to wrap the components in Standalone Lightning Apps to see any error messages as shown here

What is the best way to debug Lightning Components (used in the Community Builder)?

Using ltng:require to load jQuery will work fine for Standalone Apps but then on the other hand will end up with jQuery loaded twice in the community.

What is the best strategy here?

Best Answer

using noConflict() to manage multiple jQuery versions. I have no idea if this is the recommended way but it works for me.

Example fiddle using versions 1.11 and 1.52 and the plugin Chosen which only works with versions 1.4+

<script src="/sfsites/assets/Scripts/jquery/jquery.js"></script> // v1.5.2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
    // $ currently is set to v1.11.2 since it loaded
    // after v1.5.2 and overrode all the variables/methods

    $.fn.jquery; // "1.11.2"

    $11 = jQuery.noConflict( true ); // passes v1.11.2 to $11 and releases $ to the older script, v.1.5.2
    $5  = jQuery.noConflict( true ); // passes v1.5.2  to $5  and releases $ to an older script if it exists

    $11.fn.jquery; // "1.11.2"
    $5.fn.jquery;  // "1.5.2"

    // then you can set the $ to whichever version at any time or use the versioned $'s

    $ = $11.noConflict( true );
    $.fn.jquery;   // "1.11.2" 
    $11.fn.jquery; // "1.11.2" (still works)
    $5.fn.jquery;  // "1.5.2"  (of course)


    $ = $5.noConflict( true );
    $.fn.jquery;   // "1.5.2"
    $5.fn.jquery;  // "1.5.2"  (still works)
    $11.fn.jquery; // "1.11.2" (of course)
</script>

Regarding a dynamic load time, why not just check the version and then assign it, since you know what version you're giving it.

if ( $.fn.jquery == '1.11.2') {
    $11 = $.noConflict( true );
} else {
    $sfdcOldVersion = $.noConflict( true );
}

Source

Related Topic