Javascript Code working in Beta doesn't work in Production

[MikeBrinkman]

I posted a fix for the admin courses page (https://community.canvaslms.com/t5/Canvas-Admin-Discussion/Blueprint-Checkbox-on-Courses-Page-Fix/m-...), which works in my beta environment, but does not in the production environment. Has anyone else experienced this?

[JamesSekcienski]

Have you used your browser Dev Tools to check that the proper JavaScript file is loaded? 

In the past I saw that a script update I made wasn't working because it was using a cached version of my old file when on production.  Once I changed the file name and added it again, the updated code loaded and was working.

[MikeBrinkman]

Yes. I actually didn't have a Javascript file uploaded, this was the first run after I was satisfied it was working correctly in Beta.

[JamesSekcienski]

I see the code for defining your function.  Could you share the code you used to call your function?

[MikeBrinkman]

$(document).ready(function(){

 // stops the check mark label for blueprint courses from extending the entire span of page

  if (/^\/accounts\/[0-9]+\??$/.test(window.location.pathname)) {

    console.log('on courses page!');

    stopAnnoyingBlueprintCourseBehavior();

  }

});

Just a simple jQuery, then a regex to see if you're on the page. The console.log message shows in the console, so I know it's passing the regex test.

Now here's the odd thing. Console on beta:

on courses page! canvas_script.js:14:11
target = [object HTMLCollection] canvas_script.js:73:10
HTMLCollection { 0: span.yyQPt_bGBk.yyQPt_ycrn, 1: span.yyQPt_bGBk.yyQPt_ycrn, 2: span.yyQPt_bGBk.yyQPt_ycrn, length: 3 } canvas_script.js:74:10
target length = 2 canvas_script.js:75:10
created span

Console on production:

on courses page! canvas_script.js:14:11
target = [object HTMLCollection] canvas_script.js:73:10
HTMLCollection { 0: span.yyQPt_bGBk.yyQPt_ycrn, 1: span.yyQPt_bGBk.yyQPt_ycrn, length: 2 } canvas_script.js:74:10
target length = 0 canvas_script.js:75:10
created span

[JamesSekcienski]

Nice update to the function name 🤣

I've tried testing through the console, but I don't see the same error.  I'm not sure what the cause would be for that.

However, you could try replacing the code in your function with the following 2 lines of code:

let target = document.querySelector("form > span > span > span > span > span:nth-child(2) > span:nth-child(2)");
target.style.flex = "initial";

*Note:  This doesn't currently resolve the issue when the screen is on a smaller display and the checkboxes become stacked.

For an explanation of the flex property that was set you can refer here:  https://developer.mozilla.org/en-US/docs/Web/CSS/flex

[MikeBrinkman]

Nice update to the function name 🤣

Yeah, that's what it's always been, I just changed it when I posted on the board. I didn't want to ruffle any feathers. 😉

[MikeBrinkman]

I finally got it working as a result of some other manipulations I've been trying with Canvas.

I've found (particularly with Firefox), that items don't always seem to be added to collections as soon as I'd like, so I have been adding window.addEventListener("load", function...) in a lot of my code.

  if (/^\/accounts\/[0-9]+\??$/.test(window.location.pathname)) {

    window.addEventListener("load", function(e){

      stopAnnoyingBlueprintCourseBehavior();

    });

  }

[MikeBrinkman]

Thanks, James! I will check it out.