cancel
Showing results for 
Search instead for 
Did you mean: 
Community Member

Custom JavaScript

Jump to solution

Hello! I am needing some assistance on some custom JavaScript. It was working previously and now only part of it is working. What we are trying to do is disable the instructor from being able to change the start and end dates of a course. The script was disabling the date text box and that still works but the disabling of the calendar button next to the date box is no longer disabled. (This is within the course settings).

This is what is within my script:

 /*
    *   Course Settings
    */

    //Hide course settings start and end date textboxes. This is working still.
    $('#course_start_at').hide();
    $('#course_conclude_at').hide();
    
    //Disable Calendar button next to course settings start and end date textbox. This is NOT working still.
    $('#course_start_at').attr('disabled', true);
    $('#course_conclude_at').attr('disabled', true);

1 Solution

Accepted Solutions
Navigator

tiffany.wood@unco.edu,

Is there a reason you're trying to disable the calendar instead of hiding it?

Here's disabled:

320925_pastedImage_3.png

Here's hidden:

320924_pastedImage_2.png

Either way, the problem is that the calendar is not the same element, nor a child of the input that you hid. It's in a button right next to the input element. The proper selector involves the CSS adjacent sibling combinator, which is a +. You should add "+ button" to the CSS selector that you have.

$('#course_start_at + button').attr('disabled', true);
$('#course_conclude_at + button').attr('disabled', true);

I would still use .hide(). Technically, I wouldn't use jQuery, but I would do the pure JavaScript version of it, but since you're using jQuery, I would use .hide().

View solution in original post

3 Replies
Navigator

tiffany.wood@unco.edu,

Is there a reason you're trying to disable the calendar instead of hiding it?

Here's disabled:

320925_pastedImage_3.png

Here's hidden:

320924_pastedImage_2.png

Either way, the problem is that the calendar is not the same element, nor a child of the input that you hid. It's in a button right next to the input element. The proper selector involves the CSS adjacent sibling combinator, which is a +. You should add "+ button" to the CSS selector that you have.

$('#course_start_at + button').attr('disabled', true);
$('#course_conclude_at + button').attr('disabled', true);

I would still use .hide(). Technically, I wouldn't use jQuery, but I would do the pure JavaScript version of it, but since you're using jQuery, I would use .hide().

View solution in original post

Navigator

As a follow-up after direct message, this appears to be an issue related to How to adapt to the undocumented JavaScript loading sequence changes? 

The CSS selectors work when pasted into the console, but you're getting bitten by the changes to Canvas where the files are loaded and executed in a different order.


If that's the case, what is happening is that you're trying to hide the item before it exists and so it doesn't work. The input field is present on the page so it gets hidden, but the the calendar popup is added afterwards by Canvas and it looks like you're trying to hide it before it is there.

Here are some possible remedies.

  • Add the items to the custom CSS and not mess with JavaScript at all.
  • Add a MutationObserver that watches for the calendar popup to become present and then hide it.
  • I had thought you might be able to completely delete the element rather than just hiding it, but it just now dawned on me that it would not put the text in there if we did this, so scratch that idea.

Hi,

I'm having a issue with a custom JS in Catalog it's not applying it I'm going to try what you suggest. Not sure how much Canvas has changed this since 2019. If i run the code in the browser console it work but I doesn't from the custom JS field. I think since the items seem to be generated dynamically with react this might be a issue with the items elements not being available when the script runs.

Tags (1)