4

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?

  • 1
    just giving my 2 cents may not be right, will using jquery.noconflict help in this case? As per the official docs "If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version."api.jquery.com/jquery.noconflict – Rao Oct 28 '15 at 16:56
  • I think Salesforce should load their version in noConflict() mode, too and update it, if possible. – Uwe Heim Oct 28 '15 at 17:21
  • Removed my original comment because it goes against jQuery's website. – caleb.breckon Oct 28 '15 at 17:41
  • If you render anything from static resource i guess salesforce loads only once ..just thinking loud here .. – Mohith Shrivastava Oct 28 '15 at 18:12
  • @MohithShrivastava - Salesforce is loading their jQuery-version (1.5.2) in their code (unaccesible for us) an not from Static Resources, but from /sfsites/assets/Scripts/jquery/jquery.js – Uwe Heim Oct 28 '15 at 19:04
4

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

  • Thanks caleb. Still having the question open on how to deal with plugins. I think that most plugins register in the global variables. It might be necessary to patch those plugins, or not? ----- An other issue is that the sequence is not controllable. Salesforce loads it's version of jQuery (1.5.2) somewhere in their template I guess (not accessible for us). It may finish before or after the second load of our second jQuery finishes. All the loading is not done like in Visualforce but dynamically (with something like require.js, meaning script-tags will be created in the dom dynamically) – Uwe Heim Oct 28 '15 at 18:24
  • @UweHeim I added an example in a jsfiddle and addressed a non sequential load in my answer. – caleb.breckon Oct 28 '15 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.