How do I register a javascript file in a widget?

Posted by Community Admin on 03-Aug-2018 19:15

How do I register a javascript file in a widget?

All Replies

Posted by Community Admin on 10-Dec-2010 00:00

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?

Posted by Community Admin on 11-Dec-2010 00:00

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

Posted by Community Admin on 20-Dec-2010 00:00

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?

Posted by Community Admin on 20-Dec-2010 00:00

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

Posted by Community Admin on 19-Jan-2011 00:00

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?

Posted by Community Admin on 19-Jan-2011 00:00

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>

Posted by Community Admin on 19-Jan-2011 00:00

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>

Posted by Community Admin on 19-Jan-2011 00:00

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

Posted by Community Admin on 19-Jan-2011 00:00

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" "www.w3.org/.../xhtml1-transitional.dtd">

Posted by Community Admin on 22-Mar-2011 00:00

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

Posted by Community Admin on 23-Mar-2011 00:00

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?

Posted by Community Admin on 28-Mar-2011 00:00

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

Posted by Community Admin on 07-Jun-2012 00:00

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

Posted by Community Admin on 07-Jun-2012 00:00

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

Posted by Community Admin on 07-Jun-2012 00:00

Clarification:  I placed the JavaScriptEmbedControl controls in the widget template for a custom module.

This thread is closed