Question

So I’ve just started using bootstrap’s dropdown menu. It’s very convenient, but I am having an issue.

In order for the dropdown menu to work, it seems that the original function of the element that triggers the dropdown (.dropdown-toggle) is completely disabled when adding the html attribute data-toggle="dropdown".

This makes sense, because you don’t really want a dropdown toggle to be doing other magical things (especially redirecting to a new page or anchor when you’re trying to access a menu).

However, I have a submit button that saves something through ajax when you click it. I want the dropdown menu to come out after the save is performed. How can I toggle both the dropdown menu and perform an ajax request when the button is clicked?

Or in an even vaguer sense, how do I toggle the dropdown menu while preserving a button’s original function?

Perhaps the twitter bootstrap dropdown menu is not the ideal function for this? Or are there modifications for this?

Answer 1

This is working for me in Chrome. Capture the click event of the button and then do whatever you want. Stop the event if there is an error or something with stopPropagation() and preventDefault(). Fiddle

$("#buttonId").click(function(event) {
    if ("saved" == "saved") {
        null
    }
    else {
        event.stopPropagation();
        event.preventDefault();
    }
});​