Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ensure table of contents isn't created twice #35

Open
afeld opened this issue May 29, 2017 · 7 comments
Open

ensure table of contents isn't created twice #35

afeld opened this issue May 29, 2017 · 7 comments

Comments

@afeld
Copy link
Owner

afeld commented May 29, 2017

Multiple people have run into the issue (#21 and #34), so either the instructions aren't clear enough, or the plugin should Do the Right Thing and not initialize multiple times.

@mirodietiker
Copy link

A plugin library should not depend on the sequence of jquery document ready initializations.

If custom code triggers the TOC.init() first, the library creates a DOM element that then results in duplication if your libraries' document ready is triggered. (In our case it's almost impossible to change this sequence..)

The library is missing a protection against such a duplication. This can be achieved as simple as setting a helper class when completing init() that you then exclude in the libraries' document ready or the init() selector itself.

@johnchque
Copy link

Added a new PR for this #46. :)

@BoPeng
Copy link

BoPeng commented Mar 5, 2020

I land myself here after debugging this issue for hours. My case is a bit more complicated because I use AJAX to load documents and run Toc.init with different $scope but then the library's own init function will alway add a second Toc.

@nguyenhuuthuat09
Copy link

nguyenhuuthuat09 commented Mar 13, 2020

With CSS, make sure you let bootstrap-toc.min.css right under bootstrap.min.css. Do not let any other CSS between them.

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-toc.min.css"/>

With Jquery and JS, make sure you let bootstrap-toc.min.js right under bootstrap.min.js. Do not let any other JS between them. And you should place them in the order below.

<!--  Jquery and JS -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-toc.min.js"></script>

And then TOC plugin will work perfectly. That is how I fixed it when TOC is duplicated.

@nguyenhuuthuat09
Copy link

And if above solution does not work, you can try to use JS to remove one of two duplicated TOCs.

$(document).ready(function () {
    $("#toc ul").eq(0).remove();
});

@BoPeng
Copy link

BoPeng commented Mar 13, 2020

I tried, and out of frustration I modified bootstrap-toc.js to remove the ready() function just as you have suggested.

@nguyenhuuthuat09
Copy link

When my TOC plugin created two Table of contents instead of one, I checked the .html source in browser's developer mode and I see that it created two <ul> inside <nav id="toc"> instead of one as expected. So that I use this script to remove one <ul> and everything work correctly.

And I mean, you should add this script to a custom_script.js and use this custom_script.js in .html page where you need to use TOC plugin, instead of modifying bootstrap-toc.js.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants