I have a tableDnD drag and drop with JSON.stringify :
jQuery(document).ready(function() {
jQuery("#Table").tableDnD({
onDragClass: "danger",
onDrop: function(table, row) {
jQuery.ajax({
url: "ajax.php",
type: "post",
data: {
'rows' : JSON.stringify(table.tBodies[0].rows)
},
dataType: 'html',
success: function(reponse) {
if(reponse) {
//alert('Success');
} else {
alert('Erreur');
}
}
});
}
});
});
I have this error message:
Uncaught TypeError: Converting circular structure to JSON
I have the problem only on Chrome.
Best Answer
You should not convert a DOM element to JSON directly.
While - like you already experienced - it fails e.g. in Chrome, the results may also be unexpected.
The reason for this is because the data is circular:
A Node has the property
childNode
containing all its children and the propertyparentNode
pointing to the parent.The JSON format does not support references, so it will need to follow the properties until an end is reached, but because a child points to its parent which has a list of its children, this is an endless loop, that’s the reason why you get the error:
Even if this is resolved by the browser you may have other problems. Because not only
childNodes
exist but alsochildElements
. The same is forparentNode
/parentElement
, then you also havenextSibling
,prevSibling
,firstChild
,lastChild
, ... that would probably also be followed, so you would end up in the terrifying large JSON file containing a butch of duplicate data.