Twitter Bootstrap dropdown closes when clicked

Question

I am not getting this to work. The dropdown is closing all the time.

I want to be able to send message from the dropdown menu.

I included both bootstrap.js, bootstrap.css and bootstrap-responsive.css in the header.

How can I get this dropdown not to close ?

<head>
<script type='text/javascript'>//<![CDATA[
    $(window).load(function () {
        $('.dropdown-menu textarea a').click(function (e) {
            e.stopPropagation();
        });

    });

    function ShowDr(div) {
        $("#medr" + div).css("display", "block");
        $("#xdr" + div).focus();
    }

    //]]>  
</script>
</head>
<body>


 <ul class="nav">
   <li class="dropdown" data-dropdown="dropdown">
     <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">      Message 
     <b class="caret"></b></a>
     <ul class="dropdown-menu dropdown-menu-large">
        This is a message from the user John to Ann. If Ann wants to send an answer she will click the link. Then 
        the textarea will become visible. 
        <a href="javascript:void(0)" onclick="javascript:ShowDr('18')"><img src='/img/reply.gif'> Answer</a><br/>
        <div id="medr18" style="display:none" class="medr">            
            <li>
                <div style="padding:20px;">
                    <textarea name="xdr18" id="xdr18" class="textareasmall"></textarea> <br /><input type=button value="Send" class="btn btn-success btn-medium" onclick="GoM('2','Message sent')" />
                </div>
            </li>
         </div>
       </ul>     
   </li>
</ul>

What browsers have you tested this on? – Mike Pennington Nov 23 '12 at 01:20 — Mike Pennington, Nov 23 '12 at 01:20

score 11 · Answer 1 · answered Nov 23 '12 at 01:47

11

You need to properly select the textarea in order for the stopPropagation() method to work. Try this:

JS

$('.dropdown-menu textarea').click(function(e) {
    e.stopPropagation();
});

Also, your textarea cannot be a child of a ul element, so include it inside a li list item instead.

Demo: http://jsfiddle.net/ENWFy/

answered Nov 23 '12 at 01:47

Andres I Perez

75,075
21
157
138

This demo works great, but I need more. I edit my question above with what I need. Please help me...;-) THANKS ! – Bjorn Ingi Nov 23 '12 at 09:30
@BjornIngi the same principle still applies, just incase your dropdown content inside a div and stop the propagation on that, http://jsfiddle.net/ENWFy/1/. – Andres I Perez Nov 23 '12 at 11:07
Thanks, Andres, that worked fine ! I just created $('.dropdown-menu .stayOpen').click(function (e) { e.stopPropagation(); }); and then blalb lblblblablbl Answer – Bjorn Ingi Nov 24 '12 at 18:46
@BjornIngi I'm glad it worked. If the answer was satisfactory please don't forget to mark it as correct, to help future users with the same question. – Andres I Perez Nov 24 '12 at 18:49
Worked for me; thumbs up! – Muneer Oct 28 '14 at 12:17

lavrik · Answer 2 · 2014-03-18T09:29:02.213

2

Time passed since answer had been accepted, but if you want to keep the dropdown opened, if it acts like a kind of dialog, the best way i think is:

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
           if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });

edited Mar 18 '14 at 09:29

answered Mar 18 '14 at 08:18

lavrik

1,456
14
25

score 1 · Answer 3 · answered Nov 22 '12 at 23:57

1

You are missing <form> tag:

<ul class="nav">
     <li class="dropdown" data-dropdown="dropdown">
        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">    Message 
        <b class="caret"></b></a>
        <ul class="dropdown-menu dropdown-menu-large">
           <form>
             <textarea name="xd" id="xd" class="textareasmall"></textarea><br /><input type=button value="Send" class="btn btn-success btn-medium" onclick="GoM('2','Message sent')" />
           </form>
         </ul>     
    </li>
</ul>

answered Nov 22 '12 at 23:57

salih0vicX

1,363
1
8
9

Not quite sure that adding form is the solution. You want to make a page that does not require the whole page to be reloaded when clicking `send`. – eandersson Nov 23 '12 at 01:26
I do not want to add form, because there is already a form tag for the whole page, Im using .NET. I also want to be able to click a link (Send reply link) in the dropdown that makes a div visible that shows the textarea. When I click the link to drowpdown closes. What I am doing is showing users incoming messages in a dropdown, and if they want to answer the message from the dropdown they sould be able to do that. – Bjorn Ingi Nov 23 '12 at 01:53

score 0 · Answer 4 · answered Sep 24 '14 at 02:55

the best answer will be is to perform click so it will act the same as the user click the mouse to hide the drop-down menu, to do this add this snap code to your page:

<script>
    $(document).ready(function () {
        $("li.dropdown ul.dropdown-menu li").click(function (event) {
            event.toElement.parentElement.click();
        })
    })
</script>

score 0 · Answer 5 · edited Aug 20 '15 at 12:03

0

You can omit the dropdown call all together, the bootstrap dropdown works without it. Make sure you're wrapping your script properly, you can include it on the header or body of your page, although personally i prefer placing it on the body of your page.

$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
    e.stopPropagation();
});

edited Aug 20 '15 at 12:03

Mo.

26,306
36
159
225

answered Aug 20 '15 at 07:36

Nagender

1
4

Twitter Bootstrap dropdown closes when clicked

5 Answers5

Linked