+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / How do I register a javascript file in a widget?

How do I register a javascript file in a widget?

15 posts, 1 answered
  1. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    10 Dec 2010
    Link to this post
    I am trying to add a script reference to a javascript file that I have sitting in my selected theme under the App_Data... structure.  I tried just using the script tag, but noticed this only adds it to the context of where the control is dropped into.  I have been trying different settings with the ResourceLinks control, but from what I have read in the documentation it looks like that might only work for css and default javascript libraries that are already built into resources.

    <sf:ResourceLinks id="resourcesLinks" runat="server">
      <sf:ResourceFile JavaScriptLibrary="JQuery"/>
      <sf:ResourceFile Name="Styles/galleryview.css"/>
      <sf:ResourceFile Name="Scripts/jquery.easing.1.3.js"/>
    </sf:ResourceLinks>


    The link to galleryview.css is generating correctly, but I get an error  "Assembly 'Telerik.Sitefinity.Resources, Version=4.0.962.0, Culture=neutral, PublicKeyToken=null' does not contain a Web resource with name 'Scripts/jquery.easing.1.3.js'."

    What is the process I need to follow?
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    11 Dec 2010
    Link to this post
    Hello Stacey,

    Can you please try using the JavaScriptEmbedControl and the CssEmbedControl? Sample bellow:
    <%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>
    ...
        <sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" Url="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></sf:JavaScriptEmbedControl>
        <sf:CssEmbedControl runat="server" id="CssLink" Url="~/<pathtoyourfile>/cssfile.css"></sf:CssEmbedControl>

    The JavaScriptEmbedControl will register a script in the selected ScriptEmbedPosition (Head, InPlace, BeforeBodyEndTag). This control is also available in the page editor in the Scripts and Styles toolbox section. You can add references to scripts when editing the page through the UI, and even write inline scripts by hand.

    Kind regards,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  3. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    20 Dec 2010
    Link to this post
    Thank you for the information.  This worked for me, but I do have another question as a result of using the JavaScriptEmbedControl.

    Is it possible to keep this control from generating empty span tags in the markup?  Below is an example of what I am seeing happen.

    <span id="cphContent_C017_jQueryLink"></span>
    <span id="cphContent_C017_jQueryLink2"></span>
    <span id="cphContent_C017_jQueryLink3"></span>

    I have three instances of the JavaScriptEmbedControl all set to insert at the Head position.  The script links do appear in Head, but I do not see why we still need the span's to be generated at this point?
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    20 Dec 2010
    Link to this post
    Hi Stacey,

    The span tag is added by a base class System.Web.UI.WebControls.WebControl which is added to a page.Generally we control the place where the script will be added, but generating the span comes from the ASP.NET control.

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Rob
    Rob avatar
    20 posts
    Registered:
    03 Jun 2010
    19 Jan 2011
    Link to this post
    Ok, I need a little bit of explanation here.

    You've given the following code, but where does it go?

    <%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>
    ...
        <sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" Url="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></sf:JavaScriptEmbedControl>
        <sf:CssEmbedControl runat="server" id="CssLink" Url="~/<pathtoyourfile>/cssfile.css"></sf:CssEmbedControl>

    Is the first part for the header, and the 2nd part for the body?  Do I have to place that code on each Master template?

  6. Larry
    Larry avatar
    39 posts
    Registered:
    30 Dec 2010
    19 Jan 2011
    Link to this post
    Hey,

    The first part goes immediately after the Page Tag ( The first link in the Master Page ).

    The following lines go immediately after body>form tag in the master page.

    for ex:

    <body>
    <form id="form1" runat="server" >
      <sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" Url="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></sf:JavaScriptEmbedControl>
        <sf:CssEmbedControl runat="server" id="CssLink" Url="~/<pathtoyourfile>/cssfile.css"></sf:CssEmbedControl>

    </form>
    </body>
  7. Rob
    Rob avatar
    20 posts
    Registered:
    03 Jun 2010
    19 Jan 2011
    Link to this post
    So, here's my new mark-up.  Is this correct?

    <!DOCTYPE html>
    <head runat="server">
    <meta charset="UTF-8" />
    <title>Checkout</title>
    <%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>
    </head>
    <body>
    <form id="form1" runat="server">
     
    <sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" Url="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></sf:JavaScriptEmbedControl>

    <sf:JavaScriptEmbedControl runat="server" ID="jQtransform" ScriptEmbedPosition="Head" Url="/Sitefinity/WebsiteTemplates/LegalZoom/JS/jquery.jqtransform.js"></sf:JavaScriptEmbedControl>

    <sf:JavaScriptEmbedControl runat="server" ID="jQScript" ScriptEmbedPosition="Head" Url="/Sitefinity/WebsiteTemplates/LegalZoom/JS/images/script.js"></sf:JavaScriptEmbedControl>
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    19 Jan 2011
    Link to this post
    Hi,

    1. For JQuery you can use

    <sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" ScriptType="jQuery"></sf:JavaScriptEmbedControl>

    2. You can add the referenced custom script inside

    Sitefinity/WebsiteTemplates/PageTemplates/App_Themes/MyTheme/js/

    Regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Larry
    Larry avatar
    39 posts
    Registered:
    30 Dec 2010
    19 Jan 2011
    Link to this post
    This is how you register user/custom controls...

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="YourMasterPage.master.cs" Inherits="SitefinityWebApp.App_Master.YourMasterPage" %>
    <%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls"%>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  10. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    22 Mar 2011
    Link to this post
    Does Sitefinity use jQuery itself? (or any other commonly used Javascript libraries?)

    If I register jQuery using the JavaScriptEmbedControl, what version of jQuery do I get? Is there a reason to use this rather than linking to the latest version hosted at Google or Microsoft?

    <sf:JavaScriptEmbedControl runat="server" ID="jQyeryLink" ScriptEmbedPosition="Head" ScriptType="jQuery"></sf:JavaScriptEmbedControl>

    Should I also register jQuery in a custom Master Page?

    (I'm happy to register it in this way, but I'm trying to understand if there are any version specific dependencies in Sitefinity or competing libraries loaded so I don't design something that conflicts.)

    Thanks,
    Dan
  11. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    23 Mar 2011
    Link to this post
    Also, what is the benefit of registering CSS and Javascript? Does Sitefinity combine the files into a single download? Does it also make sure that a file isn't included multiple times?
  12. Pavel Iliev
    Pavel Iliev avatar
    140 posts
    Registered:
    18 Jul 2016
    28 Mar 2011
    Link to this post
    Hello Dan Sorensen,

    Yes, Sitefinity uses script combining by default and even whitout script combining the Script Manager checks that a script referred as a resource is going to be included only once .

    Best wishes,
    Pavel
    the Telerik team
  13. Antoine
    Antoine avatar
    45 posts
    Registered:
    13 Jul 2012
    07 Jun 2012
    Link to this post
    Hi Pavel

    I'm using JavaScriptEmbedControl to include files.  The following is the code I have placed in a widget:

    <sf:JavaScriptEmbedControl Url="/JS/facilitiesScript.js" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" />
    <sf:JavaScriptEmbedControl Url="/JS/jquery.tablesorter.min.js" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" />
    <sf:JavaScriptEmbedControl Url="/JS/jQueryPrint.js" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" />

    I have the widget placed on the same page multiple times.  Here is the HTML I see at the end of the page when I view source:

    <script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script>
     
    <script type="text/javascript">


    You mentioned that the expected behavior is that the Script Manager would ensure that a resource would only be included once.  Is that right?  Do I need to do something different?

    The website this is occurring on is a Sitefinity 4.4 website.

    Thanks, 
    Antoine
  14. Antoine
    Antoine avatar
    45 posts
    Registered:
    13 Jul 2012
    07 Jun 2012
    Link to this post
    Hi Pavel

    I'm using JavaScriptEmbedControl to include files.  The following is the code I have placed in a widget:

    <sf:JavaScriptEmbedControl Url="/JS/facilitiesScript.js" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" />
    <sf:JavaScriptEmbedControl Url="/JS/jquery.tablesorter.min.js" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" />
    <sf:JavaScriptEmbedControl Url="/JS/jQueryPrint.js" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" />

    I have the widget placed on the same page multiple times.  Here is the HTML I see at the end of the page when I view source:

    <script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script><script type="text/javascript" src="/JS/facilitiesScript.js"></script><script type="text/javascript" src="/JS/jquery.tablesorter.min.js"></script><script type="text/javascript" src="/JS/jQueryPrint.js"></script>
     
    <script type="text/javascript">


    You mentioned that the expected behavior is that the Script Manager would ensure that a resource would only be included once.  Is that right?  Do I need to do something different?

    The website this is occurring on is a Sitefinity 4.4 website.

    Thanks, 
    Antoine
  15. Antoine
    Antoine avatar
    45 posts
    Registered:
    13 Jul 2012
    07 Jun 2012
    Link to this post
    Clarification:  I placed the JavaScriptEmbedControl controls in the widget template for a custom module.
15 posts, 1 answered