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

Posted on 2014-02-24
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
  • 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

830 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