jquery chosen in bootstrap popover not working

Question

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

Answer 1

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