Error: Error in Rangy WrappedRange module: createRange(): Parameter must be a Window object or DOM node

Question

I have these two functions:

function menuItemListener( link ) {
var side = link.getAttribute("data-action");
if (side == 'Mark as A' || side == 'Mark as B') {
    highlighter(side);
    $.ajax({
    method: "POST",
    url: "http://localhost:3000/",
    dataType: "json",
    data: JSON.stringify({"rangyobject" : rangy.saveSelection()}),
    contentType: "application/json; charset=utf-8",
    success: function(result) {
      console.log('yei');
    }
  });
} 
toggleMenuOff();
}

function loadHighlights () {
window.addEventListener("load", function load(event){
$.ajax({
    method: "GET",
    url: "http://localhost:3000/ranges",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(result) {
     console.log('loadHighlights results: ', result[0].rangyObject);
     rangy.restoreSelection(result[0].rangyObject);
    }
  });  

},false); };

So it's simply storing the rangy.saveSelection() in the DB and then getting it back and trying to rangy.restoreSelection on the its first element. the console.log looks good but I'm getting an error in the console:

Error: Error in Rangy WrappedRange module: createRange(): Parameter must be a Window object or DOM node

Answer 1

1. rangy.saveSelection() looks like this in the console:

   {win: undefined, rangeInfos: Array, restored: false}

2. Note the "win: undefined"

3. When I send it to the DB, I use

   data: JSON.stringify({"rangyObject" : rangy.saveSelection()})

4. When retrieving it back from the DB it looks like:

   {rangeInfos: Array, restored: false}

5. Notice that the 'win' was omitted by the save to the db

I was able to use the serialize and deserialize functions to circumvent this issue, but these don't create the id's with the span's they create, so I ran into another problem.