When the onRendered callback is called?

help
1

Hello,

I’m trying to have a reactive bootstrap selectpicker but I have a weird behaviour:
An event has to change the options of the select but it works only after the first event which is not working because the app doesn’t go into the onRendered part…

This is the onRendered part:

var renderTimeout = false;
Template.printerselect.onRendered( function(){
    if (renderTimeout !== false) {
        console.log("HERE");
        Meteor.clearTimeout(renderTimeout);
    }
    renderTimeout = Meteor.setTimeout(function() {
        console.log("REFRESH");
        $('#printerName').selectpicker("refresh");
        renderTimeout = false;
    }, 10);
});
Template.printerSetupForm.onRendered( function(){
    console.log("SELECTPICKER");
    $('.selectpicker').selectpicker();
});

here, the templates :

       <div class="col-lg-3 col-md-4 col-xs-12 form-group">
                                                    <label>COMPANY</label>
                                                    <select id="printerCompany" class="form-control selectpicker" name="printer[company]">
                                                        <option selected="true" disabled="disabled"
                                                                value={{company}}>Please Select
                                                            A Printer Company
                                                        </option>
                                                        {{#each Companies}}
                                                            <option value="{{company}}" {{printerCompanySelected company}}> {{company}} </option>
                                                        {{/each}}
                                                    </select>
                                                </div>
                                                <div class="col-lg-3 col-md-4 col-xs-12 form-group">
                                                    <label>PRINTER NAME</label>
                                                    <select id="printerName" class="form-control selectpicker" name="printer[name]">
                                                        <option selected="true" disabled="disabled"
                                                                value={{name}}>Please Select
                                                            A Printer
                                                        </option>
                                                        {{#each Names}}
                                                            <!--<option value="{{name}}" {{printerNameSelected name}}> {{name}} </option>-->
                                                            {{>printerselect}}
                                                        {{/each}}
                                                    </select>
                                                </div>


<template name="printerselect">
    <option value="{{name}}"> {{name}} </option>
</template>

The refresh is called when the page is rendered.

Then I change the company which changes some Session variables and reactively to change the name select options but the refresh is not called so that doesn’t come to the onrendered part.

But when I change again the company it’s working, the onRendered part is called.

Weird thing is that even if this is not displaying the right names, when i’m choosing a name which doesn’t match with the company, the select chooses the right one.

Sorry for my english in advance, I did my best.

Thanks you in advance :smile: