Found this content helpful? Log in or sign up to leave a like!

Catalog customizations sporadically not loading?

Jump to solution
mrash2
Community Participant
‎10-06-2025 09:33 AM

My institution's Canvas Catalog environment has some custom CSS and JS at the main/root catalog level. We're still using jQuery but not using anything deprecated, thus it is compatible with 3.7.1. This morning, we're noticing the script is not executing, and the issue is sporadic. Sometimes it loads normally upon a hard refresh in the browser, other times not at all. No error message are displayed in the browser or console.

We have not made any changes to the customizations, but multiple users are encountering this intermittent strange behavior.

Anyone else experiencing anything like this?

I'm already looking at switching to vanilla JavaScript for our customizations, but can confirm things work as they are - when the script actually executes, that is.

4 people also had this question
2 Solutions

Jump to solution
mrash2
Community Participant
Author
‎10-09-2025 07:51 AM

UPDATE: We received a response from a Level 2 support contact. At least in our situation, on the times when the custom js did not execute, it appeared that none of it ran. However, it turns out that portions of the script indeed did run every time. Thus, the problem had to do with how items on the page are rendered in the browser. If you're using jQuery, it's not enough to wrap your code in a document.ready() block. Instead, you'll need to make sure any page element you are manipulating or referencing with your script is fully present on the page. A helper function (for example, onElementRendered) should help with this. Since our code has been working problem-free for several years, I'm not sure if something changed in the Catalog codebase and/or the way browsers render the DOM, but the change was significant enough to start causing this new issue.

In our situation, we've also been looking to move away from jQuery in our custom script, so we took this opportunity to do that as well. Upon first simply converting our existing script to vanilla JavaScript, we experienced the same inconsistent behavior. However, once we updated the vanilla script to always check for an element to be rendered before attempting to manipulate it, things seem to be working properly.

We're still double-checking things before closing our case with Instructure, but I wanted to share an update here for those still investigating your own instance.

Bottom line: be sure your code checks to see if a page element is rendered before attempting to reference or manipulate said element.

View solution in original post

Jump to solution
mrash2
Community Participant
In response to zowada-a
Author
‎10-13-2025 08:31 AM

Here is a basic function that can be used to make sure an element is rendered:

// Helper function to wait for elements to appear
function onElementRendered(selector, callback, attempts = 0) {
  const els = document.querySelectorAll(selector);
  if (els.length) return callback(els);
  if (attempts >= 60) return;
  setTimeout(() => onElementRendered(selector, callback, attempts + 1), 250);
}

 

You can then call this function whenever you need to reference or manipulate an element. For example, we edit the text of the Login link in the header like so:

// Header menu updates
onElementRendered("#header-menu > #header-menu-container > div > a:first-child", ([el]) => {
  el.textContent = "Login or Create Guest Account";
});

 

View solution in original post