How to get DOM elements and change onClick functionality

Development

AI-generated summary

The discussion revolves around customizing Discourse to access DOM elements and change onClick functionality. Sushanth_Ps is trying to track events on buttons like “like,” “comment,” and “share” using Moengage analytics functions, but is currently using setTimeout and querySelector to achieve this. Falco points out that Discourse is a full EmberJS application and suggests following the Developer’s guide to Discourse Themes for customization. pfaffman advises Sushanth_Ps to describe his goal rather than his suggested solution, and later recommends using a theme component to achieve his objective, referencing the developer’s guides.

1

Hey,

Any idea on how I can get DOM elements on discourse without having to use a setTimeout and a querySelector.
Cause currently I do something like this:-

setTimeout(() => {
                    var createTopicButton = document.querySelector("#create-topic");
                    if(createTopicButton)
                        createTopicButton.onclick = function (e) {
                        if (window.Moengage && window.Moengage.track_event) {
                            window.Moengage.track_event("Topic_Create_Clicked", {});
                        }
                        setTimeout(() => {
                            var topicCreate = document.querySelector("#reply-control .save-or-cancel .btn-primary")
                            topicCreate.onclick = function (e) {
                                let heading = document.querySelector('#reply-control #reply-title').value;
                                let category = document.querySelector('.select-kit-header-wrapper>.select-kit-selected-name>.name>.badge-wrapper>.badge-category>.category-name')?.innerText;
                                let desc = document.querySelector('.d-editor-textarea-column>.d-editor-textarea-wrapper>textarea').value;
                                let imagePresent = desc.includes("upload://");
                                if (window.Moengage && window.Moengage.track_event && heading && category && desc) {
                                    window.Moengage.track_event("Topic_Created", {"Category":category,"Topic Name":heading,"Topic Description":desc,"Is_image_present":imagePresent});
                                }

                            }
                        },[300])
                        
                    };
                },[500])

If I don’t use the above timeouts, I sometimes get null elements as the DOM hasn’t loaded fully, even after putting this inside a window.onload function.
so my objective is to get DOM elements and change the onChange functionality.

Any help in this would be great.

Thanks :slight_smile:

2

Discourse is a full EmberJS application, so you can’t query/manipulate elements like if it was a server rendered plain HTML website.

In order to customize the web app you can follow the guidelines at

Developer’s guide to Discourse Themes

3

On addition to looking at the developer guide, you might take a step back and describe what you are trying to do rather than your suggested solution.

4

Hey Jay,

So I was trying to call moEngage analytic functions onClick of certain buttons on the page (eg:- like,comment,share)

I can only do this if I have access to the onClick functionality of these buttons. Is there any plugin within discourse that would help me achieve this?

Thanks

5

You should be able to do that in a theme component. I recommend that you start with the developer’s guides to see how things work.