jquery chosen in bootstrap popover not working

1.2k Views Asked by At

I am trying to run jquery chosen inside a bootstrap popover, but the initiated chosen dropdown is not clickable.

Here is my code:

html

<button type="button" class="btn btn-md btn-danger" id="popover" data-title="Popover title" >Click to toggle popover</button>
<div style="display: none;" id="popovercontent">
<select class="chosen chzn-done">
        <option>Choose...</option>
        <option>jQuery</option>
        <option selected="selected">MooTools</option>
        <option>Prototype</option>
        <option>Dojo Toolkit</option>
    </select>
</div>

JS

$(document).ready(function(){

// init chosen
  var $chosen = $(".chosen").chosen();

// init popover
  var $popover = $('#popover').popover({  
            placement: 'bottom',
            html: true,
            content: function () {
                return $('#popovercontent').html();
            },
            title: function () {
                return $(this).data('title');
            },
  });

// on show popover
  $popover.on("show.bs.popover", function(e) {
    console.log('open popover');
    $chosen.trigger("chosen:updated");
    });

}); // document.ready

https://jsfiddle.net/gdtocsud/

similar question (not answered): Chosen in bootstrap popover not working?

thank you

Bjoern

3

There are 3 best solutions below

1
On BEST ANSWER

Here is the js code :

 $(document).ready(function() {

  // init chosen
  //var $chosen = $(".chosen").chosen();

  // init popover
  var $popover = $('#popover').popover({
    placement: 'bottom',
    html: true,
    content: function() {
      return $('#popovercontent').html();
    },
    title: function() {
      return $(this).data('title');
    },
  });

  // on show popover
  $popover.on("shown.bs.popover", function(e) {
    $('.chzn-done').chosen();

  });
  $popover.on('hidden.bs.popover', function() {
    $('.chzn-done').chosen('destroy');
  });
}); // document.ready

For working code: Here is fiddle link

Similar to chosen with modal the chosen behaviour needs to be initialized after the content is ready, so similar to modal events, you can use the popover events

1
On

Hi here is the working demo

https://jsfiddle.net/gdtocsud/2/

<div class="panel panel-default">
        <div class="panel-body">
           <div class="btn-group">
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
               <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span>
             </button>
             <ul class="dropdown-menu" role="menu">
               <li><a href="#">Item 1</a></li>
               <li><a href="#">Another item</a></li>
               <li><a href="#">This is a longer item that will not fit properly</a></li>
             </ul>
           </div>
         </div>
      </div>
0
On

try this, may be this will help u

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css">  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css">  
<script>
$(document).ready(function() {
    var $popover = $('#popover').popover({
    placement: 'bottom',
    html: true,
    content: function() {
      return $('#popovercontent').html();
    },
    title: function() {
      return $(this).data('title');
    },
  });
  $popover.on("shown.bs.popover", function(e) {
    $('.chzn-done').chosen();
  });
  $popover.on('hidden.bs.popover', function() {
    $('.chzn-done').chosen('destroy');
  });
});
</script>
</head>
<body style="padding:25px">
<button type="button" class="btn btn-md btn-danger" id="popover" data-title="Popover title">Click to toggle popover</button>
<div id="popovercontent" style='display:none'>
  <select class="chosen chosen-select chzn-done" >
    <option>Choose...</option>
    <option>jQuery</option>
    <option selected="selected">MooTools</option>
    <option>Prototype</option>
    <option>Dojo Toolkit</option>
  </select>
</div>


</body>
</html>