Using Slect2 / Selective jQuery plugin

help
1

Hello,
I’ve select input with Selectize jQuery plugin and I’m trying to find solution for weird problem. This code below work, but not always. When I’m running meteor Selectize is working but options are not loaded. When I go to different route which use the same template options are loaded. When I refresh the disappear again.

Could anyone tell me what I’m doing wrong?

It’s the same with select2.

in template:

 <select>
 {{#each specs}}
    <option value="{{slug}}">{{name}}</option>
  {{/each}}
 </select>

in client js:

Template.specSelect.rendered = function() {
    $('select').selectize({
        sortField: 'text',
        maxOptions: 10
    });
};

Template.specSelect.helpers({
    specs: function () {
        return Specs.find({});
    },
});
2

One of the big mysteries: what does Template.onRendered actually mean. It certainly does not mean everything has been added to the DOM, because there is reactivity, like the cursor you use in your helper.

I found that it is a good idea to check in a helper if the template is rendered

Template.example.helpers({
 something: function() {
  if(Template.instance().view.isRendered)
  {
   //do stuff
  }
 }
})

Second, try to use a sub-template (I am assuming here your original specSelect has more stuff in it.

<template name="specSelect">
.
.
.
{{>specSelectOptions options=specs}}
.
.
.
</template>

<template name="specSelectOptions">
 <select>
 {{#each options}}
    <option value="{{slug}}">{{name}}</option>
  {{/each}}
 </select>
</template>

and tie the onRendered to that sub-template

Template.specSelectOptions.onRendered( function() {
    $('select').selectize({
        sortField: 'text',
        maxOptions: 10
    });
});

let me know if that makes a difference

3

@jamgold
Thanks for reply. Sadly I tried both your suggestions and they didn’t work. Also I fiddle with sub templates, try select2 and nothing work.

I’m now thinking of making my own selectize/select2, I’m curious why I cannot find any feedback on this issue on the internet.

4

Why don’t you post a recreation for your issue on MeteorPad.com?

1 Like
5

Thanks, I wasn’t familiar with that tool.
http://meteorpad.com/pad/sewqTKE3DEXnoJ8Pv/Selectize%20test
it’s working here, so I probably doing something wrong elsewhere.

Thanks for help!

6

I have the same problem with dateTimePicker of autoform.

// update form of onRendered

       let $maturityDate = this.$('[name="maturityDate"]');

        $maturityDate.data('DateTimePicker').options({
            minDate: minMaturityDate,
            maxDate: maxMaturityDate
        });
        $maturityDate.data('DateTimePicker').date(maturityDate);

Please help me.