CODEWITHSUNDEEP
javascriptjqueryember.js
copenndthagen
copenndthagen

Reputation: 50732

Ember invoke jQuery code only on initial render

In my Ember component class, I want to run some jQuery code to hide some elements. However, I want this code to run only on initial render and not on other events (say grid refresh)

hidePositionElements: function() {
    var self = this;
    var currPosLabelElements = $( ".my-grid-footer-value");
    currPosLabelElements.hide();
},

I tried adding to "didRender", but that runs multiple times.

Also tried calling above function from "didInsertElement" hook, but jQuery is unable to find the elements at that stage.

Upvotes: 0

Views: 181

Answers (1)

seanCodes
seanCodes

Reputation: 813

If the elements can’t be found on didInsertElement(), then you can try running the jQuery code after a short delay, for example

import Component from '@glimmer/component'
import { later } from '@ember/runloop';

export default class MyComponent extends Component {
    didInsertElement() {
        later(function () {
            $( ".my-grid-footer-value").hide();
        });
    }
}

The later() here is like setTimeout() but it runs in the Ember runloop. And since no delay is specified this should run as soon as possible (hopefully your grid footer elements will exist by the time it executes).

As a general rule, whenever you’re doing any DOM manipulation you should wrap it in a runloop method (usually run()) so that Ember can schedule the code to run at the right time.

However, as an Ember best practice you should try and avoid modifying the DOM yourself and instead let Ember handle it (using something like {{#if this.showPositionElements}} ... {{/if}} and then toggling showPositionElements).

Upvotes: 2

Related Questions