jQuery ajax post Uncaught RangeError: Maximum call stack size exceeded

Question

I have a problem with jQuery ajax. I have javascript

 <script type="text/javascript">
    $(function() {
        $('body').on("click", "#pager a", function(e) {
            e.stopPropagation();
            e.preventDefault();
            var a = $(this);
            var model = $('#searchForm').serialize();
            $.ajax({
                url: '/Product/Products',
                type: 'POST',
                data: {
                    model: model, page: a
                },
                success: function (data) {
                    alert('success');
                    $('#productsList').html(data);
                }
            });
        });
    });
</script>

This code produce error "Uncaught RangeError: Maximum call stack size exceeded" and I don't understand why. I have no trigger, I used preventDefault and stopPropagation, but I still have this error. Can anyone help me?

Answer 1

This error can also come if you are passing something in data which is not defined in that scope. Another reason is passing in data with val() directly.

Answer 2

Instead of using var a = $(this) to get the page, use one hidden field and give page value to the field.

<input type="hidden" value="xyzpage" id="pageValue">

var pageVal = $("#pageValue").val();

data: {
         model: model, page:pageVal 
      },

This will solve the issue I guess

Answer 3

You need to take off the var a = $(this);. I don't know what you try to achieve there but using a the jQuery wrapped clicked element as request data is a non-sense.

Answer 4

Endless loop can also cause this kind of error. View that you don't call same function inside function.

Answer 5

I ran into such a problem when parsing a large piece of JSON using jquery.tmpl.js. This error appears when handling large arrays with the concat() function. Here is a link to the problem: https://bugs.chromium.org/p/chromium/issues/detail?id=103583 The problem has not been solved since 2011. To solve it, I had to edit the jquery-3.3.1.js javascript library file. For those who want to repeat this decision, do the following: find the following line in the library file return concat.apply ([], ret); and replace it with the code below.

        // Flatten any nested arrays
        if ([].flat) return ret.flat();


        var ret2 = [];

        ret.forEach(function (i) {

            if (i instanceof Array) {

                i.forEach(function (i2) {
                    ret2.push(i2);
                });

            } else {
                ret2.push(i);
            }

        });

        return ret2;

        // original code:
        // return concat.apply([], ret);
        // chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=103583

We check if there is a flat() function in the browser's arsenal, for example, it has a chrome browser, and if there is - simply merge the data arrays - nothing more is needed. If not, the browser will go a slower path, but at least there will be no error.

Answer 6

I want to share my experience,

in my case, it was only a wrong parameter name and exactly the same error message : instead of confID, I put the configID and got this error.

 function openNameEditor() {
    var confID = $("#configStatusList").attr("data-id");
    debugger;
    $.ajax({
        url: '@Url.Action("GetModelNameToChange", "Admin")',
        type: "GET",
        dataType: "HTML",
        data: { configID: configID},//Here, instead of confID, I put configID which doesn't exist in the function.
        success: function (response) {
            $("#name-editor").html(response);
        },
        error: function (er) {
            alert(er.error);
        }
    });

}