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
<br>
<input type="radio" id="checkboxFullDownload" data-dojo-attach-event="onClick: _renderDownloads" style="cursor: pointer;" name="downloadValue" value="fullDownload" >
Allow Partial + Full Download
</form>
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.
define(["dojo/_base/declare",
"dojo/_base/lang",
"dojo/_base/array",
'dojo/Deferred',
'dojo/promise/all',
"dojo/string",
"dojo/topic",
"dojo/request",
"dojo/request/xhr",
"dojo/on",
"app/context/app-topics",
"dojo/dom-style",
"dojo/dom-class",
"dojo/dom-construct",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/Tooltip",
"dijit/TooltipDialog",
"dijit/focus",
"dojo/dom",
"dijit/popup",
"dojo/text!./templates/ItemCard.html",
"dojo/i18n!app/nls/resources",
"dojo/parser",
"dojo/ready",
"dojo/domReady!"
],
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) {
parser.parse()
var oThisClass = declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
render: function (hit) {
let radios = document.getElementsByName('downloadValue')
console.log(hit)
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()) {
this._renderDownloadDropdown(item,links)
}
},
},
