Dynamic Menu Population Not Supported

[schellem]

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?

[admin]

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

First, grab the latest dev version from https://github.com/vadikom/smartmenus (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:

http://www.smartmenus.org/docs/#refreshInstance

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.

[schellem]

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.

$.SmartMenus.Bootstrap.init(); 

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

$('#bsMenu').smartmenus('refresh');

[admin]

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 https://github.com/vadikom/smartmenus, 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.

[schellem]

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');
      //$.SmartMenus.Bootstrap.init();
      // $(jqMenuId + " ul").smartmenus('refresh');
      //$('#bsMenu').smartmenus('refresh');
      $.fn.smInit();

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() {
  

[admin]

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

https://raw.githubusercontent.com/vadikom/smartmenus/master/src/addons/bootstrap/jquery.smartmenus.bootstrap.js

So if you like, just grab the latest dev version from GitHub https://github.com/vadikom/smartmenus/archive/master.zip and it should work out of the box with $.SmartMenus.Bootstrap.init()

Cheers!

[schellem]

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.

[schellem]

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}">
        
      </ul>
</div>

After KO binding\templating is completed, calling

$.SmartMenus.Bootstrap.init()

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

Marking the #navBarMenu with

data-sm-skip=true

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.

[admin]

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.

[Nitin]

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

[Author]

Posts