How do I incorporate jquery into a master page?
I wish to start using jquery in my templates. I have produced a bare bones master page and looked at this post: www.sitefinity.com/.../how_to_use_jquery_and_other_javascript_libraries_in_sitefinity.aspx . My problem is I'm not sure where to include the jquery code block see below. I tried including it just after the form tag but this throws errors.
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.master.cs" Inherits="SitefinityWebApp.Site2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
asp:ContentPlaceHolder
ID
=
"head"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
head
>
<
body
style
=
"color:red"
>
<
form
id
=
"form1"
runat
=
"server"
>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<
sf:ResourceLinks
ID
=
"resourcesLinks"
runat
=
"server"
>
<
sf:ResourceFile
JavaScript
Library
=
"JQuery"
/>
</
sf:ResourceLinks
>
<
asp:ContentPlaceHolder
ID
=
"ContentPlaceHolder1"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
div
>
</
form
>
</
body
>
</
html
>
Hey Martin,
Below you'll see a snippet of what's the most 'optimal' way of loading jQuery I found so far:
<!DOCTYPE html>
<
html
class
=
"no-js"
lang
=
"en"
>
<
head
id
=
"Head"
runat
=
"server"
>
<
sf:JavaScriptEmbedControl
id
=
"script1"
runat
=
"server"
scriptembedposition
=
"InPlace"
url
=
"/JS/script.top.min.js"
/>
<
sf:resourcelinks
id
=
"ResourceLinks1"
runat
=
"server"
>
<
sf:ResourceFile
JavaScriptLibrary
=
"JQuery"
/>
<
sf:ResourceFile
Name
=
"Telerik.Sitefinity.Resources.Scripts.Kendo.kendo.all.min.js"
/>
</
sf:resourcelinks
>
</
head
>
<
body
class
=
"standard"
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
runat
=
"server"
></
asp:ScriptManager
>
<
div
id
=
"PublicWrapper"
class
=
"sfPublicWrapper"
>
<
asp:ContentPlaceHolder
ID
=
"cph_header"
runat
=
"server"
/>
.....
Hello,
The approach provided from Jochem is the best on in my opnion, here is also another approach.
All the best,
Stanislav Velikov
the Telerik team
Ok, so...it is the best way...but the best way sucks something fierce (No offence Jochem, thanks for even finding this)
1)
The embed controls break visual studio is an old old old known
(annoying) bug. Also you're adding more serverside processing on render
using the controls where normal <script> tags add zero.
2) The
seemingly random script loading order is a persistent problem in
sitefinity (do a search on the forums) jQuery at the top, kendo at the
bottom, and your custom kendo script below that should work in a normal
webpage...but not in SF for some reason.
3) Double loading of jQuery\Kendo
...just no love here for front-end developers.
@Steve,
Totally agree so no offence taken :)
01.
<
title
>
02.
home
03.
</
title
>
04.
<
script
type
=
"text/javascript"
src
=
"/JS/script.top.min.js"
></
script
>
05.
<
meta
name
=
"Generator"
content
=
"Sitefinity 5.1.3450.0 SE"
/>
06.
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
07.
<
script
type
=
"text/javascript"
>
08.
</
script
>
09.
<
link
href="/Telerik.Web.UI.WebResource.axd?
compress
=
0
&
10.
_TSM_CombinedScripts_=%3b%3bTelerik.Sitefinity.Resources
11.
%2c+Version%3d5.1.3450.0
12.
%2c+Culture%3dneutral
13.
%2c+PublicKeyToken%3dnull%3aen%3ac6d90352-7000-4207-a768-acc807151c15%3a7a90d6a"
14.
type
=
"text/css"
rel
=
"stylesheet"
/>
15.
<
link
href
=
"/Sitefinity/Public/ResponsiveDesign/layout_transformations.css"
type
=
"text/css"
rel
=
"stylesheet"
/>
16.
<
link
href
=
"/Sitefinity/WebsiteTemplates/redacted/sfnormalize.min.css"
type
=
"text/css"
rel
=
"stylesheet"
/>
17.
<
link
href
=
"/Sitefinity/WebsiteTemplates/redacted/sfproject.min.css"
type
=
"text/css"
rel
=
"stylesheet"
/>
18.
</
head
>
19.
20.
<
body
class
=
"standard"
>
21.
<
form
method
=
"post"
action
=
""
id
=
"form1"
>
22.
<
div
class
=
"aspNetHidden"
>
23.
<
input
type
=
"hidden"
name
=
"ctl13_TSSM"
id
=
"ctl13_TSSM"
value
=
""
/>
24.
<
input
type
=
"hidden"
name
=
"__EVENTTARGET"
id
=
"__EVENTTARGET"
value
=
""
/>
25.
<
input
type
=
"hidden"
name
=
"__EVENTARGUMENT"
id
=
"__EVENTARGUMENT"
value
=
""
/>
26.
<
input
type
=
"hidden"
name
=
"__VIEWSTATE"
id
=
"__VIEWSTATE"
value
=
"/wEPDwUKLTc1NTE5MzE3OWRkx7JUmYIY7+PFYmvEvtMzXr/uiNm57SMZR74CYrwRKM0="
/>
27.
</
div
>
28.
29.
<
script
type
=
"text/javascript"
>
30.
//
<![CDATA[
31.
var theForm = document.forms['form1'];
32.
if (!theForm)
33.
theForm = document.form1;
34.
35.
function __doPostBack(eventTarget, eventArgument)
36.
if (!theForm.onsubmit || (theForm.onsubmit() != false))
37.
theForm.__EVENTTARGET.value = eventTarget;
38.
theForm.__EVENTARGUMENT.value = eventArgument;
39.
theForm.submit();
40.
41.
42.
//]]>
43.
</
script
>
44.
45.
<
script
src
=
"/WebResource.axd?d="
type
=
"text/javascript"
></
script
>
46.
<
script
language
=
'javascript'
> var data = [ redacted ]; </
script
>
47.
<
script
src
=
"/ScriptResource.axd?d="
type
=
"text/javascript"
></
script
>
48.
<
script
src
=
"/ScriptResource.axd?d="
type
=
"text/javascript"
></
script
>
49.
<
script
src
=
"/ScriptResource.axd?d="
type
=
"text/javascript"
></
script
>
50.
<
script
src
=
"/ScriptResource.axd?d="
type
=
"text/javascript"
></
script
>
51.
<
script
type
=
"text/javascript"
>
52.
//
<![CDATA[
53.
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl05', 'form1', [], [], [], 90, 'ctl00');
54.
//]]>
55.
</
script
>
56.
<
div
id
=
"PublicWrapper"
class
=
"sfPublicWrapper"
>
Grrr... I hate it when you create a response, click [Reply] only to find your cookie has expired, and the reply gets tossed into the ether, during the subsequent authentication request.
Hey MB,
The JavaScriptEmbedControl is certainly not my favorite either, its case sensitivity also took some Vistual Studio 'reformat on paste' settings alteration so it would keep the caps and not throw a bunch of errors but so far, I've found this the only way to ensure something like Modernizr gets loaded prior to anything...
How are you handling things like that?
Prior to this I've just used a regular script tag to just load 'script.top.min.js' and sneaked in Modernizr and jQuery together in there - but that's obviously double loading of jQuery but it at least ensured the load order...
@Jochem
Yep, I've also just resorted to standard script tags, and accepted that it's not the best solution.
Probably just because I'm too dumb to work out the VS issue with the JavaScriptEmbedControl reference, and I just couldn't be bothered trying to work out the 'correct' solution.
FWIW: I have my VS options specifically set to enforce server tags as 'Assembly definition' and server attributes as 'Lowercase' because I was always running into issues with the Sitefinity template parser being CaSe SeNsItIvE and damaging the desk by banging my head on it...
@MB
The issue is I think in the designtime code or something on the JS widget...there is no correct way to use it right now :) When its on a page it blocks VS from auto-generating the page or controls designer.cs file b/c of an internal error. So all you need to do when you put a new server control on the page\control is just cut out the JS widget, save the page (designer gets generated) then paste it back in where you cut it...then re-save.
What works for me is to add the CssEmbedWidget and the JavascriptEmbedWidget from code to the masterpages. I use this in combination with the Optimization Framework, so then you can define the collections of .css and / or .js files inside your global.asax.
This way you have most control over what gets render how and when.
Regards,
Daniel
@Daniel
Sounds promising, i feel a weekend challenge coming up :)
Do you use it in combination with the resourced jQuery (so instead of double loading, it loads only once?)
J.
I am having troubles getting any of my javascript files to load when I place references to them from within my master page. Does anyone have a more indepth tutorial on how to add .js files into a master page? I have been looking for more information on this for hours and have not found a working solution.
Sorry if this is an obvious thing.
@Brad,
This thread www.sitefinity.com/.../ (especially around page 2) will most likely help you out.
It describes loading order issues when using resourcelinks with local external js files and other work arounds.
Jochem