There are a lot of ways you can add JQuery to your pages and MVC widgets. Let us first review the pages case.
The best practices for adding JQuery to Sitefinity is the ResourceLinks
attribute that allows you to place the script reference either in the body or the head of the page. Here is an example:
<%@ Register TagPrefix="sitefinity" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>
These methods are ideal if you want to include a JQuery library to your page template (more specifically your master page). There is some room for error here, since all scripts loaded this way may cause a conflict with Sitefinity's build in JQuery library for the specific Sitefinity version ( you can check the version we are loading in Administration->Settings->Advanced->Pages->ScriptManager->Script References). This may cause an "undefined" exception to occur on the page once you open it for editing and it can remain unresponsive.
There are two possible ways to handle this, One is the JQuiery noConflict method. Placed on a page with a simple JS widget or in your scripts in order to wrap the code it will resolve the differences in the library versions and will eliminate the issue. For more information on the topic click here
The other method and in my opinion the more adequate one is described in this blog post
. Basically it uses the page's PreRender event in order to determine if the page is in design mode or view mode and load the appropriate scripts from there. This way Telerik's scripts are the ones loaded in the backend and your scripts are loaded only in the frontend. The code snippet can also be placed in the page's template in order to assure the problem will not reproduce ever again.
Naturally if you are using the same JQuery version Sitefinity loads, you will have no problems with the page editor.
. Feel free to use it to point to the JQuery file you wish to load and assign the position you want it to load in the page's HTML.
Regarding the MVC widgets, you have two ways of including the library. The approach you should take depends on the script position in the HTML. For example if you want it inside the body tag, you can simply add a script reference in the view your controller loads:
control and next, add it to the page head:
var styleSheetManager = SitefinityStyleSheetManager.GetCurrent(((System.Web.UI.Page)
sender, EventArgs e)
var script =
script.ScriptEmbedPosition = Telerik.Sitefinity.Web.UI.PublicControls.Enums.ScriptEmbedPosition.Head;
I hope this answers all of your questions on how to properly include your JQuery libraries.
Ivan D. Dimitrov
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal
and vote to affect the priority of the items