How to use bootstrap popover with chosen?

Question

What is the best way to use Chosen in a popover with Meteor?

I have a calendar, and when I click on event a popover open with a little form to update event.

Here is my template calendar:

<template name="bookingCalendar">
  <section>
    <div class="col-md-12">
      <div id="calendarMain"></div>
    </div>
  </section>

  {{> bookingCalendar_popover}}
</template>

My popover template:

<template name="bookingCalendar_popover">
  <div id="bookingCalendar_popover" style="display: none">
    <form class="form-horizontal" role="form">
      <div class="col-md-12 col-lg-6">
        {{> objectIndividual_edit id = 'individual' label = 'Patient'}}
      </div>
    </form>
  </div>
</template>

And my object:

<template name="objectIndividual_edit">
  <div class="objectRow">
    {{> objectLabel label=label id=id}}
    <div class="objectEdit">
      <select id="{{id}}" name="{{id}}" class="form-control objectIndividual">
        <option value="0"></option>
        {{#each individuals}}
          <option value="{{_id}}">{{firstName}} {{lastName}}</option>
        {{/each}}
      </select>
    </div>
  </div>
</template>

I open my popover in

Template.bookingCalendar.rendered

And I initialize chosen here.

Template.objectIndividual_edit.rendered = function() {
  var input = $('.objectIndividual');
  input.chosen({disable_search_threshold: 10});
};

Template.objectIndividual_edit.helpers({
  individuals: function(){
    return Individual.find({deactivatedAt: {$exists: false}}, {sort: {firstName: 1, lastName: 1}});
  }
});

Without chosen the select is correctly filled. But when I use chosen, the select is broken.

So, anyone had an idea or a example to do that?

score 3 · Accepted Answer · edited May 23 '17 at 12:02

Similar to chosen with bootstrap 3 not working properly the chosen behaviour needs to be initialized after the content is ready. So similar to modal events, you can use the popover events:

$('#thing').popover(
  // content, title, etc...
).on('shown.bs.popover', function () {
  $('.chosen-select').chosen();
}).on('hidden.bs.popover', function () {
  // Destroy when the popover is hidden otherwise it does not work if the popover is re-opened. 
  $('.chosen-select').chosen('destroy');
});

How to use bootstrap popover with chosen?

1 Answers1