0

I'm trying to use Tampermonkey to add a popup on pages in the Canvas LMS. It's a forum, and after each post there is a "Reply" option, which is what I want to add the popup to. But when I click the "Reply" link, no popup appears. It opens the Reply box, as normal, but my popup is nowhere to be seen.

The code looks roughly like this:

<div class="entry-controls hide-if-collapsed hide-if-replying">
  <div class="notification" data-bind="notification"></div>
      <a role="button" class="discussion-reply-action entry-control" data-event="addReply" href="#">
      <i class="icon-replied"></i>
      <span aria-hidden="true">Reply</span>
      <span class="screenreader-only">Reply to Comment</span>
    </a>
</div>

The JS code I'm trying to add is:

document.querySelectorAll('.discussion-reply-action').forEach(item => {
  item.addEventListener('click', event => {
    alert("Popup text here");
  })
})

In addition to .discussion-reply-action, I've tried using .entry-controls, .notification, .entry-control, even stuff like span[aria-hidden="true"]. Nothing seems to work.

I know the Tampermonkey script itself is applying correctly, because it has other functionality that is showing up as usual.

Any idea why this bit isn't working for me? I'm a complete JS noob, for what that's worth.

spoko
  • 121
  • 1
  • 6
  • 2
    What doesn't work? You don't see the alert? Try adding `console.log(item);` before `item.addEventListener(...)` and see what gets logged. It might be that the HTML is loaded after the page loads, so you may need to use event delegation (attach the event listener to some common ancestor and check if `event.target` is what you want before running code). – Heretic Monkey Sep 11 '20 at 16:36
  • 1
    Things to try: 1. `console.log([...document.querySelectorAll('.discussion-reply-action')])`. It should print the list of items 2. Change a style/attribute for each `item`. Remember that some pages generate additional context with javascript, and in that case you need to delay your injection after the items are generated. – Tomáš Zato Sep 11 '20 at 18:25
  • @HereticMonkey: Edited my post to say: Nothing happens. Just the usual behavior--it opens the Reply box. No popup, though. I added the ```console.log(item);``` line, but it doesn't seem to make much difference. Clicking "Reply" generates 7 errors when I don't have my Tampermonkey code running, and the same 7 errors (I diff'ed them to be sure) appear when I do. So I assume your theory about it loading after the page loads might be the issue, but I don't understand what you were saying after that about attaching an event listener to a common ancestor, etc. – spoko Sep 11 '20 at 18:28
  • 1
    See the answers to https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements. [This answer](https://stackoverflow.com/a/27373951/215552) doesn't use jQuery, if you're not using it. – Heretic Monkey Sep 11 '20 at 18:33
  • @tomáš-zato-reinstate-monica & Heretic Monkey: The solution was to delay the injection; you were right. 1-second delay did the trick nicely. And now I know a lot more about using the Console. Thanks for your help! – spoko Sep 11 '20 at 18:45

1 Answers1

1

This got answered in the replies, but just wanted to formally note that it came down to delaying my code injection. I was trying to attach to elements that loaded after the doc. Once I got behind them, it worked fine.

spoko
  • 121
  • 1
  • 6