Properties of undefined (reading 'checked') Javscript- DojoToolkit

07-08-2022 12:48 AM
New Contributor III

 have been facing this issue for almost a week now. I can't seem to have my checked radio box to toggle between one another. By default, the radio button is set to checked for the "Allow Partial Download". I want to save the checked value so, I stored the key value pairs in the local storage for the Full Download when it is being toggled.

Upon rendering/refresh, the Full Download should be checked. However this does not work.. and instead I kept getting this error after retrieving the local storage key value pair. (Retrieving the key value pair works)

I have tried using [dojo/DomReady!] but it doesn't work. Placed everything into the render function. And also a few jQuery methods which also didn't work...

So basically I have been getting this error, but my DOM has already been rendered as I could access the element.

The _renderDownloads is binded to an onClick function and renders whenever the page loads.

TypeError: Cannot read properties of undefined (reading 'checked'


HTML Code:

      <form class="g-item-title" style="color: #005e95">
        <input type="radio" id="checkboxPartialDownload" data-dojo-attach-event="onClick: _test" style="cursor: pointer;" name="downloadValue" value="partialDownload" checked>
        Allow Partial Download


        <input type="radio" id="checkboxFullDownload" data-dojo-attach-event="onClick: _renderDownloads" style="cursor: pointer;" name="downloadValue" value="fullDownload" >
        Allow Partial + Full Download


Function that is being rendered

  _renderDownloads: function(){

        //$('#partialDownload').attr('checked', false);
        //$('#fullDownload')[1].checked; Both these options doesn't work for either

        let title = this.item.title;
        let fileid = this.item.fileid

       if(localStorage.getItem(`${title} ID:${fileid}`) === "AllowFullDownload"){
        $('#partialDownload').prop('checked', false); //Doesn't work
        $('#fullDownload').prop('checked', true); // Doesn't work

        var radioButtonValue = $("input[type='radio'][name='downloadValue']:checked").val(); 
        //console.log('First render'+ radioButtonValue)

        if(radioButtonValue ==="fullDownload"){
          localStorage.setItem(`${title} ID:${fileid}`,"AllowFullDownload")

This is a snippet of the code where it is being rendered from. Also I do not know how to wrap this in a with ready, are there any other sample codes for this? As this code is slightly different from the documentation.

  function (declare, lang, array, Deferred, all, string, topic, dojoRequest, xhr, on, appTopics, domStyle, domClass, domConstruct,
    _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Tooltip, TooltipDialog, focusUtil, dom, popup,
    template, i18n, parser, ready) {
    var oThisClass = declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

      render: function (hit) {
        let radios = document.getElementsByName('downloadValue')
        let dataTitle = hit.sort[0];
        let dataid = hit._source.fileid;

        if(localStorage.getItem(`${dataTitle} ID:${dataid}`) === "AllowFullDownload"){
          $('#partialDownload').prop('checked', false);
          $('#fullDownload').prop('checked', true);
        if (AppContext.appUser.isSignedIn()) {
0 Kudos
0 Replies