JavaScript is breaking my theme in SharePoint 2013

Question

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.

Answer 1

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

Answer 2

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)]

Answer 3

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