Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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">&nbsp;</span></li>
    <li id="oakTab02Btn">Menu 2 <span class="tabArrowDown">&nbsp;</span></li>
    <li id="oakTab03Btn">Menu 3 <span class="tabArrowDown">&nbsp;</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">
        &#160;</span></li>
<li id="oakTab02Btn" jquery17107623806633942214="2" jquery17103491321314889904="2"
    jquery17102665908125207371="2" jquery1710870082776749848="2">Menu 2 <span class="tabArrowDown">
        &#160;</span></li>
<li id="oakTab03Btn" jquery17107623806633942214="3" jquery17103491321314889904="3"
    jquery17102665908125207371="3" jquery1710870082776749848="3">Menu 3 <span class="tabArrowDown">
        &#160;</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.

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

You are right. If you have any dynamic HTML editing like building new elements, adding attributes, applying CSS etc are done in the Content Editor Web Part script make sure you clear the existing attributes/elements before you build again.

Or simply you can restrict the script from being executed when the page is in edit mode. You can check the following post to detect whether the page is in edit mode from the JavaScript.

How do I know if the page is in Edit Mode from JavaScript?

share|improve this answer
    
Thanks NLV. This solved the problem exactly. And now that i know the code i saw it all through SharePoints own javascript. –  Andrew Feb 4 '13 at 23:36
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.