Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 838
  • Last Modified:

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

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">
<Scripts>
<asp:ScriptReference 
Path="<%$SPUrl:~SiteCollection/Style Library/Scripts/Conditional-CSS.js?Rev=2014.02.20.1%>">
</asp:ScriptReference>			               
</Scripts>
</asp:ScriptManager>

Open in new window


The function itself contains:
 function speBodyClasses(){ 
        var siteColClass =  
                'sitecol' +  
                _spPageContextInfo 
                    .siteServerRelativeUrl 
                        .replace(/\//g, "-") 
                        .toLowerCase() 
        ; 
        var siteClass =  
                'site' +  
                _spPageContextInfo 
                    .webServerRelativeUrl 
                        .replace(/\//g, "-") 
                        .toLowerCase() 
        ; 
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" > 		
          _spBodyOnLoadFunctionNames.push("speBodyClasses");
	</script>

Open in new window

0
DLegal
Asked:
DLegal
  • 4
1 Solution
 
SriVaddadiCommented:
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
0
 
DLegalAuthor Commented:
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" > 		
          _spBodyOnLoadFunctionNames.push("speBodyClasses");
	</script> 

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.
0
 
DLegalAuthor Commented:
I've also checked to make sure the variables in siteClass and siteColClass are not null or empty on subsequent page calls.
0
 
DLegalAuthor Commented:
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.className
window.document.body.className
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?
0
 
DLegalAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now