4

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?

1 Answer 1

3

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'); }); 
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.