Categories
Bloggers
Blogs RSS feed

How to use jQuery and other JavaScript Libraries in Sitefinity

by Georgi Chokov

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 :)

20 comments

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 03, 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");

     

    so.addVariable(

     

    "flv", "video.flv");

     

    so.addVariable(

     

    "jpg", "imagen.jpg");

     

    so.addVariable(

     

    "autoplay", "false");

     

    so.addParam(

     

    "allowFullScreen", "true");

     

    so.write(

     

    "flvplayer");

     

     

     

    </script>

     

     

     

    </div>

     

     

     

    <div style="display: none">

     

     

     

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

     

     

     

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

     

     

     

    </div>

     

    </

     

     

    div>

    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. henz Aug 12, 2010
    For being a famous person like them is not an easy way, they must also take care of their activity to avoid bad issues.
    billiards pool table
  10. MrX Aug 17, 2010
    Georgi-

    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,

    V
  11. Mohammad Owidat Sep 01, 2010
    Very useful, Thanks
  12. marry Jan 21, 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 .
    Volkswagen Turbocharger

  13. marry Jan 21, 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 .
    Volkswagen Turbocharger

  14. 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="http://thesmokelesscigarettes.us/">smokeless cigarettes review</a>
  15. Gratian Dicu Aug 08, 2011
    Is there a way to combine and/or minify the resources loaded into the master page this way?
    Thanks,
    Gratian.
  16. dhotewe12 Dec 26, 2011
    Resources, tips and information to career management. Find details on how to prepare yourself for interviews, write a powerful and sellable resume and ensure you are getting noticed by global recruiters and more.

    how to search public records online for free
  17. carsteering Apr 02, 2012
    I agree with your point, please share with us more good articles. <a href="http://www.carsteering.com/steeringmodels/Dodge/Ram_Truck/Power_Steering_Rack.html">Dodge Ram Truck Power Steering Rack</a>
  18. carsteering Apr 02, 2012
    I agree with your point, please share with us more good articles.

    Dodge Ram Truck Power Steering Rack
  19. Rahulcube Jan 01, 2013
    Thanks for the tutorial for the usage of jQuery and other
    JavaScript Libraries in Sitefinity and I hope this might be a great resource to
    learn the same. Expecting more good articles from your end. <a
    href="http://agelessmalepills.com/mens-sex-health/sexual-problems-in-men/">learn
    more</a>
  20. Kingsly Jan 01, 2013

    Thanks for the tutorial for the usage of jQuery and other JavaScript Libraries in Sitefinity and I hope this might be a great resource to learn the same. Expecting more good articles from your end. learn more

    Leave a comment