Form in Dropdown

[mneuhaus]

I'd love to see support for Forms in Dropdowns like the Twitter login Dropdown.

Currently this doesn't work, because all dropdowns are closed on $(body).click.

[fat]

just stopPropagation on your form like this:

$('.dropdown form').on('click', function (e) {
  e.stopPropagation()
})

[masha256]

This technique doesn't work with bootstrap 2.0

[yurenaghm]

This worked for me with bootstrap 2.0...

[cguillemette]

@fat : Thanks, it worked great with bootstrap 2.0.

[fat]

cool great to hear

[jonandersen]

Cant get this solution to work. Can you post a working example I can see?

[cguillemette]

Post your code and I will have a look at it.

[jonandersen]

Here is the repo: https://github.com/jonandersen/crowdme-1

The interesting things will be in layouts _header.html.erb and _header_login.html.erb

the javascript file is bootstrap_load.js Thanks for your help!

[cguillemette]

Crap, I don't Ruby. :)

But I looked at the code...Have you tried other selectors then $('.dropdown form')? Like $('.dropdown-menu form')? If you put a breakpoint on e.stopPropagation() is it caught?

[jonandersen]

:P I tried several different selectors but none seem to give any response. Tried with alerts and breakpoints but the code won't get executed.

[cguillemette]

If the breakpoints are not hit then try hooking directly to form given it a unique. Any javascript errors? On Mar 12, 2012 9:44 AM, "Jon Andersen" < reply@reply.github.com> wrote:

:P I tried sever

:P I tried several different selectors but none seem to give any response. Tried with alerts and breakpoints but the code won't get executed.

---

Reply to this email directly or view it on GitHub: https://github.com/twitter/bootstrap/issues/1049#issuecomment-4451868

[jonandersen]

I applied this to the console in firebug and all worked (form have class name "drop-form")

$('.drop-form').on('click', function (e) { e.stopPropagation() });

Though having this in the javascript file does not seem to work. It must be some kind of rails problem, but since I'm just a beginner I have some problems figuring out.

[yurenaghm]

Which jQuery version are you using?

[jonandersen]

Should be one of the latest,

jquery-rails (2.0.0)

[innotekservices]

I patched the bootstrap-dropdown.js file like so on line 64:

  function clearMenus(event) {
    if (event && $(event.target).closest('form').closest('.dropdown').hasClass('open')) {
      return
    }
    $(toggle).parent().removeClass('open')
  }

Then use a form as the dropdown and any clicks within that form are ignored.

[judy-zz]

This is what I'm using, and it works great. It's in coffeescript:

$('.dropdown-menu form').on 'click', (e) -> 
  e.stopPropagation()

Voila.

[pixelyunicorn]

This NEEDS to be built-in to bootstrap...

[jnovek]

I too would like to see this built-in -- the stopPropagation() technique does not work with live() events. If you stopPropogation() at the form or the dropdown menu, events will never bubble up the DOM to wherever live() events are bound. Right now I'm manually unbinding and rebinding events after AJAX (which is kind of ghetto, IMO).

[ppawel]

Stopping propagation is not really a solution but a hack. Leave the events alone.

http://css-tricks.com/dangers-stopping-event-propagation/

[cvrebert]

Locking this issue due to its age. If this is still a problem in v3.2.0, please open a new issue.