DataCloneError: The object could not be cloned

Question

I have ajax search based web (filter with inputs and results) where i want make working back/foward browser button. So i must use window.history.pushState witch is working with contetnt (search results) but i must 'store' whole filter with inputs and selected values.

On filter inputs i am using SumoSelect plugin and if you store all html elements to variable and after that append it back to DOM (after press back button) functionality of SumoSelect is not working any more...

Here is my question about it. One possible solution (what i know) how make it works after append is use .contents() instead of .html().

BUT if i use .contents() in pushState like this:

 window.history.pushState({"html":results,"filter": $('#filter').contents(),"pageTitle":"title"},"", null);

I get error:

DataCloneError: The object could not be cloned.

So is there any options how store filter to state to make it work?

Answer 1

The pushState location state object must be serializable, which means no methods. $('#filter').contents() returns a jQuery object that can't be serialized.

Try turning the contents into an object or array.