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

Forums / General Discussions / How do I incorporate jquery into a master page?

How do I incorporate jquery into a master page?

13 posts, 0 answered
  1. Martin
    Martin avatar
    6 posts
    Registered:
    14 Sep 2012
    23 Sep 2012
    Link to this post
    I wish to start using jquery in my templates.  I have produced a bare bones master page and looked at this post: http://www.sitefinity.com/blogs/gabesumner/posts/11-09-01/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>
  2. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    25 Sep 2012
    Link to this post
    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
  3. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    08 Dec 2016
    26 Sep 2012
    Link to this post
    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
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    26 Sep 2012
    Link to this post
    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.
  5. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    26 Sep 2012
    Link to this post
    @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...
  6. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    26 Sep 2012
    Link to this post
    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.
  7. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    27 Sep 2012
    Link to this post
    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
  8. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    27 Sep 2012
    Link to this post
    @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...
  9. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    27 Sep 2012
    Link to this post
    @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.
  10. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    27 Sep 2012
    Link to this post
    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
  11. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    27 Sep 2012
    Link to this post
    @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.
  12. Brad
    Brad avatar
    2 posts
    Registered:
    13 Mar 2012
    06 May 2013
    Link to this post
    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.
  13. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    07 May 2013 in reply to Brad
    Link to this post
    @Brad,

    This thread http://www.sitefinity.com/developer-network/forums/general-discussions-/trouble-including-jquery/ (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
13 posts, 0 answered