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? :grin: Marina

What function does your button need to have? You should be able to use a plugin outlet: app/assets/javascripts/discourse/templates/components/topic-title.hbs acd1693da {{yield}} {{plugin-outlet name="topic-title" args=(hash model=model)}} Check out this section 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.

[תמונה] 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?

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? Development 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: api.addPostTransformCallback((t) => { // post is topic post && element doesn't already exist if (t.post_number === 1 && $("#test-id").length == 0) { $(function() { var testText = ' 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!

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.

[תמונה] 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!

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

Executing js after DOM loaded

תמיכה

Johani (Joe) 30 בנובמבר,‏ 2018,‏ 4:14am 6

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!

נושא		תגובות	צפיות
How do we fire scripts after topic HTML is rendered in DOM? Development	4	2765	27 בנובמבר,‏ 2021
Trigger a jquery function on post load Development	11	3678	11 באפריל,‏ 2018
How do you force a script to refire on every page load in Discourse? Development	38	21639	12 במרץ,‏ 2020
[newbie] Trouble adding script to dynamically change CSS values based on conditions Product Support	9	1854	11 באוקטובר,‏ 2016
Plugin: performing DOM manipulation on pages Development	2	825	10 ביולי,‏ 2017

Executing js after DOM loaded

נושאים קשורים