Search code examples
jquerycssajaxtwitter-bootstrapscrollspy

Bootstrap Scrollspy not working with AJAX loaded menu

I have a submenu that gets loaded via ajax. I'm trying to use Bootstraps scrollspy to highlight the submenu based on where the user is on the current page. However it doesn't work with my sub-menu. I believe its because its loaded via ajax. How can I get the sub-menu to highlight?

subnav.html

<div class="span3 affix">
    <div class="well sidebar-nav">
        <ul class="nav nav-list">
            <li class="nav-header">Document</li>
        <li><a href="#a">A</a></li>
        <li><a href="#b">B</a></li>
        </ul>
     </div><!--/.well -->
</div><!--/span-->

Mainpage.html

<body>
    <div id="sub-nav"></div>

    <div id="a" style="margin-bottom:200px;"></div>

    <div id="b" style="margin-bottom:200px;"></div>

</body>

<script>
jQuery(function(){
    $('#sub-nav').load('apps_subnav.html');
    $('body').scrollspy();
});
</script>
Solution

  • You should wait on jQuery's AJAX request to complete [and eventually for the data to be appended] before trying to bind the scrollspy. Make use of the $().load() callback.

    jQuery(function(){
  $('#sub-nav').load('subnav.html', function(){
    $('body').scrollspy();
  });
});