Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


JavaScript appears to execute only when SharePoint page is called the first time

Posted on 2014-02-24
Medium Priority
Last Modified: 2014-03-04
I have a JavaScript function which adds values to the <body> tag's class attribute. This appears to work when the page is first called but subsequent refreshing or navigation to the page reveal that values are not being written to the attribute and I am not sure why.

The Setup:
I have the function in its own file. Inside the sharepoint master page I am referencing this js file using:
<asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true">
Path="<%$SPUrl:~SiteCollection/Style Library/Scripts/Conditional-CSS.js?Rev=2014.02.20.1%>">

Open in new window

The function itself contains:
 function speBodyClasses(){ 
        var siteColClass =  
                'sitecol' +  
                        .replace(/\//g, "-") 
        var siteClass =  
                'site' +  
                        .replace(/\//g, "-") 
document.body.className = document.body.className + ' ' + siteColClass + ' ' + siteClass; 

Open in new window

And I am calling this function before the closing <body> tag :
<script type="text/javascript" > 		

Open in new window

Question by:DLegal
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
LVL 16

Expert Comment

ID: 39886066
If you include the code in the script tag then it would run only once when the script loads.. in order to execute when ever u want it.. you will have to write a javascript function and call it on some event or every time u need it to run

Author Comment

ID: 39886428
It does run whenever the page is loaded or refreshed. Placing alerts inside my function "speBodyClasses" reveal that the function still gets called from

<script type="text/javascript" > 		

Open in new window

when the page loads is the only time I need it to run. It is odd that the expected changes happen the first time but on following calls the changes do not appear.

Author Comment

ID: 39886443
I've also checked to make sure the variables in siteClass and siteColClass are not null or empty on subsequent page calls.

Accepted Solution

DLegal earned 0 total points
ID: 39891970
I am only giving myself half credit here since my current solution appears to work for all conditions except for one. Whoever can explain why stripping the function call out of the _spBodyOnLoadFunctionNames.push() would make such an improvement or can offer a fix for the F5 condition (explained below) will get the remaining points.
I have tried using different syntactical statements within the function thinking IE8 might have had a rendering preference for one over the other which turned out to not be the case at all. It didn't matter whether I used:
document.body.setAttribute("class", [value])
In each case, the proper values were still there throughout the function but, what ultimately got rendered in the page did not appear to be dependent on syntax used to make a change to the DOM.

I have since separate my function call in my master page from the _spBodyOnLoadFunctionNames.push() event. Now, the script before the closing body tag simply is speBodyClasses();

This change appears to have fixed the sporadic rendering of my page's body tag's class value to the expected value when traversing through sites within the site collection. Before, sometimes the value would be there and other times not. It was not clear what was causing it and it is still a puzzlement.

Now,  when I land on a page within the site collection the body tag's class attribute is rendering the appropriate values. I can surf through the site collection and view the source and see the html page is rendering properly except for one condition!

If at any point I press F5 in my site, the page doesn't get rendered with the proper values in the body tag's class but, if I click a link on that page taking it to itself (i.e. clicking 'home' while on the home page) the page renders the class with the value we expect from the function. Press F5; it's gone again!  Keep in mind we are in an exclusively IE8 enviroment. Does anyone have any idea why this would behave this way?

Author Closing Comment

ID: 39902802
It provides a workable solution with one minor idiosyncrasy that is currently unexplainable. The removal of the function call outside of _spBodyOnLoadFunctionNames.push() may come with unknown issues in the future as we letting the browser execute it immediately as oppose to explicitly instructing it to wait for core JavaScript files within SharePoint to load first. This may or may not become an issue depending on one's environment.

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in an application. Themes can be made up of a set of elements: skins, style sheets, images, and o…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question