¿Cómo obtener elementos DOM y cambiar la funcionalidad onClick?

Desarrollador
1

Hola,

¿Tienes alguna idea de cómo puedo obtener elementos DOM en Discourse sin tener que usar un setTimeout y un querySelector?
Porque actualmente hago algo como esto: -

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])

Si no uso los tiempos de espera anteriores, a veces obtengo elementos nulos porque el DOM no se ha cargado por completo, incluso después de poner esto dentro de una función window.onload.
Así que mi objetivo es obtener elementos DOM y cambiar la funcionalidad onChange.

Cualquier ayuda en esto sería genial.

Gracias :slight_smile:

2

Discourse es una aplicación EmberJS completa, por lo que no puedes consultar/manipular elementos como si fuera un sitio web HTML plano renderizado en el servidor.

Para personalizar la aplicación web, puedes seguir las directrices en

Guía para desarrolladores de temas de Discourse

1 me gusta
3

Además de consultar la guía del desarrollador, podrías dar un paso atrás y describir lo que intentas hacer en lugar de tu solución sugerida.

1 me gusta
4

Hola Jay,

Estaba intentando llamar a las funciones analíticas de moEngage al hacer clic en ciertos botones de la página (por ejemplo, me gusta, comentar, compartir).

Solo puedo hacer esto si tengo acceso a la funcionalidad onClick de estos botones. ¿Hay algún plugin dentro de Discourse que me ayude a lograr esto?

Gracias.

5

Deberías poder hacer eso en un componente temático. Te recomiendo que empieces con las guías del desarrollador para ver cómo funcionan las cosas.