Discussions
Categories
- 196.7K All Categories
- 2.2K Data
- 235 Big Data Appliance
- 1.9K Data Science
- 449.8K Databases
- 221.6K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 549 MySQL Community Space
- 477 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3K ORDS, SODA & JSON in the Database
- 532 SQLcl
- 4K SQL Developer Data Modeler
- 186.9K SQL & PL/SQL
- 21.3K SQL Developer
- 295.4K Development
- 17 Developer Projects
- 138 Programming Languages
- 292.1K Development Tools
- 104 DevOps
- 3.1K QA/Testing
- 645.9K Java
- 28 Java Learning Subscription
- 37K Database Connectivity
- 153 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.1K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 17 Java Essentials
- 158 Java 8 Questions
- 85.9K Java Programming
- 79 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.2K Java SE
- 13.8K Java Security
- 203 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 396 LiveLabs
- 37 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.6K Other Languages
- 2.3K Chinese
- 170 Deutsche Oracle Community
- 1.1K Español
- 1.9K Japanese
- 230 Portuguese
Help please: defaultOptions is null: OJet 11.1.2

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.
Best Answer
-
n00bie mistake. I was using the wrong binding syntax. I was supposed to use the [[]] binding rather than the {{}} for all the fields..
But the CSS version mismatch error continues..
Answers
-
n00bie mistake. I was using the wrong binding syntax. I was supposed to use the [[]] binding rather than the {{}} for all the fields..
But the CSS version mismatch error continues..
-
The CSS mismatch error is telling you that you need to either recompile your theme (if you are using a custom theme) or you have done something wrong during an migration from an older version. Such as forgetting to update your CSS as well as your JS/TS.
-
@John 'JB' Brock-Oracle The issue with the CSS was that I had a wrong path to the CSS in my header. Now, what is strange is that the error message actually makes me feel that a css was attempted to be delivered by OJET but the delivery was rejected by a script. Time for better messages I guess