25

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.

Nakilon
  • 34,866
  • 14
  • 107
  • 142
jawad
  • 261
  • 1
  • 3
  • 7
  • You're trying to convert a nodeList / DOM elements to a JSON string – adeneo Jan 20 '14 at 12:41
  • yes, it works on Firefox, but it gives problem in Chrome – jawad Jan 20 '14 at 12:47
  • If it works, it's a fluke, you can't convert nodelists to strings, or at least you shouldn't. – adeneo Jan 20 '14 at 12:52
  • 1
    Thank you for your answers, can you offer me another solution? – jawad Jan 20 '14 at 12:56
  • Why do you have to send the entire element to the server? Usually you'd extract a value or text from the element, not send the whole thing (which isn't really possible) – adeneo Jan 20 '14 at 13:00
  • ok, I'll test and I want you know, thank you very much. – jawad Jan 20 '14 at 13:05
  • I solved the problem, I used the ID instead of nodeList. Thank you very much, you can close the ticket. – jawad Jan 20 '14 at 15:43
  • possible duplicate of [Chrome sendrequest error: TypeError: Converting circular structure to JSON](http://stackoverflow.com/questions/4816099/chrome-sendrequest-error-typeerror-converting-circular-structure-to-json) – Felix Kling Apr 21 '14 at 13:27

2 Answers2

28

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 property parentNode 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:

Uncaught TypeError: Converting circular structure to JSON

Even if this is resolved by the browser you may have other problems. Because not only childNodes exist but also childElements. The same is for parentNode/parentElement, then you also have nextSibling, 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.

t.niese
  • 39,256
  • 9
  • 74
  • 101
5

You need to use the .innerHtml property of the DOM element instead of converting the entire DOM element. So you should be looking to have something like: 

JSON.stringify(table.tBodies[0].innerHTML)
DoctorFox
  • 173
  • 1
  • 6