CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
LAffair
LAffair

Reputation: 1998

Bootstrap button groups - dropdown and 'Show' button

I have a panel with buttons 

<div class="panel panel-default" style="padding-left:15px; padding-top:5px; padding-right:15px; float:left">
     <button class="btn btn-default" data-toggle="modal" data-target="#myModal" onclick="">Edit</button>
     <div class="btn-group btn" style="padding:0;">
          <div class="btn-group">
               <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Line</a></li>
                        <li><a href="#">Bar</a></li>
                    </ul>
         </div>
         <button class="btn btn-default">Show</button>
    </div>
</div>

and for the dropdown, when the user selects an option, it should change the name of the button

$(function () {
    $(".dropdown-menu li a").click(function () {

        $(".btn:first-child").text($(this).text());
        $(".btn:first-child").val($(this).text());
    });
});

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        </div>
                        <div class="modal-body">

                        </div>
                        <div class="modal-footer">
                            @*<button type="button" class="btn btn-danger" style="float:left;" data-dismiss="modal">Cancel</button>*@
                            <button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
                        </div>
                    </div>
                </div>
            </div>

but it also changes the name of the Edit button. I don't know what am I doing wrong :( It is possible to group a dropdown in left and a Show button to the right, change the left button name according to the selection without affecting the rest of the buttons and also, to display one popup based on the selection when the user presses Show (each selection has it's own popup)?

I'm pretty new in JavaScript programming so please be gentle :)

Upvotes: 0

Views: 1249

Answers (1)

Nadir Laskar
Nadir Laskar

Reputation: 4160

You code was not working because you CSS selector .btn:first-child is selecting multiple btn elements thus updating multiple buttons text.

If you want to update the toggle button you can do this as follows.

You can select the toggle button using this selector .btn.dropdown-toggle in you jquery.

I would suggest you to add an id to the button and select it using an id.

SNIPPET

$(function() {
  $(".dropdown-menu li a").click(function() {
    //$('.btn.dropdown-toggle').text($(this).text());
    $('#toggle').text($(this).text());
  });
 $('#show').click(function(){
     var show = $('#toggle').text();
     alert(show);
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="panel panel-default" style="padding-left:15px; padding-top:5px; padding-right:15px; float:left">
  <button class="btn btn-default" data-toggle="modal" data-target="#myModal" onclick="">Edit</button>
  <div class="btn-group btn" style="padding:0;">
    <button id="toggle" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#" data-toggle="modal" data-target="#myModal">Line</a></li>
      <li><a href="#" data-toggle="modal" data-target="#myModal">Bar</a></li>
    </ul>
    <button id ="show" class="btn btn-default">SHOW</button>
  </div>
</div>

Upvotes: 1

Related Questions