How do I incorporate jquery into a master page?

Posted by Community Admin on 03-Aug-2018 13:32

How do I incorporate jquery into a master page?

Sitefinity - General Discussions

All Replies

Posted by Community Admin on 23-Sep-2012 00:00

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">
 
<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>

Posted by Community Admin on 25-Sep-2012 00:00

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" />
        .....

Inside the head-section you can drop a JavaScriptEmbedControl to load any .JS files prior to jQuery (Modernizr/HTML5Shim etc).

Then by using the sf:resourcelinks you load any .JS files that absolutely need to be loaded in the head section so its always available like in this case jQuery and Kendo. Then further down in the body tag, you add an asp:ScriptManager. 

Any other custom .JS files can than be loaded just before the closing tag of your <body>. Using the resourcelinks makes sure no double loading of jQuery occurs between Sitefinity & your code. Loading the asp:scriptmanager instead of using a Rad:ScriptManager, or having it being handled on a page level ensures the proper/cross-browser load ordering.

---
Downside of this approach is that the <sf:JavaScriptEmbedControl> causes Visual Studio editor  errors where it can't update the Master.designer.cs file so you need to add that only when needed or cut/paste it when doing Masterpage tweaks...

UPDATE:
I got asked why not use a regular <script> tag instead of the <sf:JavaScriptEmbedControl> tag. The reason is IE9/IE10 doesn't load the <script> tag prior to the resource tags but it often after the resource links... 
Jochem

Posted by Community Admin on 26-Sep-2012 00:00

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

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested 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 26-Sep-2012 00:00

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.

Posted by Community Admin on 26-Sep-2012 00:00

@Steve,

Totally agree so no offence taken :)

To be honest I'm still not sure this is the fail-safe way to render it, but it kinda works at the moment. When I look at for instance the source, on how the actual end-result turns out I'm seeing the following:

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">

On line 4 you'll neatly see script.top.min.js getting loaded as planned. But on line 7-8 you'll just see an empty script-tag.

On line 9-14 something goes wrong with the system, because its apparantly combinedscripts yet it gets pulled in as css (on top of that, the response is empty. 

Line 29-43 has an inline script, and on line 45 a script gets loaded with I assume Telerik webform functions.

But wait for it, on line 46 my first user-control script kicks in. That's before jQuery, Kendo or MicrosoftAjax/Webforms gets loaded. Those happen on line 47-50.

So basically I'm just lucky my first user-control script (line 45) just fills a variable...

Posted by Community Admin on 26-Sep-2012 00:00

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.

Anyway...

Yes, I've found the same thing. Sitefinity basically ignores the position of the ResourceLinks control, and renders the resultant script tags where it chooses - typically inside the main body form, after the scriptmanager initialisation.

I also gave up struggling with the JavaScriptEmbedControl because it was such a hassle with VS not recognising it on MasterPages.

Fortunately, none of my CustomControls are sensitive to the late loading of the jQuery library (yet) and the few custom script files I need to load can be successfully done using the <scripts> list of the RadScriptManager control.

Still, this mish-mash of solutions that works for some cases and not for others, does tend to be a bit sucky.

Posted by Community Admin on 27-Sep-2012 00:00

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

Posted by Community Admin on 27-Sep-2012 00:00

@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...

Posted by Community Admin on 27-Sep-2012 00:00

@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.

So I'm just gonna paste this in here: http://www.youtube.com/watch?v=rdOFOA_hpxg ...dealing with scripts in Sitefinity right now...Is a chore.  Where things like jsbin, or jsfiddle are clean elegant solutions...pick the scripts, they load and work properly, no fuss.

Posted by Community Admin on 27-Sep-2012 00:00

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

Posted by Community Admin on 27-Sep-2012 00:00

@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.

Posted by Community Admin on 06-May-2013 00:00

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.

Posted by Community Admin on 07-May-2013 00:00

@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

This thread is closed