Categories
Bloggers
Blogs RSS feed

How to use jQuery and other JavaScript Libraries in Sitefinity

by Gabe Sumner

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.

16 comments

Leave a comment
  1. Gabe Sumner Sep 01, 2011
    One quick note, I was originally testing this code in a "test.aspx" page and the code above was not working.  After some research, I discovered I had failed to add a <asp:scriptmanager> tag to my ASPX page.  This tag is required.

    I doubt others will encounter this, but I thought I would mention it just in case.
  2. Jonathan Sep 02, 2011
    Short and informative! Great post, Gabe! Thanks.
  3. Brad Sep 02, 2011
    I get an error from this line:

    <
    sf:ResourceFile JavaScriptLibrary="~/Widgets/myJavascript.js" />

    Cannot create an object of type 'Telerik.Sitefinity.Web.UI.JavaScriptLibrary' from its string representation '~/global/js/midder.js' for the 'JavaScriptLibrary' property.

    Should this be in the Name property instead?
  4. Brad Sep 02, 2011
    I get an error from this line:

    <
    sf:ResourceFile JavaScriptLibrary="~/Widgets/myJavascript.js" />

    Cannot create an object of type 'Telerik.Sitefinity.Web.UI.JavaScriptLibrary' from its string representation '~/global/js/midder.js' for the 'JavaScriptLibrary' property.

    Should this be in the Name property instead?
  5. Gabe Sumner Sep 02, 2011
    Hey Brad,

    You're absolutely correct that I used the wrong property for referencing an external Javascript file.  I've now corrected the blog post above.

    Sorry about that.  :(  Thank you for posting the error and the solution above.
  6. Brett Sep 13, 2011
    Hi Gabe-

    I've attempted to utilize the Telerik jQuery library, but whenever I use a jQuery plugin or other resource I get errors.  At the moment I 'm using this code snippet:
    <asp:ScriptManager runat="server">
     
    </asp:ScriptManager>
    <sf:ResourceLinks ID="resourcesLinks" runat="server">
        <sf:ResourceFile JavaScriptLibrary="JQuery" />
        <sf:ResourceFile Name="~/fancybox/jquery.mousewheel-3.0.4.pack.js" />
        <sf:ResourceFile Name="~/fancybox/jquery.fancybox-1.3.4.js" />
        <sf:ResourceFile Name="~/fancybox/jquery.fancybox-1.3.4.css" />
    </sf:ResourceLinks>

    But I get an error that states:

    Assembly 'Telerik.Sitefinity.Resources, Version=4.2.1650.0, Culture=neutral, PublicKeyToken=null' does not contain a Web resource with name '~/fancybox/jquery.mousewheel-3.0.4.pack.js'.

    However, if I use script tags, the plugins work fine. 

    Any ideas to why it's looking for the javascript in the assembly instead of on the server?  

  7. Paul Sep 21, 2011
    Hi Gabe,

    I'm getting the same error as Brett.  Any thoughts on this?

    Although my js file is loading using a straight script tag, I can't seem to get it to load after jQuery, so it's functions fail.
  8. Michael Waddell Sep 22, 2011
    We're having trouble with dojo. A map UI from ESRI (esri.com) has what they call the JavaScript API which uses the dojo JS library. We want to build a map widget but cannot resolve conflicts between Sitefinity (3.7, SP4) and dojo. Any suggestions?
  9. John Gassman Sep 24, 2011
    Hi Gabe,

    This is useful info, but I am having issues with the order in which the specified scripts are loaded.

    We are using code similar to this:
    <sf:ResourceLinks ID="ResourceLinks1" runat="server">
        <sf:ResourceFile JavaScriptLibrary="JQuery" />
        <sf:ResourceFile Name="~/Customizations/static/Scripts/some-script.js" />
    </sf:ResourceLinks>

    All scripts are loaded as expected. However, the JQuery script is always being loaded after all of our custom scripts - even though we are specifying it before the others as shown above.

    Is there some way to control the order in which they load?

    Thanks!
  10. Lyudmil Jan 31, 2012
    Hi guys,

    For those of you that receive this error "Assembly 'Telerik.Sitefinity.Resources, Version=4.*, Culture=neutral, PublicKeyToken=null' does not contain a Web resource with name..." - most probably you don't use the Sitefinity template structure.
    This can be fix if you set "UseEmbeddedThemes" property of the "ResourceLinks" to false:

    <sf:ResourceLinks ID="ResourceLinks1" runat="server" UseEmbeddedThemes="false">
        <sf:ResourceFile Name="~/MyFolder/Script.js" />
    </sf:ResourceLinks>
  11. Lyudmil Jan 31, 2012
    Hi guys,

    For those of you that receive this error "Assembly 'Telerik.Sitefinity.Resources, Version=4.*, Culture=neutral, PublicKeyToken=null' does not contain a Web resource with name..." - most probably you don't use the Sitefinity template structure.
    This can be fix if you set "UseEmbeddedThemes" property of the "ResourceLinks" to false:

    <sf:ResourceLinks ID="ResourceLinks1" runat="server" UseEmbeddedThemes="false">
        <sf:ResourceFile Name="~/MyFolder/Script.js" />
    </sf:ResourceLinks>
  12. Patrik A. Jan 31, 2012
    Hey guys,
    how can I achieve that we can use jquery on any desired page without putting above script into the master page. We do not need jQuery or other scripts on certain pages, so we can stop requesting scripts which are not used on a certain page by just loading them as needed.

    If I inject it using the javascript widget or go through the properties page I get an error when using $(..).

    So far I have done it using a recent jQuery library through the JS widget and then applying plugins after using jQuery.noConflict() (http://api.jquery.com/jQuery.noConflict/)

    Thanks for any answers towards my question

    Cheers
    Patrik
  13. CSharpner Feb 15, 2012
    There's no space between "JavaScript" and "Library"... first code reference at top of article.  Makes a HUGE difference!  Won't work at all if you copy and paste that code snippet.
  14. Trevor Mar 08, 2012
    John Gassman and Paul above had the same issue as me.  The order in which the scripts load doesn't seem to reflect the order in which they are declared as the documentation says.

    Apparently SF has a bug or something that throws off the load order when Libraries are used.  I found this thread: http://www.sitefinity.com/devnet/forums/sitefinity/general-discussions/trouble-including-jquery.aspx#1725523, which details the problem, but I can't say if the offered solution really works or not, as I cannot get it to work myself.

    The bottom line presented there is that you have to compile your library-dependent scripts as embedded resources to get them to load in the right order.
  15. Prasad May 05, 2012
    Hai i am faccing with one issue on javascript in sitefinity.I have added a content block and created a html design page.I dragged and droped the javascript widget and added the javascript url.But javascript is not working.how to overcome this problem.
  16. prasad May 05, 2012
    I have created a master page and used the master page as template its working but it should work using widgets??please can anybody help me?

    Leave a comment