Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I am having an unusual problem. I have a site in SharePoint 2013 I just stood up, and starting to experiment with JavaScript and jQuery. I am using one of the OOTB themes, not ready to monkey around with Master Pages and Themes just yet. So the only thing that makes my theme unique is the background images, there is no other customization.

Following the examples I found, here is how I add jQuery to a page:

  • Add the jQuery source files to Site Assets.
  • Create a .js file in Site Assets with my script, including references to source files.
  • Create a new page.
  • Add a Content Editor Web Part (CEWP) to the page.
  • Set the Content Link of the CEWP to my .js file.
  • Save and Publish.

Now, the script works perfectly fine, if I am logged in as an Administrator. But, if I visit my site as an Anonymous user, the script works, but the theme is not loaded. I get a plain white background. I get the same results whether in Chrome or IE 11.

To eliminate variables, I created a new page and added code to the .js file one line at a time. Here is the smallest script that breaks the theme:

<script type="text/javascript" src="/SiteAssets/scripts/jquery-1.9.0.js"></script>
<script type="text/javascript" src="/SiteAssets/scripts/jquery.SPServices-2013.02a.js">
</script>
<label id="lblSomething">Here is something!</label>
<script type="text/javascript">
    $(document).ready(function() {
        document.getElementById('lblSomething').innerHTML = "Here is REALLY something!";
    });
</script>

Now, if I remove the type="text/javascript" attribute from all three script tags, the theme is displayed correctly. But, of course, the script fails to execute.

I am not seeing any typical error messages. So, my question is two-fold: How can I display error messages that tell me why the theme is failing to load, and does anyone have a solution to this problem?

UPDATE:

Robert Lindgren suggests using a Script Editor Web Part instead. Fair enough, but it doesn't allow referencing a file (Content Link) like a CEWP does. So, I put just this code into a Script Editor Web Part (I remove the jQuery references) and I get the same behavior:

<label id="lblSomething">Here is something!</label>
<script type="text/javascript">
    document.getElementById('lblSomething').innerHTML = "Here is REALLY something!";
</script>

If I remove the type="text/javascript" attribute, which is HTML 5 standard, I don't get a broken theme, but the script doesn't work, either.

UPDATE 2:

Screenshots as requested. At this point, I have cleared out Edit Source and have JUST the label on the page:

<label id="lblSomething">Here is something!</label>

and a Script Editor Web Part with just the JavasScript. No jQuery, no referenced files, to help eliminate variables:

<script type="text/javascript">
    document.getElementById('lblSomething').innerHTML = "Here is REALLY something!";
</script>

Full disclousure, I am editing in Chrome and testing against IE, but that's just so I don't have to log out and in again. I have tested against both browsers, also cleared caches, it doesn't change the behavior.

When I am logged in as Site Administrator (Chrome).

When I am anonymous (IE 11). This is the same theme I see on all pages when I turn MDS off, FWIW. Also note that the JavaScript DOES execute.

UPDATE 3: I also have an Office 365 site that I host. I recreated the same situation there, and I do NOT have the same problem. So this is something particular to my hosting company, or Microsoft does something different with Office 365 sites.

share|improve this question
    
Well, my research indicated that using a CEWP was the way to go. I will go look for the page where I found that answer. But a CEWP allows a content link, and a Script Editor doesn't. More importantly, using a Script Editor, I get the same error (Updated my post). –  CigarDoug Aug 3 at 14:43

3 Answers 3

Update 2

Just using

<script type="text/javascript">
    document.getElementById('lblSomething').innerHTML = "Here is REALLY something!";
</script>

without error handling will most likely cause runtime issues because if the code runs before the label is rendered it will throw a global JS exception causing the issues I already mentioned.

So, always use try/catch in JS and use the SP recommended way to execute JS on page load, see

Can not load custom Js added on custom master page of SharePoint Online, on MDS enabled site

and

Loading jQuery in the Correct order

and

sp.*.js are not registered to page for anonymous user in SharePoint 2013

and

Call JavaScript function on Page Render in o365

Update

Also note that SP 2013 requires JavaScript to display the background image of a theme. So, any JavaScript error on your page might force SP to stop loading its own script.

