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?
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.
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!
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.
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.
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!
