More in this section
Blogs RSS feed

How to use jQuery and other JavaScript Libraries in Sitefinity

by User Not Found

Update:  This blog post contains instructions for Sitefinity 3.x.  If you're looking for JQuery instructions for Sitefinity 4.x, please click here.


Do you know that we have jQuery, Prototype and mooTools libraries built-in Sitefinity 3.x? In order to use these libraries, you could simply reference them like this:

<sf:JsFileLink id="jsLink" runat="server" ScriptType="jQuery"></sf:JsFileLink> 
<sf:JsFileLink id="jsLink" runat="server" ScriptType="prototype"></sf:JsFileLink> 
<sf:JsFileLink id="jsLink" runat="server" ScriptType="mooTools"></sf:JsFileLink> 


The JsFileLink control is really helpful when you need to use an external javascript file as well:
<sf:JsFileLink id="jsLink" runat="server" FileName=”~/…”></sf:JsFileLink>  


Note that the javascript file path would be resolved on server side, so you do not need to hard code the file paths.

I bet this will be helpful :)


Leave a comment
  1. Matt Mills Mar 25, 2009
    Very useful to know - I thought I would need to add through a custom master page.
  2. John Dunagan Apr 08, 2009
    Hey, Georgi!

    Thanks for this helpful post - I thought I was going to go nuts trying to get my javascripts to work.

    One question: If I have multiple scripts I wish to implement this way, do I always use id=jslink?

    Sorry, two questions: If those external javascripts then have to access image files, can I set my image file locations relative to the path of the javascript?
  3. John Dunagan Apr 08, 2009
    I can't find the tag I need to register this control set, and I can't seem to add these to the toolbar.

    I've tried a couple of times to register the set by typing it in - here's what I've got:
    <%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %>   
    //and then:  
    <sf:JsFileLink id="jsLink" runat="server" FileName="~/over.js" ScriptType="Custom"></sf:JsFileLink> 



    But then that dies. I can't figure out, either, how to add the controls to the toolbox in Visual Studio.

    Why is this so hard? It's a basic external javascript, used around the world and working in .Net websites forever - except Sitefinity.


  4. John Dunagan Apr 08, 2009
    OK, as atonement for my burning up of the comment trail on this blog, I provide the additional things I went through to get it working.

    1. You can't deploy the <sf:JsFileLink tag until you register the Telerik.Cms.Web.UI dll on the page. I had already had a Telerik.Web.UI control registered, so when I dropped the control in from my toolbar, it attached to the telerik tag prefix from this dll. This didn't work. Since I wasn't using Telerik.Web.UI anymore (remnant from an attempt at a TabStrip from the RAD Controls), I deleted the registry tag. When I dropped a control on the page, it registered up properly with the correct dll.

    2. Georgi's formatting of the control tag, if you paste it directly, has curly double quotes. VS will balk at this. Replace those with straight double quotes from your keyboard, every time they occur.

    3. You cannot drop <sf:JsFileLink into the head of your page. Put them after the body tag, before <form id="form1" - they'll be fine there. If you're getting the "Collection was modified; enumeration operation may not execute" exception, this is probably what happened.

    4. The pasting of all three (jQuery, Prototype, mooTools) instances of <sf:JsFileLink in one code block should not be taken as usable in that format as a sequence. Each instance must have a distinct ID.
    5. Finally, if you haven't modified settings on your Sitefinity Generic Content editing pane, it is possible that the parsing of onclick= methods and other such long javascript strings could be borked across multiple lines when it shouldn't. You won't crash the page, but your scripts may not work, and you'll give Firebug a conniption at all of the javascript errors.

    I'll let you know if I can fix that in the editor, which leads to my number one suggestion for the next version of Sitefinity: can we have something like Cute for editing HTML next time?
  5. Simon Martin Apr 15, 2009
    What version of SF is this supported from?
    I'm trying it on 3.5.1714.2:0 but it doesn't recognise the ScriptType attribute on the JsFileLink tag
  6. Radoslav Georgiev Apr 28, 2010
    The ScriptType property was introduced in Sitefnity 3.6.1861. As this property is not available you should use FileName and set the path to your JS file.
  7. jessie May 31, 2010
    Thank you for your guidance !! Now I know how to use both of them!!

  8. David Aug 04, 2010
    Hi I have a problem with add file, mi user control is



    @ Control Language="C#" AutoEventWireup="true" CodeFile="FlashMediaPalyer.ascx.cs"




    Inherits="UserControls_FlashMediaPalyer" %>




    @ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %>






    div id="MediaPlayer" class="divMediaPlayer">




    <div id="silverlightControlHost">




    <sf:JsFileLink ID="scriptSWF" runat="server" ScriptType="Custom" FileName="~/App_Themes/GenommaDefault/swfobject.js" />




    <script type="text/javascript">




    var so = new SWFObject("player.swf", "player", "400", "327", "9", "#000000");




    "flv", "video.flv");




    "jpg", "imagen.jpg");




    "autoplay", "false");




    "allowFullScreen", "true");
















    <div style="display: none">




    <asp:Image ID="imgClickableImage" runat="server" />




    <asp:Image ID="imgVideo" runat="server" />










    and throw this error


    Message: 'null' is nul or is not an object
    Line: 2Char: 3894
    Code: 0
    URI: http://localhost/Anstk/App_Themes/GenommaDefault/swfobject.js

    any ideas??? thanks


  9. MrX Aug 17, 2010

    I'm pretty new to Sitefinity. If I want to use Jquery...
    1. where would I add <sf:JsFileLink id="jsLink" runat="server" ScriptType="jQuery"></sf:JsFileLink>
    2. where and how would I place my jquery script?
    Thank you,

  10. Mohammad Owidat Sep 01, 2010
    Very useful, Thanks
  11. SMOKE May 28, 2011
    The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post.thanks . <a href="">smokeless cigarettes review</a>
  12. Gratian Dicu Aug 08, 2011
    Is there a way to combine and/or minify the resources loaded into the master page this way?
  13. carsteering Apr 02, 2012
    I agree with your point, please share with us more good articles. <a href="">Dodge Ram Truck Power Steering Rack</a>
  14. carsteering Apr 02, 2012
    I agree with your point, please share with us more good articles.

    Dodge Ram Truck Power Steering Rack

    Leave a comment