Sitefinity Script Conflicts

Question

I am struggling to get my jquery to stay in order within Sitefinity. The dragging out of Sitefinity widgets onto a page is breaking my script links in the of my master page.

A thread has started on the Sitefinity forum: http://www.sitefinity.com/developer-network/forums/developing-with-sitefinity-/how-to-adjust-around-sitefinity-scripts#S2PcF40QrkClp_vEDb6cqg

Any help would be greatly appreciated. I cannot be the only one running into this problem...

Thank you in advance,

Answer 1

Use sf:resourcelinks to ensure no conflicts between Sitefinity and RadControls when loading jQuery.

<sf:resourcelinks id="ResourceLinks1" runat="server">
    <sf:ResourceFile JavaScriptLibrary="JQuery" />
</sf:resourcelinks>

Use asp:scriptmanager instead of the radscriptmanager.

Use JavascriptEmbedControl to load scripts at fixed positions to ensure file-loading when mix-matching loading external and inline scripts

<sf:JavaScriptEmbedControl
    id="script1"
    runat="server"
    scriptembedposition="InPlace"
    url="somescript.js" 
/>

For more information on the best way to load jQuery, check this forum thread. And read here for a disclaimer when using the JavascriptEmbedControl icw VisualStudio.

Answer 2

You can use jQuery noConflict() to address your situation.

Load your jQuery file then include all the libraries that depends on that version of jQuery one below the other.

Example:

include jQuery 1.11
include Bootstrap jQuery plugin
include Response.js
so on.,

When all the dependent library are added immediately one after the other below your jQuery version... jQuery version in the current $ scope will be used to initialize the libraries. So your dependent libraries will get included/enhanced using version of jQuery as expected. Hooray!!

Then finally to allow Sitefinity RAD Controls and widgets to work proper with the CMS jQuery version, you need to move your jQuery object completely to some other variable name like below.

jq1_11 = $.noConflict(true);

Then in your custom scripts use jq1_11 instead of $ or jQuery.

OR

if you still like using $, then follow the closure pattern using anonymous function like below.

(function($){
     $("#id").on("click", handlerFn);
})(jq1_11);

Downside : Some people will complain about using 2 versions of jQuery, but that happens only during

inline edit or When RAD controls are in page or In sitefinity backend

Upside: You get to use your latest libraries & latest jQuery