Simple Javascript function works fine, but not in Canvas on Firefox

[stevebudd]

EDIT - the fix appears to be to delay Javascript for 1 second on Safari and Firefox. This now seems to work great with this delay and was definitely the cause.

Hi guys, we're using a custom javascript to make page tabs, and it works perfectly fine in Chrome.

Unfortunately it doesn't seem to function in Firefox or Safari while in Canvas - so I'm not sure why that would be different?

I know Canvas can be a little hostile to some html but this appears to work fine in a jsfiddle (obviously simplified) in Firefox and Safari - it's only once in Canvas that it's not working, so it's clearly Canvas causing the error.

Note that Jquery is being called - should I be manually calling in JQuery in the custom javascript file?

Any help is appreciated!

[tdw]

JQuery was deprecated in Canvas a while ago, though it has not been removed in all areas of the system yet. In general if you're going to use the functions of an external library you should be sure to include it yourself in the theme editor.  I recommend calling it in no conflict mode so that the pages that still have JQuery included do not create new issues for you.

[James]

 @tdw ,

What was announced as deprecated was jQuery UI, which depends on, but is not the same as jQuery. In several places, there have been comments that jQuery will be available to people by the time their custom code is executed. If Instructure is deprecating jQuery, I completely missed that discussion but I probably would have seen the backlash from it somewhere in the Community.  Canvas would like to get rid of jQuery eventually, since they have moved to ReactJS, but there is a lot of code there that still uses it and it will be around for a long time.

That said, there is a potential problem with the loading order. jQuery is supposed to be available, but there is no guarantee that the content of the page will be available when the jQuery is executed. This is a bigger issue now that Canvas has taken efforts to optimize the loading of files to speed up the process.

In particular, the content of pages is delivered as part of the JavaScript and not necessarily available in the DOM when the function becomes available.

In more direct terms, there may not be anything for jQuery to add an event listener to when it tries. jQuery masks the error messages when elements aren't available, so you may not notice it the way you would if you were using straight JavaScript.

You should make sure that the items are on the page before you try to listen to them. There are several ways to do that. Mutation Observers are probably the best way to do that; others have tried waiting an preset amount of time for them to show up. 

One of the conversations about it is What is the best way to run javascript after all content is loaded on the page? Here's another from when I first discovered the issue: https://community.canvaslms.com/message/32791 There are some other discussions about it as well, that might give an idea of where to go.

[tdw]

Hi James,

Rest assured I have no insight into the future of jQuery .  It was simply an oversight on my part to say "jQuery" when I meant "jQueryUI" - which is where the tab component lives/lived.

[James]

Whew! You had me worried there.

Steve wasn't using the built-in jQueryUI; those were (as far as I can tell) standard jQuery functions. I wouldn't use them because I don't know jQuery, but a lot of people do. I've been trying to switch all of my code from jQuery to standard JavaScript for the day that Canvas does say bye-bye to jQuery.

A lot of people misunderstand just when a document becomes ready, though. This has been more of an issue since last May or so when Canvas started using WebPack more effectively to reduce the load time. Then they started prefetching the information so that user scripts might get executed before some of the Canvas scripts were ever loaded. The issue with content pages goes back even further. At some point (late 2015 or early 2016 I imagine), the content of the page began being delivered with the ENV variable and not part of the rendered HTML itself. Since then, JavaScript transfers it from the ENV variable to the document object model and gets displayed. That's delayed even more with the optimizations in the script-loading order and has no guarantee that the content is there when Steve's JavaScript tries to operate on it.

It also changed the way I have to do most of my userscript contributions -- I put a mutation observer in there to wait for the content to appear before I can act on it. When I first started writing them, much of the content was loaded before the document was ever ready.

Initially, I thought there might be some problems with the code since it worked only with Chrome but not the other two, but I didn't see anything in the code that stood out. Steve has edited the post to say that it sometimes works in Firefox now, which makes it sound more like a loading-order issue.

[ColinMurtaugh]

I agree with James -- this sounds like a timing issue to me. We've encountered similarly inconsistent behavior across the different browsers when attempting to modify pages from a document.ready() handler, and we've had success using mutation observers instead.

A couple of examples:

canvas-branding-global/analytics_text.js at master · harvard-canvas-branding/canvas-branding-global ... 

canvas-branding-global/filter_role_dropdown.js at master · harvard-canvas-branding/canvas-branding-g... 

--Colin

[stevebudd]

James (and  @tdw ) thank you for your answers. After quite a bit of testing this was being cause by the page load time being too quick to process the javascript in Firefox/Safari.

I put in a delay script in the javascript file and it now works great. Thanks again.

[James]

I'm glad it works for you, but delays in the JavaScript file are really not a reliable way or good way to fix this. They are subject to network traffic and computer speed and what works for you may not work for someone else. For people with fast computer, it puts a delay before acting which can cause noticeable changes to the page.

If / when this breaks again in the future, please consider using mutation observers to check to see when the content becomes available and then act on it.