I am using the Bootstrap scrollspy plugin (v2.0.0) which works without a problem when the page loads first.
The navigation bar as well as the content sections get updated via ajax calls (add or remove menu items). After this scrollspy doesn't highlight the newly added items anymore.
How do I tell scrollspy to refresh? Or maybe attach scrollspy manually to the following code?
<body data-spy="scroll" data-target=".subnav" data-offset="0">
<div id="listing">
<div class="subnav">
<ul class="nav nav-pills nav-stacked">
<li><a href="#cat2">Home & Garden</a></li>
<li><a href="#cat5">Computers & Networking</a></li>
</ul>
</div>
<div>
<section id="cat2">...</section>
<section id="cat5">...</section>
</div>
</div>
</body>
I am using the Bootstrap scrollspy plugin (v2.0.0) which works without a problem when the page loads first.
The navigation bar as well as the content sections get updated via ajax calls (add or remove menu items). After this scrollspy doesn't highlight the newly added items anymore.
How do I tell scrollspy to refresh? Or maybe attach scrollspy manually to the following code?
<body data-spy="scroll" data-target=".subnav" data-offset="0">
<div id="listing">
<div class="subnav">
<ul class="nav nav-pills nav-stacked">
<li><a href="#cat2">Home & Garden</a></li>
<li><a href="#cat5">Computers & Networking</a></li>
</ul>
</div>
<div>
<section id="cat2">...</section>
<section id="cat5">...</section>
</div>
</div>
</body>
1 Answer
Reset to default 15scrollspy('refresh') will simply do what the name says!
In my case I added the follwing code after the ajax call:
$('[data-spy="scroll"]').each(function () {
$(this).scrollspy('refresh');
});