I’m currently performing a migration of our CMS from MCMS 2002 to SharePoint 2010. One of the MCMS templates allowed the users to add their own CSS and scripts. So that the scripts and styles are not stripped I have had to import their content into a Content Editor Web Part. The following code is an example of what gets imported.
<style type="text/css">
ul#oakTabs { margin-left: 0; width: 100%; }
ul#oakTabs li { display:inline; border: 1px solid #00CC99; cursor: pointer; background-color: #FFF; margin-right: 4px; padding: 2px 5px; color: #444455; height: 20px; line-height: 14px; font-weight: bold; }
ul#oakTabs li.selected { border: 1px solid #009966; color: #FFFFFF; font-weight: bold; margin-right: 4px; padding: 2px 5px; text-decoration: none; background-color: #66CC99; background-image: none; height: 20px; }
ul#oakTabs li span.tabArrowDown { position: relative; top: 5px; background-image: url(/Images/etsp/tabarrowdown.gif); background-repeat: no-repeat;padding: 0 7px 0 0; margin: 0; }
ul#oakTabs li span.tabArrowUp { position: relative; top: 5px; background-image: url(/Images/etsp/tabarrowup.gif); background-repeat: no-repeat; padding: 0 7px 0 0; margin: 0; }
.tabContent { background-color: #FFF; margin: 0 0 10px 0; padding: 15px 10px 5px 20px; border-top: 3px solid #006600; border-right: 1px solid #CCC; border-bottom: 4px solid #006600; border-left: 1px solid #CCC; width: 100%; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#oakTab01Btn").click(function () {
$("#oakTabCont01").slideToggle("normal");
$("#oakTab01Btn").toggleClass("selected");
$("#oakTab01Btn span").toggleClass("tabArrowUp");
$("#oakTabCont02, #oakTabCont03").slideUp("normal");
$("#oakTab02Btn, #oakTab03Btn").removeClass("selected");
$("#oakTab02Btn span, #oakTab03Btn span").removeClass("tabArrowUp").addClass("tabArrowDown");
});
$("#oakTab02Btn").click(function () {
$("#oakTabCont02").slideToggle("normal");
$("#oakTab02Btn").toggleClass("selected");
$("#oakTab02Btn span").toggleClass("tabArrowUp");
$("#oakTabCont01, #oakTabCont03").slideUp("normal");
$("#oakTab01Btn, #oakTab03Btn").removeClass("selected");
$("#oakTab01Btn span, #oakTab03Btn span").removeClass("tabArrowUp").addClass("tabArrowDown");
});
$("#oakTab03Btn").click(function () {
$("#oakTabCont03").slideToggle("normal");
$("#oakTab03Btn").toggleClass("selected");
$("#oakTab03Btn span").toggleClass("tabArrowUp");
$("#oakTabCont01, #oakTabCont02").slideUp("normal");
$("#oakTab01Btn, #oakTab02Btn").removeClass("selected");
$("#oakTab01Btn span, #oakTab02Btn span").removeClass("tabArrowUp").addClass("tabArrowDown");
});
});
</script>
<div id="oakPageTabs">
<ul id="oakTabs">
<li id="oakTab01Btn">Menu 1 <span class="tabArrowDown"> </span></li>
<li id="oakTab02Btn">Menu 2 <span class="tabArrowDown"> </span></li>
<li id="oakTab03Btn">Menu 3 <span class="tabArrowDown"> </span></li>
</ul>
</div>
<div style="display: none" id="oakTabCont01" class="tabContent">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div style="display: none" id="oakTabCont02" class="tabContent">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div style="display: none" id="oakTabCont03" class="tabContent">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
The Problem
The import works fine. But I have noticed that each time the content gets modified and saved, a jquery attribute is added for each save to all the HTML elements with attached functions. The additional attributes appear to only be added when the content is edited and then saved. Here is an example fo what the code looks like.
<ul id="oakTabs">
<li id="oakTab01Btn" jquery17107623806633942214="1" jquery17103491321314889904="1"
jquery17102665908125207371="1" jquery1710870082776749848="1">Menu 1 <span class="tabArrowDown">
 </span></li>
<li id="oakTab02Btn" jquery17107623806633942214="2" jquery17103491321314889904="2"
jquery17102665908125207371="2" jquery1710870082776749848="2">Menu 2 <span class="tabArrowDown">
 </span></li>
<li id="oakTab03Btn" jquery17107623806633942214="3" jquery17103491321314889904="3"
jquery17102665908125207371="3" jquery1710870082776749848="3">Menu 3 <span class="tabArrowDown">
 </span></li></ul>
Things to know
- It is in a SharePoint publishing site with all the publishing features turned on.
- The jquery works correctly except for writing surplus attributes.
- The problem can be replicated in a new publishing site on the nightandday.master with the splash page layout.
My Theory
When the page is loaded Jquery loads the attributes to the DOM. Then when the content editor web part is saved, SharePoint grabs the DOM and saves the HTML with the new attributes. Then when the pages is opened for edit, SharePoint loads the content statically, but JQuery still writes the attributes to the DOM. So there is now an attribute both in the DOM and what is displayed in the content Editor web part for editing. Then when the page is saved again the New attribute in the DOM is saved.
I am not sure if this theory is correct. Any help in working out what exactly is happening and any possible fixes will be greatly appreciated. Thanks in advance.
