using jquery in sitefinity html and mvc widgets - Sitefinity - General Discussions

All Replies

Posted by Community Admin on 01-Jan-2015 00:00

Is there a definitive way to reference jQuery from within MVC widgets, and from javascript in script widgets please?

NOTE: Some of my pages just have javascript, others just MVC widgets that need jQuery, others have both.

Sorry to ask but I am seeing a lot of conflicting information.

Thanks,

Tom.

Posted by Community Admin on 05-Jan-2015 00:00

Hi Tom,

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 control and the JavaScriptEmbed control. The controls are similar in function with the difference that the JavaScriptEmbed control has the ScriptEmbedPosition 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"%>

<sitefinity:JavaScriptEmbedControl ID="script1" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" Url="~/Sitefinity/WebsiteTemplates/Library/App_Themes/Library/Global/Scripts/jquery-ui-1.9.2.min.js" />

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.

Regarding the JavaScript widget, all information you need is located in our Documentation. 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:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

If you want to add it to the <head> tag, you can use the following code to first generate a JavaScriptEmbed control and next, add it to the page head:

public ActionResult Index()

var styleSheetManager = SitefinityStyleSheetManager.GetCurrent(((System.Web.UI.Page)this.HttpContext.CurrentHandler));

if (styleSheetManager != null)

styleSheetManager.StyleSheetsRendered += new EventHandler(this.styleSheetManager_StyleSheetsRendered);

return View("Default");

private void styleSheetManager_StyleSheetsRendered(object sender, EventArgs e)

var script = new JavaScriptEmbedControl();

script.ScriptEmbedPosition = Telerik.Sitefinity.Web.UI.PublicControls.Enums.ScriptEmbedPosition.Head;

script.Url = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";

((System.Web.UI.Page)this.HttpContext.CurrentHandler).Header.Controls.Add(script);

I hope this answers all of your questions on how to properly include your JQuery libraries.

Regards,
Ivan D. Dimitrov
Telerik

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

This thread is closed