Applying javascript to generated content

Question

Being fairly new to Meteor, I'm stuck with an issue I encountered while generating input "on-the-fly" with a Helper. Indeed, what I'm trying to do is to generate a left labeled input with a dropdown but the problem is that I have to call the method $('.ui.dropdown').dropdown();

After creating each input with its corresponding dropdown, and I don't know how to do it properly with semantic-UI and Meteor environment. Here is my helper creating the inputs:

'filterColumns': function() {
        return Session.get('s_filterColumns');
    }

Where 's_filterColumns' is an array looking like ["Firstname", "Lastname", "LivingPlace"]

And here is the HTML template using the helper to generate inputs:

<div id="fields">
        <div class="ui grid">
            {{#each filterColumns}}
                <div class="eight wide column">
                    <label>{{this}}</label>
                    <div class="ui left labeled input">
                        <div class="ui dropdown label">
                            <div class="text">Start by</div>
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <div class="item">Start by</div>
                                <div class="item">Contains</div>
                                <div class="item">End by</div>
                            </div>
                        </div>
                        <input type="text">
                    </div>
                </div>
            {{/each}}
        </div>
    </div>

But then, when populating the session variable with new content, the inputs are being created accordingly but the javascript dropdown method is not called again and so my left label is not a dropdown.

If you have any recommendations regarding anything in my conception I'd be glad to learn from someone more experienced than me.

Not quite clear what the question is. Are you asking when you can call `$('.ui.dropdown').dropdown();`? If so, try running it inside [Template.myTemplate.onRendered()](http://docs.meteor.com/#/full/template_onRendered) where `myTemplate` is the name of your template. Given that you have multiple dropdowns though you might want to put the html that's inside your `{{#each }}` into its own template and use that for `onRendered()` — Michel Floyd, Aug 23 '15 at 16:54
have you checked? http://stackoverflow.com/questions/11022131/run-js-after-rendering-a-meteor-template — Da Rod, Aug 23 '15 at 16:55
Michel, thank you for the idea, I placed my HTML into its own template and used the onRendered() to call the dropdown() method for the fresh new input. Working great and exactly what I wanted. — Timon. Z, Aug 23 '15 at 19:16

score 1 · Accepted Answer · answered Aug 25 '15 at 11:20

If you are unsure when to call $('.ui.dropdown').dropdown(), try running it inside Template.myTemplate.onRendered() where myTemplate is the name of your template. Given that you have multiple dropdowns though you might want to put the html that's inside your {{#each }} into its own template and use that for onRendered().

Note: Community Wiki answer created because question was answered by Michel Floyd in the comments.

Applying javascript to generated content

1 Answers1