Uncaught TypeError: Cannot read property 'appendChild' of null

[nousacademy]

I dont know what I'm doing wrong I followed the example and I'm getting :

Uncaught TypeError: Cannot read property 'appendChild' of null

On the Hub I put :

CrossStorageHub.init([
   {origin: /:\/\/(www\.)?mysite.com\/something\/myapp?     my.tabName=01rf0000000D4nF#!\/dashboard$/, allow: ['get', 'set', 'del']}
]);

And for the Client I put:

var storage = new CrossStorageClient('https://mysite.com/something/myapp?my.tabName=01rf0000000D4nF#!/dashboard');
    var setKeys = function () {
      return storage.set('newUserData', 'foo', 9000)
      .then(function() {
        return storage.get('key2', 'bar');
      });
    };
    storage.onConnect()
    .then(setKeys)
    .then(function() {
      return storage.get('key1');
    }).then(function(res) {
      console.log(res); // 'foo'
    })['catch'](function(err) {
      console.log(err);
    });

Its not showing the last bit of code but I got it right from the example

[danielstjules]

Is there a chance the HTML page for the client doesn't have a body element?

[nousacademy]

Yeah, I'm using "ng-view" (AngularJS), so basically everything is being dynamically added

[danielstjules]

Hm, so are you saying there isn't a body element? If not, can you add one? Or delay the client's initialization to when the body becomes available?

The only instance of appendChild in the code is here:

cross-storage/dist/client.js

Line 371 in 06b3d83

window.document.body.appendChild(frame);

Which specifically requires that a body element exist on which to append an iframe.

[nousacademy]

ill try the delay

[nousacademy]

var storage = new CrossStorageClient('https://mysite.com/something/myapp?my.tabName=01rf0000000D4nF#!/dashboard');
    var setKeys = function () {
      return storage.set('newUserData', 'foo', 9000) // 9 second delay
      .then(function() {
        return storage.get('key2', 'bar');
      });

I tried that still get the same error

[danielstjules]

I mean delaying the initialization of CrossStorageClient. Like the following:

var delay = 2000;
var url = 'https://mysite.com/something/myapp?my.tabName=01rf0000000D4nF#!/dashboard';

setTimeout(function() {
  var storage = new CrossStorageClient(url);
  var setKeys = function() {
    return storage.set('newUserData', 'foo', 9000)
    .then(function() {
      return storage.get('key2', 'bar');
    });
  };

  storage.onConnect()
  .then(setKeys)
  .then(function() {
    return storage.get('key1');
  }).then(function(res) {
    console.log(res); // 'foo'
  })['catch'](function(err) {
    console.log(err);
  });
}, delay);

Presumably, there'd be some sort of promise, hook, or callback that would indicate that the body is loaded. If not, you could poll, which is a bit less ideal:

var bodyLoaded = new Promise(function(resolve, reject) {
  var pollDelay = 100;
  var poll = setInterval(function() {
    if (!window.document.body) return;

    clearInterval(poll);
    resolve();
  }, pollDelay);
});

bodyLoaded().then(function() {
  var url = 'https://mysite.com/something/myapp?my.tabName=01rf0000000D4nF#!/dashboard';
  var storage = new CrossStorageClient(url);
  var setKeys = function() {
    return storage.set('newUserData', 'foo', 9000)
    .then(function() {
      return storage.get('key2', 'bar');
    });
  };

  storage.onConnect()
  .then(setKeys)
  .then(function() {
    return storage.get('key1');
  }).then(function(res) {
    console.log(res); // 'foo'
  })['catch'](function(err) {
    console.log(err);
  });
});

[nousacademy]

thanks i figured it out i was calling the crossStorage function before i even defined angularjs, but it works as expected. Thanks for your help!!

[danielstjules]

np! Glad it worked :)

[jacobgoh101]

putting my code into jquery $(document).ready solve the problem for me