Skip to Main Content

Help please: defaultOptions is null: OJet 11.1.2

Venkata Rahul SDec 7 2021

Uncaught (in promise) TypeError: can't access property "readonlyElem", defaultOptions is null

I have a plain old js based login page which redirects to auth0 and gets the user token. The token and user profile are being pushed to the sessionStorage and retrieved in my next page, which I call the "home(.html)". Now in this page, I am getting the values stored in the sessionStorage to be bound to specific textAreas.
<body class="demo-disable-bg-image">
<div id="div1" class="oj-flex oj-panel oj-bg-info-30 oj-sm-margin-4x-bottom demo-padding demo-container">
<oj-form-layout columns="1" direction="column" style="border: 10px;" id="WelcomeForm" readonly="true" class="oj-formlayout-full-width">
<h4>Welcome</h4>
<oj-text-area value="{{email}}" label-hint="email" rows="1" length.max="30"></oj-text-area>
<oj-text-area value="{{nickname}}" label-hint="nickname" rows="1" length.max="30"></oj-text-area>
<oj-text-area value="{{picture}}" label-hint="picture" rows="1"></oj-text-area>
<oj-text-area value="{{token}}" label-hint="token" rows="1" length.max="30" readonly="true"></oj-text-area>
</oj-form-layout>
</div>
<!-- This injects script tags for the main javascript files -->
<!-- injector:scripts -->
<!-- endinjector -->
<script type="text/javascript" src="js/libs/require/require.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
And in my root.js, I am doing this:
Bootstrap.whenDocumentReady().then(() => {
ko.applyBindings(new LoginModel(), document.getElementById("div1"));
});

class LoginModel {
nickname: ko.Observable<string>;
email: ko.Observable<string>;
picture: ko.Observable<string>;
token: ko.Observable<string>;
constructor() {
try {
var user = JSON.parse(sessionStorage.getItem("neyahUser"));
var token = sessionStorage.getItem("token");
console.log("nickname= " + user.nickname);
console.log("picture= " + user.picture);
console.log("email= " + user.name);
console.log("token= " + token);
this.nickname = ko.observable(user.nickname);
this.email = ko.observable(user.name);
this.picture = ko.observable(user.picture);
this.token = ko.observable(token);
} catch (e) {
console.error("Cannot read neyahUser from authenticated credentials" + e);
}
}
// self.save = function () {
// sessionStorage.setItem("user", self.email());
// sessionStorage.setItem("picture", self.picture());
// sessionStorage.setItem("nickname", self.nickname());
// sessionStorage.setItem("token", self.token());
// };
};

I am able to read the values in plain text boxes. But the page runs into several errors, all of which related to the defaultOptions. There is also this warning: Your CSS file is incompatible with this version of JET (11.1.2). Please see the Migration section of the Developer's Guide for how to update it.
What wrong am I doing? I am doing all this on the blank template.

This post has been answered by Venkata Rahul S on Dec 7 2021
Jump to Answer
Comments
Post Details
Added on Dec 7 2021
3 comments
23 views