Dropdown add events

[paglias]

It would be very usefult if Dropdown would have some events like Modal have (show, shown, hide, hidden)

[fat]

Seems odd - what's the usecase?

[Merg1255]

do custom page ajax load on user click.

[pokonski]

It's better to have a global lib that attaches events to links with data-remote attribute. That's how Rails does it => https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L53 It also gives you all the callbacks you want.

You can obviously use that outside of Rails, it's not framework specific.

[fat]

just listen to the element's click event then - nothing different between that and having a shown event

[garrettlancaster]

+1

Use case: Facebook style notification menu. I want to set a timeout when the menu is opened, and clear the timeout if the menu closes before a certain amount of time has passed.

[wavoemployee25]

+1 I have a very similar use case and would love to see this added!

@fat: might work for shown, but not for hidden as you can click anywhere to hide the dropdown.

[frontierpsycho]

I tried listening to the click event, but it seems that bootstrap returns false in the function that shows the dropdown, so even that is not possible. Perhaps this issue should be re-opened.

[vkhater]

+1 to open this issue again. event.preventDefault() seems to be a better option.

[failpunk]

I would just like to see an event for dropdown close.

[frontierpsycho]

By the way, a friend suggested I use .on() instead of .click(), and that did the trick.

[aamerabbas]

+1

I want a event for dropdown close as well. The use case is a dropdown with check boxes and a submit button at the end. I want to submit the form if the user clicks the submit button OR if he closes the dropdown.

[skeet70]

+1

Click does seem to have some issues with the dropdown, a set of events could be handy for all sort of things, as well as staying consistant across similar bootstrap elements.

Using on/live/click doesn't work on my dropdowns, seems that the click event isn't bubbling past the dropdown toggle. The dblclick event still works (as useful as that is).

Edit: Using both the mousedown and mouseup commands together is a workaround for this.

[eendeego]

+1

Another use case: I want to update information on the dropdown when it's opened, pretty much like the tag dropdown on gmail. The checkboxes are already there, but it may be expensive to update them all the time.

[volmer]

+1

An event for dropdown close would be great. An use case: to disable the dropdown itself once the user already read its content.

[wavoemployee25]

@fat can we finally reopen this ticket please look at all the +1s! Thanks

[rmclain]

Best way I found to solve this was to remove the data-toggle from the element, and then re-add on your click event. This worked for what I was doing with it which was to load the drop down via ajax so my specific event only needed to be called once.

$(document).on("click", ".class", function(event) {
    // Ajax actions here 
    $(this).attr("data-toggle", "dropdown").click();
});

[anishpateluk]

I'd also like to see a 'shown' event for the dropdown so I can set focus to a field

[jmif]

+1

This would provide a quick and easy way to focus on a form field upon opening.

[mypark]

+1

Use case: reset input fields in login drop down on close so it doesn't have crud from previous login attempt

[mdelbo]

+1

use case: trigger an ajax load on display

[wink]

+1 Use case: need to fire an analytics ajax call when a user opens and closes the menu.

[tonybaroneee]

+1

This would provide a quick and easy way to focus on a form field upon opening.

[michaelahlers]

+1

I would like to know when the menu has been dismissed.

[mattruma]

+1

[yojeek]

+1. listen for click is not enought. would be nice to have show/open events .

[asacarter]

+1

use case: also to trigger an ajax load on display to load dynamic data in to menu. I'm really surprised there are no events for this plugin.

[asacarter]

This only loads the ajax request on the first click for each item for me.

$(document).on("click", ".class", function(event) {
// Ajax actions here
$(this).attr("data-toggle", "dropdown").click();
});

What do I need to do to load the ajax request on each time the drop down menu is toggled?

[FCHAPLIN]

+1
Need to load an ajax form on click

[Deepak-Patel]

+1
load the page

[jbranc]

+1
need to know when it opens AND closes. click only can get you open, but there are a lot of other events that cause it to close. my particular use-case is to disable tooltips from dropdown title while menu is open - they get in the way

[elado]

@jbranc ha! Was exactly my use case.

[jbranc]

@elado looks like a feature in high demand! FWIW here is a partial workaround. gets rid of it on open, but it still comes back while the menu is open if they hover over again.

    $('.dropdown').on('click', function(e) {
        $('[rel=tooltip]').tooltip('hide');
    });

