Hello,
I’m trying to display data from session reactively using a dropdown select element with ‘chosen’ library.
As usual when having jQuery libraries for displaying fancy elements with Meteor the issue surfaces with updating/rerendering them. To be specific, firing the update on the jQuery library side, at the correct moment when the DOM that the library modifies has finished rendering, has always been a bit problematic for me. Usually splitting the element into it’s own template and having a Tracker in onRendered() to update the jQuery element solves the issue. However, with chosen I am having hard time and I have a feeling there should be a better way to deal with such jQuery libs that I am not aware of.
What I’ve been trying so far:
<template name="parent">
{{#each list}}
{{>dropdownTemplate selectedValue=selectedValue otherValues=otherValues index=@index}}
{{/each}}
</template>
<template name="dropdownTemplate">
<select class="chosen-select">
<option value="{{selectedValue}}">{{selectedValue}}</option>
{{#each otherValues}}
<option value="{{this}}"> {{this}} </option>
{{/each}}
</select>
</template>
And js:
Template.parent.onRendered(function() {
Tracker.autorun(() => {
queryList();
$('.chosen-select').chosen(); // initialize chosen for the first time
});
});
Template.dropdownTemplate.onRendered(function() {
Tracker.autorun(() => {
let list = Session.get("list");
if (list && this.data.index == list.length - 1) { // run only once when at the last element
$(".chosen-select").trigger("chosen:updated"); // update chosen to take the updated values into account
}
});
});
Template.parent.helpers({
list: function() {
return Session.get("list");
}
});
Template.parent.events({
"click #button": function(event, template) {
// remove one element from Session
Session.set("list", Session.get("list").splice(0, 1));
}
});
function queryList() {
let list = ... // get list etc
Session.set("list", list);
}
What is the problem:
- When removing let’s say the first element from the list stored in Session, the dropdown menu’s keep their old values and will therefore have the values shifted by one.
- The value that was selected from the dropdown menu remains the same and doesn’t get updated even if chosen is updated manually from console. Also the same behaviour exists when not using chosen at all.
Something like this:
correct: b dropdown: a
correct: c dropdown: b
correct: d dropdown: c
etc…
The first problem can be solved by having setTimeout update ‘chosen’ after a certain time, but it’s really ugly hack.
Would be thankful for any ideas…