How to Adjust around Sitefinity Scripts
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,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?
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
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="html5shiv.googlecode.com/.../script>
<![endif]-->
<!--[if lt IE 9]>
<script src="css3-mediaqueries-js.googlecode.com/.../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="ajax.googleapis.com/.../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>
I forgot to add the file, sorry. It will not load on here, so I am linking it here for download (PDF):
Can you give me a screenshot of chrome or firebug with the console tab open to see any script errors?
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
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
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>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
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?
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
I am using Sitefinity version 5.2.3700.0
Not sure if this is important to take into consideration?
Maria
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.
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: www.sitefinity.com/.../trouble-including-jquery
Maria
@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...
@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"/>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
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.
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
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