[schellem]

Ok, finally figured it out, my code was marking submenus with the bootstrap ‘dropdown-menu’ class. I’m dynamically building my menus which worked fine with 1.0 version of SmartMenu and the bootstrap addon. I’m currently trying out the non bootstrap menus.

[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.

[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]

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

[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');

[Author]

Posts