RangeError: Maximum call stack size exceeded. Ajax Request on Click

3 Views

I’m trying to build a filter for a table of data that is collected from the database with an AJAX request (in WordPress). There are 2 dropdown menus and a submit button. The problem is when I click on the submit button my browser freezes and I get the error: RangeError: Maximum call stack size exceeded.
What’s causing this?

The code loads the table when the page is loaded (including the dropdown menus and the submit button). Then once it’s loaded it loads the ‘click submit button’ function.

<script>
(function($
    jQuery(document).ready(function($){
        var amount = 10; //get amount of results to show per page
        $.post("<?php echo get_stylesheet_directory_uri(); ?>/ajax_table.php", {
            manual_filter: 1,
            //sector_id : '<?php echo $sector_id; ?>', //send the data to the page using this format
            amount : amount //send the data to the page
        }, function(data) {
            // data will hold the output from the script.php
            $("#table").html(data); //update the div with the output

            $("#submit").click(function (){
                var sector = document.getElementById("sector_dropdown");
                var year = document.getElementById("year_dropdown");
                $.post("<?php echo get_stylesheet_directory_uri(); ?>/ajax_table.php", {
                    manual_filter: '1',
                    sector_id: sector,
                    year: year,
                    amount : amount //send the data to the page using this format
                }, function(data) {
                    // data will hold the output from the script.php
                    $("#table").html(data); //update the div with the output
                });
            });

        });

    });
})(jQuery);
</script>
<div id="table">
</div>
Post Views: 3

Related posts

2 comments

  1. The problem is when I click on the submit button my browser freezes
    and I get the error: RangeError: Maximum call stack size exceeded.
    What’s causing this?

    $("#table").html(data); loads duplicate elements having id #submit ? When #submit clicked, all duplicate #submit elements click handlers called ? Results in adding more duplicate #submit elements with click events attached , calling click handlers of all duplicate #submit elements .

    Note, ids should be unique within document .

    click event could be delegated to single handler attached to #submit parent element table outside of $.post() complete callback.

  2. I fixed it in the end. It wasn’t to do with the #submit button, it was to do with the dropdown menu.
    This is what got it to work:

    var sectorALL = document.getElementById("sector_dropdown");
var sector = sectorALL.options[sectorALL.selectedIndex].value;

Comments are closed.