Forum Stats

  • 3,855,427 Users
  • 2,264,501 Discussions
  • 7,905,988 Comments

Discussions

Categories

Help please: defaultOptions is null: OJet 11.1.2

Venkata Rahul S
Venkata Rahul S Member Posts: 37 Blue Ribbon
in Oracle JET

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.

Tagged:
· Share on TwitterShare on Facebook

Best Answer

Answers