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

Development

AI-generated summary

The discussion revolves around running a function after the DOM has fully loaded on a topic show page in a Single Page Application. JQ331 attempted to use didRender, didInsertElement, and decorateCookedElement but they ran before all divs were loaded.

Merefield suggested using a Component event, specifically choosing a component deeper in the tree, as the concept of “DOM fully loaded” is not applicable in a dynamic SPA environment. Merefield also questioned the necessity of waiting for all divs to load, prompting JQ331 to explain that they want to change or remove the text of a specific div.

JQ331 appreciated the suggestion to try components that might load later, acknowledging that the chosen component might be loading before some divs, causing the issue.

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

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.