Run function after dom has loaded (didRender, didInsertElement, and decorateCooked are not working)

Dev
1

Hi. I am trying to evaluate a div on the topic show page. In order to do so, I need to run a function after the dom on the topic show page is done loading.

In normal javascript, i’d run “window.onload = function()…” for this. However, this onload function doesn’t seem to work when the topic is navigated to from within the site.

How can I run the function after the dom is fully loaded?

I have tried the following, and none of them seem to work:

withPluginApi("0.11.1", api => {
    api.modifyClass('component:topic-title', {
          didRender: function(){  //tried "didInsertElement" as well
                  //run function--still runs before all the divs have loaded
           } 
      }), 
     api.decorateCookedElement(function() {
           //run function--still runs before all the divs have loaded.
    })
})
2

I believe you have to do it by Component event. Why do you care anyway? Perhaps pick a Component deep into the tree, as it were. One of the ‘leaves’.

“Dom fully loaded” doesn’t really make as much sense in a Single Page Application, as everything is dynamic?

In short, it sounds like you are on the right track already. What issue is this causing? Why do you have to have all the divs loaded?

What do you mean by “evaluate a div” exactly? Perhaps there is another way to go about what you are doing?

3 Likes
3

I want to change the text of the div or, in some cases, remove it from the view.

Good point about the component I am choosing–that could be the reason for the trouble, that the component I am choosing is loading before some of the divs, and that I could try components that might load later. Thanks.

2 Likes