How do I register a javascript file in a widget?
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
>
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
>
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
>
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
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
>
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
>
So, here's my new mark-up. Is this correct?
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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
>
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
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"%>
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
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?
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
Hi Pavel
<
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"
/>
<
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"
>
Hi Pavel
<
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"
/>
<
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"
>
Clarification: I placed the JavaScriptEmbedControl controls in the widget template for a custom module.