Dynamic Menu Population Not Supported

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2872
    schellem
    Participant

    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?

    #2873
    admin
    Keymaster

    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.

    #2876
    schellem
    Participant

    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');
    #2879
    admin
    Keymaster

    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.

    #2883
    schellem
    Participant

    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() {
      
    #2884
    admin
    Keymaster

    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!

    #2891
    schellem
    Participant

    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.

    #2898
    schellem
    Participant

    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.

    #2905
    admin
    Keymaster

    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.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?