Uncaught RangeError: Maximum call stack size exceeded in Chrome

0
votes

I've keep getting this error from JavaScript. It happens each time I select/deselect ckhDirectDebit checkbox.

Here is the code:

<script type="text/javascript">
    $(document).ready(function () {
        var isDirectDebitSelected = $('#<%=chkDirectDebit.ClientID%>');
        var sameAsMerchantBankCheckbox = $('#<%=chkSameAsMerchantBank.ClientID%>');
        var sameAsMerchantBankLabel = $('#<%=txtSameAsMerchantBank.ClientID%>');

        function setSameAsMerchantVisible() {
            if (isDirectDebitSelected.is(':checked')) {
                sameAsMerchantBankCheckbox.show();
                sameAsMerchantBankLabel.show();
            } else {
                sameAsMerchantBankCheckbox.hide();
                sameAsMerchantBankLabel.hide();
            }

            isDirectDebitSelected.bind('change', function () {
                setSameAsMerchantVisible();
            });

            setSameAsMerchantVisible();
        }
    });
</script>

<asp:CheckBox runat="server" ID="chkDirectDebit" />
<asp:Label runat="server" AssociatedControlID="chkSameAsMerchantBank" ID="txtDirectDebit" meta:resourcekey="lblDirectDebit"></asp:Label>
<asp:CheckBox runat="server" ID="chkSameAsMerchantBank" OnCheckedChanged="chkSameAsMerchantBank_CheckedChanged" AutoPostBack="True" Checked="True" />
<asp:Label runat="server" AssociatedControlID="txtSameAsMerchantBank" ID="txtSameAsMerchantBank" meta:resourcekey="lblSameAsMerchantBank"></asp:Label>

Anyone knows what I'm doing wrongly in js? And what is the potential problem that causes this exception?

3
javascriptjqueryasp.net
setSameAsMerchantVisible called always and you get infinite recursion - Grundy
Calling setSameAsMerchantVisible() from setSameAsMerchantVisible, what are you expecting??? - A. Wolff
@A.Wolff I was trying to check if the chkDirectDebit is check. If it is than I need to call setSameAsMerchantVisible method, that needs to show chkSameAsMerchantBank checkbox. - nemo_87
@nemo_87 So call your checking logic from change event, without nesting it in called handler. Your logic is failing there - A. Wolff

3 Answers

3
votes

You have infinite recursion because inside setSameAsMerchantVisible called setSameAsMerchantVisible again without any condition.
Seems like you have a typo and should move close bracket a bit higher

function setSameAsMerchantVisible() {
    if (isDirectDebitSelected.is(':checked')) {
        sameAsMerchantBankCheckbox.show();
        sameAsMerchantBankLabel.show();
    } else {
        sameAsMerchantBankCheckbox.hide();
        sameAsMerchantBankLabel.hide();
    }
} // <-- to here
    isDirectDebitSelected.bind('change', function () {
        setSameAsMerchantVisible();
    });

    setSameAsMerchantVisible();

//} from here
1
votes

this situation probably occurs when program falls in an infinite loop..

you are recursively calling the function setSameAsMerchantVisible()

1
votes

This is happening because your code is going in an infinite loop due to recursive call as below -

 function setSameAsMerchantVisible() {

// other code  
            setSameAsMerchantVisible();
        }

The stack is overflowing due to recursive call.