How to get DOM elements and change onClick functionality

Dev
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

1 Like
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.

1 Like
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.