Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Dynamic Menu Population Not Supported

Home Forums Older releases 1.0.x + Bootstrap addon Dynamic Menu Population Not Supported

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #2872

    I’m dynamically populating the bootstrap menu items. So when the addon automatically runs there are no menu items that yet exist so it does not work.

    I see the problem and can get it to work but I’m no jQuery addon expert and I’m sure my ‘fix’ is not done properly. Ideally there should be a SmartMenu bootstrap addon option to not automatically attempt to attach to bootstrap menus.

    Any suggestions on how to properly deal with dynamic menu population?


    I already replied on Twitter but I guess you haven’t seen it:

    First, grab the latest dev version from (since beta1 has some related bugs). Then:

    a) if you create the whole ul.navbar-nav element dynamically, call $.SmartMenus.Bootstrap.init() to init it after it’s inserted in the DOM.

    b) if your ul.navbar-nav is available in the DOM ondomready and you just update parts of it after that (e.g. add items, sub menus, etc.), call this method after it’s populated:

    You will need to set your ul.navbar-nav element some id (e.g. “main-menu”) so that you could refer it and use the above API method.

    Please let me know if you still have any troubles.


    I am unable to get either of these to work. Here is how I am populating my BootStrap menu via JsRender

    var liHtml = $("#menuTemplateBS").render(menuSections);
          $(jqMenuId).empty().append('<ul id="bsMenu" class="nav navbar-nav">' + liHtml + '</ul');

    I’ve tried both your suggestions after the above and even from console manually well after the page is displayed.


    Says Bootstrap is undefined and refresh doesn’t error but doesn’t seem to do anything


    As far as I can see, you are creating a new UL element so you will need to call $.SmartMenus.Bootstrap.init(); after this line:

    $(jqMenuId).empty().append('<ul id="bsMenu" class="nav navbar-nav">' + liHtml + '</ul>');

    If you are getting the “$.SmartMenus.Bootstrap is undefined” error message, then you are either not using the latest dev versions of “jquery.smartmenus.js” and “jquery.smartmenus.bootstrap.js” from, or you have not linked properly the “jquery.smartmenus.bootstrap.js” file on your page, so you may want to check these.

    If you are still having troubles, please post some kind live demo that I could test because it’s difficult to guess what exactly might be wrong without being able to look at your code.


    Actually I told you wrong error message when I attempt to use $.SmartMenus.Bootstrap.init();

    JavaScript runtime error: Unable to get property ‘init’ of undefined or null reference

    I have double checked and retried my code and yours (this is a weekend project) I have the latest SmartMenu and they are loaded on the page
    SmartMenus jQuery Plugin Bootstrap Addon – v0.2.0 – June 1, 2015
    SmartMenus jQuery Plugin – v1.0.0-beta1 – June 1, 2015

    Below is exact code as I tried commented out are your suggestion and a couple things I tried. I can make this work with the last line $.fn.smInit() which is my tweak on jquery.smartmenus.bootstrap.js

     var liHtml = $("#menuTemplateBS").render(menuSections);
          $(jqMenuId).empty().append('<ul id="bsMenu" class="nav navbar-nav">' + liHtml + '</ul');
          // $(jqMenuId + " ul").smartmenus('refresh');

    Here is my tweak to jquery.smartmenus.bootstrap.js that allows things to work. This is what lead me to the original post. Actually, I had to just a bit more but this is the gist. I don’t fully comprehend why this works and just how to properly resolve.

    (function($) {
    	// init ondomready
    	//$( function() {
      $.fn.smInit = function() {

    OK, I see, sorry maybe I didn’t explain well enough that you need to use specifically the latest dev version from The Bootstrap addon’s latest dev version is 0.2.0+ i.e.:

    So if you like, just grab the latest dev version from GitHub and it should work out of the box with $.SmartMenus.Bootstrap.init()



    Thanks, the current dev version resolves the issue.

    I have not perused the code but I personally would prefer to see a model that must be explicitly initialized rather than aut initializing such as the ‘release’ version did.


    The auto attach to bootstrap feature caused me a few hours of pain again today. I was converting my JSRender templated Bootstrap menu over to use Knockout so that I could include 1 less library.

    I finally discovered that SmartMenu was auto attaching to this fragment prior to the KO binding

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul id="navBarMenu" class="nav navbar-nav" data-bind="template: { name: 'menuSection-template', foreach: menu}">

    After KO binding\templating is completed, calling


    does nothing. I guess it figures it has already attached to the menu fragment.

    Marking the #navBarMenu with


    and then removing it after KO binding resolved the problem.

    Again, I would suggest the library not auto attach to Bootstrap menus or at least throw an error when initing a BS menu a second time.


    Yep, as I mentioned before, if the menu is available in the DOM ondomready the script will initialize it (and thus $.SmartMenus.Bootstrap.init(); will have no effect after that since the menu is already initialized). So if the menu items, sub menus, etc. are updated by some other script after that (what seems to happen in your case), you will need to call $('#navBarMenu').smartmenus('refresh'); after the DOM update (or alternatively $('#navBarMenu').smartmenus('destroy'); + $.SmartMenus.Bootstrap.init();).

    As for your suggestion to not auto initialize ondomready by default – I get your point but the addon is designed so that it requires zero configuration efforts for most users so that they’d just need to link the script files and it all works in the generic case.


    I am getting the issue of that Submenus are not populated while using the menu dynamically. Please help me out for this issue.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘1.0.x + Bootstrap addon’ is closed to new topics and replies.