Solved

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

Posted on 2014-02-24
5
637 Views
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">
<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
Comment
Question by:DLegal
  • 4
5 Comments
 
LVL 16

Expert Comment

by:SriVaddadi
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
0
 

Author Comment

by:DLegal
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" > 		
          _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
 

Author Comment

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

Accepted Solution

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

Author Closing Comment

by:DLegal
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.
0

Featured Post

Free Gift Card with Acronis Backup Purchase!

Backup any data in any location: local and remote systems, physical and virtual servers, private and public clouds, Macs and PCs, tablets and mobile devices, & more! For limited time only, buy any Acronis backup products and get a FREE Amazon/Best Buy gift card worth up to $200!

Join & Write a Comment

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…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now