Help Needed: Can't get basic JavaScript to fire in Canvas (external .js)

[NatFeibish]

Hi, all. 

I have been trying for literal weeks to get JavaScript to fire in Canvas using event listeners -- no taboo HTML tags -- and I can't seem to get it to work. The JS works fabulously on other servers, but something about the way Canvas calls it is throwing an error that the properties haven't loaded. (For those who are Canvas admins, you can see the page here. ) You can see the working code on one of my non-canvas servers here. Really basic stuff.

The Canvas response is: "The issue is the custom theme is loading before your wiki page and by the time the page is loaded the DOMContentLoaded event has already fired so you're always going to get the message
'Element with class "a.helloWorld" not found.' The method you're current trying to implement to trigger JS on your wiki page waiting for the DOMContentLoaded event isn't going to be reliable and I'd suggest investigating other options for finding your elements and setting up your listeners for your page."

The JS fires from the same subaccount as the course. There is no other JS that loads before it in upper subaccounts, and no other apps running anywhere.

I have tried with and without DOMContentLoaded, and I really have no idea how to get a simple event listener working. The JS is really very simple.

How, in Canvas, using the Theme Editor to hold your .js, can you use an event listener?

If you don't want to mess with my code, I'll even take a piece of code using an event listener that you know works in your instance. Something super simple, like with tabs or even an alert.

[JamesSekcienski · Accepted solution]

Instead of using DOMContentLoaded, you could try checking if the window is loaded.

window.addEventListener("load", () => {
  // Do stuff
});

 You could also set-up a MutationObserver.  This should provide the quickest update once the detected content is loaded, but it is also more complex to set-up.

The Best Practices for Using Global JavaScript InstructureCon 2013 presentation also has an example of an onElementRendered function you could use to continue to check for an element and then do something once it finds it or stops trying after a certain number of attempts>

[NatFeibish]

James you are wonderful, that is exactly what I implemented. However, now I'm running into a CORS policy error and I and my organization are not making any API calls, and we've deleted all of the apps from our account and all other JS from all the subaccounts above this to the top level.

So it's a separate issue, but do you have any insight?

[chriscas]

Support basically told me to ignore all errors that have to do with "sentry.insops.net"...  I think it's providing some internal analytic info to Instructure, but must get overloaded pretty often so comes up with weird errors.  They said the operation of that server is not essential to Canvas functioning correctly.  I really feel like they should address the core issue, as I hate having errors in my console while trying to debug my own stuff, but it's probably quite low on the priority list at this point.

-Chris

[NatFeibish]

So Canvas just told me this:

Both the windows.onload and the DOMContentLoaded are firing before you're page loads and those implementations aren't going to be a reliable way to setup your listeners.

My code works fine when it's called, but it's not getting called.

[JamesSekcienski]

@NatFeibish 

You can try adding in an alert at the start of what your code does on window load.  This can let you see if the function is ever called and what the state of the web page looks like at that point. 

I have sometimes noticed that some elements will be fully rendered and then after it finishes loading some additional scripts for some reason it replaces the existing elements.  So your script may be adding the elements in the initial load and then getting deleted when it updates the page again with new elements.

To handle this you may need to use a MutationObserver to watch and see if the elements are being replaced so you can add the content again.  Alternatively, you could try making a helper function similar to the onElementRendered function that will keep checking after it added for a certain number of attempts in case it gets added and then removed while the page is fully loading. 

While testing you could try using the setTimeout function just see if you can get the content to load after like 5 seconds.  This wouldn't be the best approach for a production release due to variability in how long a page takes to load, but can help with testing just to see if you can get it to load.