Finding a circular object in the code

Question

I am writing a script using jQuery for loading some content into my page. At runtime nothing happens. I get this error when inspecting Firebug console:

TypeError: cyclic object value  
data: JSON.stringify({ columnName: _columnName })

Here is the code (placed inside <Head>):

<Script>
function changeContent(_columnName) {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetContent")',
            data: JSON.stringify({ columnName: _columnName }),
            dataType: 'json',
            contentType: "application/json; charset=utf-8"
        }).done(function (resp) {
            CKEDITOR.instances.text.setData(resp.Text);
        }).fail(function () {
            alert("Error");
        });
    }
    $(function () {
        $("#side-content").bind('click', { a: "side" }, changeContent);
    });
</Script>

I used the tip here: Detecting and fixing circular references in JavaScript but could not find any circular relations!!!

Any point on saving my life would be so greatly appreciated.
- Kamran

To expand on what Dogbert is saying, try `function changeContent(e, _columnName) { ...` (To see what's wrong with your current version, add `console.log(_columnName)` as the first line of the function.) — nnnnnn, Jul 10 '13 at 13:03
@Kamran look at what the object is (nnnnnn's comment) and you'll likely answer that for yourself. — AD7six, Jul 10 '13 at 13:08
@Kamran Perhaps you can explain why you want to send the complete DOM event object to the server? — Xotic750, Jul 10 '13 at 13:25

Kamran · Accepted Answer · 2013-07-10T13:54:17.370

Problem solved and well understood

The main part of the problem was I did not know that the argument of the handler is DOM event. I thought that _columnName will receive event data which was wrong. It is DOM event in fact.

The working code follows:

<script>
    function changeContent(event) {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetHomeColumnContent")',
            data: JSON.stringify({ columnName: event.data.a }),
            dataType: 'json',
            contentType: "application/json; charset=utf-8"
        }).done(function (resp) {
            CKEDITOR.instances.text.setData(resp.Text);
        }).fail(function () {
            alert("Error");
        });
    }
    $(function () {
        $("#side-content").bind('click', { a: 'side' }, changeContent);
    });
</script>

And about the cyclic value: DOM elements are cyclic in nature because every DOM element has a reference to its parent, and in turn every parent has references to its children, so a cyclic structure.

Thanks to all friends for their times: @Dogbert, @nnnnnn, @AD7six, @Xotic750 ;-)

Finding a circular object in the code

1 Answers1