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.