0

I'm trying to get this JavaScript code (borrowed from sunnyape: https://junestime.wordpress.com/2013/02/01/add-table-of-contents-to-a-wiki-page-in-sharepoint-2010/comment-page-1/) to automatically build a table of contents using a Content Editor Web Part in SharePoint 2010. It works in FireFox just fine, but it seems Internet Explorer 11 doesn't like it and so IE won't render the individual items in the ToC (even in Compatibility View). Any suggestions would be greatly appreciated!

Thanks, here's the code:

<!-- SharePoint WIKI Table of Contents. Sunnyape, August 2013 -->

<script type="text/javascript" src="http://sharepoint.example.com/sites/example/SiteAssets/jquery-3.0.0.min.js"></script>

<div id="wikiTOC">
<table style="padding: 5px;">
    <tr>
        <td><div class="TOCheader">Table of Contents</div></td>
    </tr>
</table>
<div id='theTOC'>
<script type="text/javascript">

$(document).ready(function(){
 var L2=0, L3=0, L4=0;
 $(".ms-bodyareacell h2, .ms-bodyareacell h3, .ms-bodyareacell h4").each(function(i){
  theLevel=$(this).attr("class").substr(14,2);
  if (theLevel=="H2") {
   L2=L2+1;
   L3=0;
   L4=0;
   theLevelString=""+L2;
   }
  else if (theLevel=="H3") {
   L3=L3+1;
   L4=0;
   theLevelString=""+L2+"."+L3;
   }
  else {
   L4=L4+1;
   theLevelString=""+L2+"."+L3+"."+L4;
   }
  $(this).attr("id", "heading_" + i);
  $("#theTOC").append("<a href='#heading_" + i + "' title='" + theLevel + "'>" + theLevelString + " " + $(this).text() + "</a><br />");
 });
});
</script>
</div>
</div>

<style>
    #wikiTOC {
        border: 1px black dashed;
        background-color: whitesmoke;
        float: left;
        padding: 10px;
        padding-top: 0px;
    }

        #wikiTOC .TOCheader {
            font-size: 1.1em;
            font-weight: bold;
            text-align: center;
            padding: 5px;
        }

        #wikiTOC .closehide {
            font-size: 11px;
            font-weight: normal;
        }

        #wikiTOC a[title=H2] {
            font-size: 12px;
            font-weight: normal;
        }

        #wikiTOC a[title=H3] {
            font-size: 11px;
            font-weight: normal;
            margin-left: 8px;
        }

        #wikiTOC a[title=H4] {
            font-size: 10px;
            font-weight: normal;
            margin-left: 16px;
        }
</style>
  • wondering... have you tried with _spBodyOnLoadFunctionNames.push("MyInitFunction"); instead of $(document).ready? Usually the former one is preferred when working with SharePoint – SPArchaeologist Jul 5 '16 at 15:14
  • I changed "$(document).ready(function() {...}" to "function MyInitFunction() {...}" and called MyInitFunction() after the function definition but within the script tags using your code for the call above, but that made the table of contents lose functionality in Firefox as well. I'm a bit of a novice to JS and SharePoint so let me know if I was just implementing your code incorrectly. – mkrieg Jul 6 '16 at 12:54
2

You need to define showTOC(); or remove it. Firefox is rendering the table even though there's an error in the page. If you hit F12 in either you can this error.

  • Sorry Erin, that was a little bit of a red herring. I actually edited sunnyape's code and forgot to take out that part. S/he had defined that function for showing/hiding the table of contents box when a link was clicked, but I didn't want that feature. I removed it and I'm experiencing the same functionality that I had previously. – mkrieg Jul 5 '16 at 14:40
  • I get an "Object doesn't support property or method addEventListener in the console in IE and not in Firefox. I don't have time to research it, but hopefully that helps. – Erin L Jul 5 '16 at 15:04
  • Thanks for the help. I'll look into this more and update my question with a solution if/when I find one. – mkrieg Jul 5 '16 at 15:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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