[smajl]

+1
I am now fighting this use case: Focus on input element inside the dropdown upon it is shown.
So it would be absolutely great to have callbacks for these actions.

[bootsified]

+1
Use case: Because of the way I have to layer some divs, I'd like to be able to adjust the z-index of them on dropdown open and close. Mine isn't a very common need, probably, but it seems evident that there is a big desire for these events in the community.

[tonybaroneee]

+1 for focusing an input inside the dropdown upon being shown.

[ssewell]

Use case: User clicks dropdown trigger, dropdown opens immediately with a indeterminate progress bar, AJAX call is made to populate contents dynamically.

I need access to a "closed" event, so I can repopulate the contents of the dropdown to the original indeterminate progress bar for subsequent requests.

[twanlass]

+1 - dropdown contains options (checkboxes etc). Save settings on close event.

[tspike]

+1 @fat @mdo thanks for all your hard work, could please explain why this issue is still closed? My use case: need to fire ajax requests when the dropdown is closed.

[drapergeek]

+1 I would like to be able to perform an action once the dropdown has been displayed.

[michaelahlers]

I needed this today (again).

[tamlyn]

+1

I read the docs about events and naturally assumed that this event would exist. I've wasted 20 minutes trying to figure out why it wasn't working only to discover there is no event! A simple onclick is not the same as you also have to check if it's an open or a close click and check whether the drop-down has been rendered yet - all things which a show event would encapsulate.

[calebl]

would be great to have an event fired on dropdown hide/close. not having it is making my development much more difficult

[pachocho]

Stil nothing after a year?

[rgomesf]

dropdown hide/close will be very useful

[gpmcadamold]

+1 There are many use-cases for this, and given how trivial the addition is compared to the added benefit, it seems a no-brainer.

[rochal]

+1. Need this badly for my minishopping cart.

[davewasmer]

+1
Use case: a dropdown as part of a group of radio buttons. The dropdown starts as "Pick one:", but if they close the dropdown without selecting an item, the dropdown toggle button itself shouldn't stay active. A close event would allow me to remove the active attribute cleanly, whenever the dropdown closes.

[sbking]

+1
Use case: I have a login form inside of a dropdown. I want to:

• Focus the username field when the dropdown is opened.
• Clear the form values when the dropdown is closed.

This would be extremely useful for me.

[cr0ybot]

+1
Use case: Tell a jQuery plugin like jqPlot when to draw/replot: http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html

It is critical to bind the callback to the UI widgets "show" or "change" method which calls the plots "replot" method. Without this, the plot won't properly redraw itself when it's container becomes visible.

EDIT: I finally found the "shown" event and got it working. Please see http://twitter.github.io/bootstrap/javascript.html#modals and scroll a little ways down to Events.

If you're getting a "modal is not a function" error like I was, check to make sure you aren't loading jQuery AFTER bootstrap.js. I didn't think I was until I realized that I had copy/pasted a second jQuery link in for a plugin.

EDIT 2: I realize now that this is specifically about dropdown menus. Feel free to ignore this entire comment if what I said doesn't apply to dropdowns at all.

[tacone]

The problem with #1343 (comment) is that you can close the dropdown by clicking on any other part of the document. So just listening for clicks on the toggle element won't help.

[davewasmer]

@tacone but the dropdown must setup a listener for that click outside the document, right? Why not just fire an event from inside there?

[tacone]

@davewasmer let's also setup a listener for key presses then, shall the nyancat accidentally land on your escape key.

Here's my workaround. Ugly, but less ugly than hacking the core.
https://gist.github.com/tacone/5389055

[davewasmer]

@tacone thanks for the example code, but I don't see the ugliness of adding this to the core. Not only would the code be cleaner (just adding a trigger to the existing listeners), it would make the interface consistent with the other JS UI components (i.e. modal, scrollspy, tabs, alerts, collapse, and carousel all fire events).

[not-only-code]

+1

[nfrancis]

+1 ... trying to disable tooltips on the link when dropdown is toggled.

[cvrebert]

Implemented for 3.0.0-wip in #7113 & f3e45c3.

[michaelahlers]

@cvrebert, thank you!