# Executing js after DOM loaded

**URL:** https://meta.discourse.org/t/executing-js-after-dom-loaded/102958
**Category:** Support
**Created:** [28 november 2018 om 09:03 UTC](https://meta.discourse.org/t/executing-js-after-dom-loaded/102958 "2018-11-28T09:03:55Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![marina](https://avatars.discourse-cdn.com/v4/letter/m/f05b48/32.png) [@marina](https://meta.discourse.org/u/marina)
#### Post date: [28 november 2018 om 09:03 UTC](https://meta.discourse.org/t/executing-js-after-dom-loaded/102958/1 "2018-11-28T09:03:55Z")

</div>

Hi,

I would like to run a script that appends HTML code to a specific element within the HTML’s body on page change. However, this is not working. It only works after refreshing the page.

After doing some research, I believe it is due to the script being executed after the page has changed (I currently use “api.onPageChange(() =\>{}” to handle this) but BEFORE the DOM has fully loaded. As the DOM has not fully loaded, my script is unable to find the specific element to append the HTML code to.

Could any experts here provide me with some tips or work-around? 😁

Marina

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [28 november 2018 om 20:21 UTC](https://meta.discourse.org/t/executing-js-after-dom-loaded/102958/2 "2018-11-28T20:21:57Z")

</div>

> [@marina](#):
>
> I would like to run a script that appends HTML code to a specific element within the HTML’s body on page change.

What is the element that you are trying to append the HTML to?

---

<div class="post-metadata">

### Author: ![marina](https://avatars.discourse-cdn.com/v4/letter/m/f05b48/32.png) [@marina](https://meta.discourse.org/u/marina)
#### Post date: [29 november 2018 om 03:05 UTC](https://meta.discourse.org/t/executing-js-after-dom-loaded/102958/3 "2018-11-29T03:05:03Z")

</div>

Hi Simon,

I was actually trying to add a button to the topic pages, to be specific, .title-wrapper under #topic-title.

Thankfully, I have since found a work-around to this in another thread on meta.discourse. This approach allows the editing of specific posts in topics via the api method ‘addPostTransformCallback’. I’ve shared it below to help any others who face a similar issue.

> [@How do you force a script to refire on every page load in Discourse?](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/16):
>
> I have been working on something that needs to be fired when entering a topic. I don’t know if this is overly complicated or the proper way to do it, but this is what I’ve found works well so far: \<script type="text/discourse-plugin" version="0.8.13"\> api.addPostTransformCallback((t) =\> { // post is topic post && element doesn't already exist if (t.post\_number === 1 && $("#test-id").length == 0) { $(function() { var testText = '\<h1 id="test-id"\>T…

A drawback of this though, is that it only works if u navigate to the topic page from another page within the forum. If I were to refresh the page, the edit (in my case, the button) does not show up. I am currently trying to solve that, and will share if I find a solution!

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [29 november 2018 om 12:21 UTC](https://meta.discourse.org/t/executing-js-after-dom-loaded/102958/4 "2018-11-29T12:21:41Z")

</div>

What function does your button need to have? You should be able to use a plugin outlet:

> <https://github.com/discourse/discourse/blob/acd1693dac1bff6ff50250d942134bc48a27ff14/app/assets/javascripts/discourse/templates/components/topic-title.hbs#L5>

Check out [this section](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-b-1) in @Johani’s awesome guide for more on how to make use of them. Depending on the complexity of your button, you may need to use a widget.

---

<div class="post-metadata">

### Author: ![marina](https://avatars.discourse-cdn.com/v4/letter/m/f05b48/32.png) [@marina](https://meta.discourse.org/u/marina)
#### Post date: [30 november 2018 om 02:59 UTC](https://meta.discourse.org/t/executing-js-after-dom-loaded/102958/5 "2018-11-30T02:59:23Z")

</div>

Hi tshenry!

Thanks for sharing Johani’s awesome guide. I have taken a look at it, and it seems to certainly be able to help in my situation. My button would simply crawl for specific information in topic posts, and send that information to another site.

I have one question though, if I am using a Discourse hosted instance, would I still be able to use plugin outlets? Correct me if I am wrong, but it seems to me that this is not possible, as I would not be able to edit template files.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [30 november 2018 om 04:14 UTC](https://meta.discourse.org/t/executing-js-after-dom-loaded/102958/6 "2018-11-30T04:14:20Z")

</div>

> [@marina](#):
>
> I have one question though, if I am using a Discourse hosted instance, would I still be able to use plugin outlets?

You can pretty much do whatever you like in a theme on a hosted install. Modifying templates or adding elements via plugin-outlets can be done in a theme. So the answer is yes!

---

<div class="post-metadata">

### Author: ![marina](https://avatars.discourse-cdn.com/v4/letter/m/f05b48/32.png) [@marina](https://meta.discourse.org/u/marina)
#### Post date: [30 november 2018 om 08:12 UTC](https://meta.discourse.org/t/executing-js-after-dom-loaded/102958/7 "2018-11-30T08:12:12Z")

</div>

Thats great! Thanks @Johani & @tshenry. Ill be marking tshenry’s reply as the answer to this problem 😁

Cheers

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [30 december 2018 om 08:26 UTC](https://meta.discourse.org/t/executing-js-after-dom-loaded/102958/8 "2018-12-30T08:26:07Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.