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

Forums / Developing with Sitefinity / How to Adjust around Sitefinity Scripts

How to Adjust around Sitefinity Scripts

21 posts, 0 answered
  1. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    08 Jan 2013
    Link to this post
    Hello,

    I have multiple external javascripts linked and working on my master page template. However, when I add the Sitefinity Search widget, they break. I have tried other external javascripts to work around this, but this is not the issue.

    The script from the Sitefinity search is interrupting my custom scripts. It appears that the order of my linked scripts in the <header> are sensitive to this widget. How can I avoid this if I cannot dictate where the search script is located on the template generated code?

    Any help would be greatly appreciated. Thank you,
  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    08 Jan 2013
    Link to this post
    Can you elaborate?...

    Screenshot from the firebug console tab perhaps?

    I would assume that there's a javascript error on the page somewhere, maybe the search widget relies on jQuery and its not loaded, or there's some sort of naming conflict?  It's hard to say I've never had this happen....is it public anywhere to see?
  3. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    09 Jan 2013 in reply to Steve
    Link to this post
    Hi Steve,

    I attached a PDF here to provide visual. 

    In summary, the pattern is this:

    (A) Without the Sitefinity Search widget...
    - my scroll-to-top function works 
    - my left side menu arrow slides out to reveal content 
    - Both of these functions link to one custom external javascript file
    - Both of these functions are using jquery 1.7.2
    - The tab slide out function is using an additional external javascript file
    - My responsive web design navigation pulldown menus work well

    (B) With the Sitefinity Search widget...
    - My tab slide out menu is permanently expanded open
    - My scroll-to-top and responsive design do not activate
  4. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    09 Jan 2013 in reply to John
    Link to this post

    My <head> and script ordering without the search widget is as follows:

    <head id="Head1" runat="server">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Schoolcraft College</title>
        <link rel="shortcut icon" href="~/Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Themes/SchoolcraftTheme/Global/images/favicon.ico" />
        <link href="../App_Themes/SchoolcraftTheme/Global/stylesheet.css" rel="stylesheet" type="text/css">
        <link href="../App_Themes/SchoolcraftTheme/Global/responsive.css" rel="stylesheet" type="text/css">

        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
        <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <![endif]-->
         <sf:ResourceLinks ID="ResourceLinks2" runat="server" UseEmbeddedThemes="false"> 
            <sf:ResourceFile Name="~/Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Themes/SchoolcraftTheme/Global/js/modernizr.custom.11478.js" /> 
            </sf:ResourceLinks>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <sf:ResourceLinks ID="ResourceLinks1" runat="server" UseEmbeddedThemes="false"> 
        <sf:ResourceFile Name="~/Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Themes/SchoolcraftTheme/Global/js/jquery.tabSlideOut.v1.3.js" />
            <sf:ResourceFile Name="~/Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Themes/SchoolcraftTheme/Global/js/scripts.js" />
        </sf:ResourceLinks>
    </head>

  5. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    09 Jan 2013 in reply to John
    Link to this post

    I forgot to add the file, sorry. It will not load on here, so I am linking it here for download (PDF):

    http://schoolcraft.edu/doc/screencap-example.pdf

  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    09 Jan 2013 in reply to John
    Link to this post
    Can you give me a screenshot of chrome or firebug with the console tab open to see any script errors?
  7. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    10 Jan 2013
    Link to this post

    John,

    The problem stems from the fact that it loads the jQuery library twice. Once by means of your call to the Google CDN, and the other through the Sitefinity search widget. (see screenshot)

    Basically your scripts try and latch on to a jQuery, they rejoice when they see it being loaded and then *poof* your jQuery gets loaded again and your scripts get confused.

    The best way to avoid these kind of conflicts atm is by not loading jQuery from the Google CDN but from Sitefinity. You can do that by removing your cdn line and replacing it with the following:

    1.<sf:resourcelinks id="ResourceLinks1" runat="server">
    2.    <sf:ResourceFile JavaScriptLibrary="JQuery" />
    3.</sf:resourcelinks>

    Next to that, you need one additional line at the top of your file, with the following statement:

    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

    This will ensure that jQuery is loaded, only once and in a non-conflicting way. 

    Jochem

  8. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    10 Jan 2013 in reply to Jochem Bökkers
    Link to this post

    Hi Jochem,

    Attached is a screen cap of the current code in the <head>. Unfortunately, these changes seemed to have made this worse. Is it formatted correctly? 

    Maria

  9. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    10 Jan 2013 in reply to John
    Link to this post

    Hey John/Maria,

    Hmm, there are  a couple of things off on it, I've put a sample listing beneath.

    Given that you're concerned with older browsers, Modernizr needs to be loaded prior to jQuery or any other .JS.

    When you use Modernizr, you don't need to include the HTML5shiv because its part of Modernizr, so we can delete that one.

    The css3-mediaqueries is still needed, but please don't load it from that url but a local one. The url you're using suggest that you're loading it from the online version-control repository, that's not a production url.

    And finally, for best performance the TabSlideOut and your scripts.js should be loaded at the bottom of the page, just before the body closing tag.

    ---
    I'm not sure if the url's are all correct, I tried to copy them exactly as in your screencap, but please check them...



    01.<%@ Master Language="C#" AutoEventWireup="true" %>
    02. 
    03.<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    04.<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls" TagPrefix="sf" %>
    05.<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    06. 
    07.<!DOCTYPE html>
    08.<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    09.<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    10.<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    11.<!--[if gt IE 8]><!-->
    12.<html class="no-js">
    13.<!--<![endif]-->
    14.<head id="Head" runat="server">
    15.    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    16.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    17. 
    18.    <link rel="shortcut icon" href="/Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Themes/SchoolcraftTheme/Global/images/favicon.ico">
    19.    <title></title>
    20.    <sf:JavaScriptEmbedControl id="script1" runat="server" scriptembedposition="InPlace" url="/Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Themes/SchoolcraftTheme/Global/JS/modernizr.custom.11478.js" />
    21.    <!--[if lt IE 9]>
    22.        <script type="text/javascript" src="/Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Themes/SchoolcraftTheme/Global/JS/css3-mediaqueries.js"></script>
    23.    <![endif]-->
    24.    <sf:resourcelinks id="ResourceLinks1" runat="server">
    25.        <sf:ResourceFile JavaScriptLibrary="JQuery" />
    26.    </sf:resourcelinks>
    27.</head>
    28.<body class="standard">
    29.    <form id="form1" runat="server">
    30.        <asp:ScriptManager runat="server"></asp:ScriptManager>
    31.        ...
    32.        ...
    33.        ...
    34.    </form>
    35.    <script type="text/javascript" src="/Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Themes/SchoolcraftTheme/Global/JS/jquery.tabSlideOut.v1.3.js"></script>
    36.    <script type="text/javascript" src="/Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Themes/SchoolcraftTheme/Global/JS/scripts.js"></script>
    37.</body>
    38.</html>

  10. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    11 Jan 2013 in reply to Jochem Bökkers
    Link to this post
    Thank you Jochem,

    I really appreciate your detailed help and outline. I have tried this, and unfortunately I am still running into the issue. I'm still pretty stuck and troubleshooting.

    Is there anything I need to do in the Admin Advanced Settings?

    Maria
  11. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    11 Jan 2013 in reply to John
    Link to this post
    I did some testing with scripting just an alert box in the search bar div using a HTML content box. This worked great and didn't break the site when the script was in here...hmm, makes me wonder if code is needed in the head?
  12. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    11 Jan 2013
    Link to this post

    Hi Steve,

    Attached is the current error console I receive right now in firebug.  I'm confused about what it is highlighting, seems unrelated to the problem. I'm looking into it right now as I type.

    Any thoughts?

    Maria

  13. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    11 Jan 2013 in reply to John
    Link to this post

    I am using Sitefinity version 5.2.3700.0

    Not sure if this is important to take into consideration?

     Maria

  14. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    12 Jan 2013 in reply to John
    Link to this post
    I ended up using Google search within the master page to resolve this problem. All was then going well...However, when I added another widget (news feed and gallery feed), my
    scripts broke again. Therefore it is clear to see that the jquery
    scripts are fighting with each other. At this point I cannot add items
    to the pages if the widgets are breaking. I'm really stuck now, at a loss. Thoughts? All help is appreciated, thank you in advance.
  15. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    12 Jan 2013 in reply to John
    Link to this post
    I reverted back and switched my jQuery version to that of which seemed to be used by Sitefinity. Still no solution. Is there a setting somewhere that can help correct this script link ordering problem?

    Attached is a screenshot where my scripts are working. However, if I add a Sitefinity widget, these all break.

    I also tried suggestions noted on this thread, but no luck: http://www.sitefinity.com/developer-network/forums/general-discussions-/trouble-including-jquery

    Maria
  16. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    13 Jan 2013 in reply to John
    Link to this post
    @Maria,
    No, there's nothing that needs to be set in advanced settings, all should be good.

    ---
    @John,
    There's code needed in the head, at least the stuff from the snippet needs to be in order for everything to function properly. Like Modernizr needs to be the 1st .js ever loaded, even prior to jQuery. Loading jQuery in the head and not the footer ensures that in case some inline .js is dropped somewhere, it will process (opposed to inline loaded first and jQuery being processed afterwards when it is in the footer).

    ---
    @Maria,
    The '$ is not defined' error in the console log clearly indicates a jQuery error, where its not being loaded correctly.

    ---
    @Maria,
    Nope, the snippet provided works with v5.0 - v5.3.
    By using the <sf:resourcelinks> tag to load the jQuery version embedded in Sitefinity, we ensure that only one jQuery gets loaded and no conflicts can occur. The Modernizr and css-mediaqueries files are just 'add-ons' to better support older browsers.

    ---
    @John,
    Most of the default widgets use some form of RadControl, that take a dependency on jQuery, same as the search widget. Have you verified that jQuery is loaded from the resource files and no longer from Google CDN?

    Attached is a screenshot that clearly shows the problem you're facing...
  17. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    13 Jan 2013 in reply to John
    Link to this post
    @Maria,
    Regarding the new screencap.

    Loading everything as a group of resourceFiles won't help loading the scripts in the correct order.

    I can't see if you are loading a <asp:Scriptmanager> under the form tag or depending on Sitefinity to load the radscriptmanager. From my experience the <asp:scriptmanager> does a better cross-browser job at sticking to the defined loading order.

    To load CSS3-Mediaqueries and Modernizr prior to jQuery, you have to use the following snippet:
    <sf:JavaScriptEmbedControl
        id="script1"
        runat="server"
        scriptembedposition="InPlace"
        url="bladiblabla.js"
    />

    Otherwise the js might get postponed.

    You're loading jquery-1.8.3.min.js, which is not the version used by Sitefinity. As you can see from my previous screenshot, even in Sitefinity 5.3.3900 the jQuery version used is 1.7.2.

    Since I can't tell if you're using any other inline scripts, what you could try is grab the script tags from line 36 & 37 and instead at before the body closing tag, insert them on line 27, just before the head closing tag - but after loading jQuery from the resourcefile.

    ---
    From the console screen cap, I noticed you're using Firefox with Firebug. If you reload the page with 'Net' panel open, you can trace back in which order the .JS files get loaded and whether there's an inconsistency regarding inline and full scripts load ordering. 

    If you need any further help, feel free to shoot me an email at jbokkers [at] live [dot] nl
  18. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    09 Feb 2013
    Link to this post

    Hi everyone,

    After a fix on this topic, I am not running into it again but only for sub-pages.

    I am creating pages and notice that when I add a sub-page, all my scripts break. However, if my pages are in the root folder, everything works fine.

    I have attached a screencap to highlight this.

    The view source output looks the same for both pages, and I do not understand why
    the scripts are the only thing breaking for sub-pages.

    I would value and appreciate any help offered.
    Thank you for your time and help in advance.

    Maria
  19. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    09 Feb 2013
    Link to this post

    Hey Maria,

    When using Chrome or Firefox with firebug, you can right click the live page and select "inspect element". If you choose the 'net' panel and refresh the page, you can see the browser trying to load each individual source file. Have you checked if there's one in red?

    Perhaps you're using relative urls somewhere in the code that work on root pages, but on subpages, they need to travel one level back in order to work. 

    If you switch out those relative script urls and replace them with 
    /Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Themes/SchoolcraftTheme/js/ they should work no matter if they're referenced from a rootpage or a subpage or whether the template is in the schoolcraftInside.master or the App_Data/Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Master/index.master

    Jochem.

  20. John
    John avatar
    26 posts
    Registered:
    10 Sep 2012
    09 Feb 2013 in reply to Jochem Bökkers
    Link to this post

    Thanks Jochem,

     Attached is the <head> I have where various paths are being used.  For some reason using "/Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Themes/SchoolcraftTheme/js/" didn't work. At one point I just reversed the breaking from the parent and child.

     In my screencap, it is the second highlighted orange box that is causing the breaking.

     I am out of office until Tuesday. I will pick back up on this then. I appreciate your help. If there are any other suggestions out there, I'd appreciate it.

     Thank you,

    Maria

  21. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    10 Feb 2013 in reply to John
    Link to this post

    Hi Maria,

    No thanks needed if it didn't do the trick. Besides I made a typo before it should have been "/Sitefinity/WebsiteTemplates/SchoolcraftTemplate/App_Themes/SchoolcraftTheme/Global/js/"

    Anyway if you look at the last 3 script references, you see they are missing the "/" in front. So while you're viewing a root page, the scripts are referenced as /Sitefinity/Websitempl..... but when you're viewing the Our Profile page the reference becomes /About%20Us/Sitefinity/Websitetempl.... and naturally they can't be found there.

    Good luck with it and the email is still valid.
    Jochem

21 posts, 0 answered