Regarding your update:

As the name suggests, the Script Editor WebPart is for JavaScript, but your code is HTML tags with inline JavaScript. This might not work at all.

Regarding your original snippet, your code snippet consists of HTML with some inline JavaScript.

So, as a first step I'd rename the file to something like mycustomsnippet.html and reference this in your CEWP content link.

Also, SharePoint 2013 comes with an almost completely undocumented Ajax library called mQuery. This lib also uses the $ moniker hence it might be possible that your are seeing a namespace clash, try to use the jQuery moniker instead of $.

Finally, don't use document.ready as it might interfere with SharePoint MDS (Minimal Download Strategy) and all the other built-in dynamic JavaScript features, like client-side rendering and the on-demand loading of SP internal JavaScript files.

It would help a lot if you could provide a screen capture, BTW, but I suspect that your HTML snippet is loaded as JavaScript and all browsers error out as the code contains HTML tags which are not valid JavaScript and cause SharePoint & the Web browser to cease loading the page at all.

Just a guess...

share|improve this answer
    
If you say so, but when adding a Script Editor, this is the text under "About the Part": "Script Editor Allows authors to insert HTML snippets or scripts." So, Microsoft isn't very clear about it, either. –  CigarDoug Aug 3 at 15:45
    
I went into "Edit Source" and cleared out all the web part code (seems deleting a web part isn't enough anymore). I put just the label in the source. I then added a script editor with the opening and closing script tag. I STILL get the white background, no theme. –  CigarDoug Aug 3 at 15:48
    
Well, in this case I'm running out of ideas, sorry! BTW, did you try using jQuery intead of $? –  Sig Weber Aug 3 at 15:50
    
As for your last paragraph, the script DOES execute, it's just that the theme isn't getting loaded. I have more than my share of JavaScript errors, but the result is the JavaScript doesn't execute, and the rest of the page loads fine. That is not the behavior I am seeing. –  CigarDoug Aug 3 at 15:51
    
When I turn off JavaScript in Firefox for testing purpose, the background image doesn't load (because SP2013 requires JS to apply the background image) but the basic theme colors are applied, hence I asked for a screen capture to shed more light into this issue. –  Sig Weber Aug 3 at 15:54

I have re-created this scenario, using the exact same versions of the plugins with a custom theme and custom background image, and everything is working fine.

Perhaps you would want to take a broader look into your setup, as you may find outside variables, such as:

  • all the pages and scripts, including the background images are publicly available
  • double check your anonymous settings
  • try disabling MDS
  • enable customerrors

update: disabling MDS shows the default theme.

adding a CEWP shows the default theme.

this could be a pattern that could lead to CEWP not being MDS compliant, which would explain the theme fallback on the particular page.

try to embed the scripts in the page itself instead of using a CEWP.

as a last resort, add the references to the theme into the master page

[MdsCompliant(true)]
share|improve this answer
    
I changed to an OOTB theme, same behavior. –  CigarDoug Aug 3 at 15:06
    
The script is not referenced, it is manually entered into a Script Editor on the page. The page is accessible to Anonymous users, otherwise they wouldn't see the page at all. –  CigarDoug Aug 3 at 15:07
    
I disabled MDS and now Anonymous users don't see any themes at all. That's the EXACT functionality I had with 2010! I had to manually update the master page to set a theme for Anonymous users. So, turning off MDS made things worse. –  CigarDoug Aug 3 at 15:08
    
heres an interesting post from @sig a few years back. may have something useful sharepoint.stackexchange.com/questions/23281/… –  Tiago Duarte Aug 3 at 15:23
    
I turned MDS back on, now I get theme on every page, but still have the problem on my script page. –  CigarDoug Aug 3 at 15:49

Have you checked permissions? Inconsistent behavior usually stems from permissions. Do anonymous users have read to your style libraries?

share|improve this answer
    
It's not permissions, they can see the theme on every OTHER page in the site. From what I can determine, it's something in the execution path between loading the theme and executing javascript. The script tag is stopping the theme from being loaded. But it's a bugger to troubleshoot. –  CigarDoug Aug 6 at 15:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.