How to use jQuery and other JavaScript Libraries in Sitefinity

How to use jQuery and other JavaScript Libraries in Sitefinity

September 01, 2011 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

JQuery and other Javascript libraries are becoming essential for modern web development.  Through these libraries developers are able to create rich interactive client-side web UI’s with minimal grief. 

Sitefinity 4 makes heavy use of JQuery and other Javascript libraries in its own administrative UI.  Consequently, JQuery is included in Sitefinity and it’s extremely easy to utilize in your own code:

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %> <sf:ResourceLinks ID="resourcesLinks" runat="server"> <sf:ResourceFile JavaScript Library="JQuery" /> </sf:ResourceLinks>

This code can be added to your custom ASP.NET Control or Master Page and Sitefinity will ensure that a JQuery reference is added to your web page.

Here is a very simple ASP.NET User Control that utilizes some JQuery:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="JQueryTestWidget.ascx.cs" %> <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %> <sf:ResourceLinks ID="resourcesLinks" runat="server"> <sf:ResourceFile JavaScriptLibrary="JQuery" /> </sf:ResourceLinks> <script type="text/javascript"> function jQueryDemo() {
        $(".jquery-test").show("slow");
    }
</script> <p><input id="demoButton" type="button" onclick="jQueryDemo();" value="Show hidden block" /></p> <p class="jquery-test" style="display: none;">
    This hidden text will be displayed when the button is clicked.
</p>

Check out our documentation for more examples.

Using additional Javascript libraries with Sitefinity

In addition to JQuery, Sitefinity also includes 2 other popular Javascript libraries:

  1. MooTools
  2. Prototype

References to these libraries can also be included quickly & easily:

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %> <sf:ResourceLinks ID="resourcesLinks" runat="server"> <sf:ResourceFile JavaScriptLibrary="MooTools" /> <sf:ResourceFile JavaScriptLibrary="Prototype" /> </sf:ResourceLinks>

Lastly, it’s possible to include your own external Javascript references:

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %> <sf:ResourceLinks ID="ResourceLinks1" runat="server"> <sf:ResourceFile Name="~/Widgets/myJavascript.js" /> </sf:ResourceLinks>

Parting Words

These Javascript frameworks are extremely useful and open a lot of opportunities for developers to add additional richness to their web sites.  In future blog posts, we’ll explore specific examples of how to use these frameworks to enhance your web site.

For more information, be sure to check out our documentation.

progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments
Comments are disabled in preview mode.
Topics
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
New_Mobile_Dev_Ebook_Progress_Website_Thumbail
The New Mobile Development Landscape
Download Whitepaper
 
IDC Spotlight Sitefinity Thumbnail
Choosing the Right Digital Experience Platform to Improve Business Outcomes
Download Whitepaper
 
TheFastestWayToBuildMobileAppsArtboard-2
The Fastest Way to Build Mobile Apps With Cloud Data
Watch Webinar