Bootstrap 3 dropdown

help
1

Hello,
I’m trying to get a bootstrap 3 dropdown to work with no luck. I was wondering if anyone had a simple example including html and required javascript as well as what bootstrap library they have installed. I can get the dropdown to come up, and when I click the dropdown button the option list is shown, but I can’t figure out how to display the selected option. Is this something that should require javascript in addition to the bootstrap html?

Here’s my html:

  <div class="dropdown">
       <button class="btn btn-default dropdown-toggle" type="button" id="mt-command-dd"
              data-toggle="dropdown">Command
             <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
             <li role="presentation">
                <a role="menuitem" tabindex="-1"
                    id="config-request-command" href="#">Option 1</a>
             </li>
             <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Option 2</a>
             </li>
             <li role="presentation">
               <a role="menuitem" tabindex="-1" href="#">Option 3</a>
             </li>
             <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Option 4</a>
              </li>
             <li role="presentation" class="divider"></li>
             <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Other</a>
             </li>
    </ul>
</div>
2

Hey, what exactly is the problem your having? That code seems to work in bootply: http://www.bootply.com/8h2xFxz1Tu

3

Are you trying to mimic the behaviour of a dropdown (radio) menu? You could use jQuery to do something like:

// add a class="menuitem" to your <li>
Template.foo.events({
    'click .menuitem': function (event) {
        $('#mt-command-dd').text(event.target.text());
    }
});
4

hellstad’s solution is pretty much the same as what I did to achieve the same behavior with the bootstrap dropdowns. In my solution I generalized the event and the code to apply to every instance of a dropdown on my page.

The reason this isn’t the default behavior as I believe the dropdown you’re using is intended as a navigation menu.

5

Ah, so should I be using a different type of bootstrap dropdown?

Also, I think part of my problem is the $(’#abc’) syntax doesn’t work for me. It never returns any objects.

Jeff

6

The selected value isn’t displayed in the button element after selection. It still says “Command”.

7

This is jQuery. $('#abc') for example would be selecting a DOM element with id="abc". The code hellstad posted should work as long as your button does in fact have id="mt-command-dd". Is the markup you posted correct?

9

Well if you don’t actually have an element with id="mt-command-dd" then it certainly won’t return an element that doesn’t exist. Use whatever id your button really has, or any other selector that will return that element.

10

Ah, had a typo in my markup. Thanks, I’m now able to use jquery constructs within my event handler.

11

hellstad’s suggestion works except I had to use event.target.text without the ending parens to read the text value. Overall that I think that was my biggest issue, understanding when parens are needed and when not.

Thanks!
Jeff

12

Sorry, I didn’t test the code. I get confused sometimes too. event.target works a little different to using the jQuery selector. To use the same syntax for everything you can also do $(event.target).text()

13

hello guys,

i was having the same problem but don’t really get the solution. so if i use the html above and

‘click .menuitem’: function (event) {
$(’#mt-command-dd’).text(event.target.text);
},

in my template.events in the js file it should work? because for me, it doesn’t (still shows “command” instead of the picked option whenever i click on an option)

would be great if you could explain again :slight_smile:

14

A lot can change in three years. Please open a new topic and explain your problem. Thanks :slight_smile:.

15

Locking this topic now.

16