JavaScript中弹出的模态无效

Question

I am trying to make simple pop up window using javascript with ASP.NET web forms.

I have following code:

<%@ Register Src="~/Controls/BankInformation.ascx" TagName="BankInformation" TagPrefix="ABS" %>

    <script type="text/javascript">
        $(document).ready(function () {
            var bankInformation = $('#<%=bankInformation.ClientID%>');
            var sameAsMerchantBankCheckbox = $('#<%=chkSameAsMerchantBank.ClientID%>');
            function OpenDirectDebitDialog(dialogID) {
                $("#" + dialogID).modal();
            }

            function ValidateAndCloseDirectDebitDialog(validationGroup, dialogID) {
                var pageValid = Page_ClientValidate(validationGroup);
                if (pageValid)
                    $("#" + dialogID).modal("hide");
            }

            $(sameAsMerchantBankCheckbox).change(function () {
                OpenDirectDebitDialog(bankInformation);
            });
        });
    </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" AutoPostBack="True" Checked="True" />
    <asp:Label runat="server" AssociatedControlID="txtSameAsMerchantBank" ID="txtSameAsMerchantBank" meta:resourcekey="lblSameAsMerchantBank"></asp:Label>

    <div id="bankInfoDialog" runat="server" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
        <ABS:BankInformation runat="server" ID="bankInformation" />
    </div>

On deselecting chkSameAsMerchantBank checkbox event should fire and OpenDirectDebitDialog function should be invoked. But all that happens is page refresh(auto post back I guess). No errors or anything in browser console. Does anybody sees what I'm doing wrongly? Can I even invoke hidden form on modal like this?

Answer 1

You don't have to re create a jQuery id selector again in the function as:

 $("#" + dialogID).modal();

because the passed argument is already a jQuery object. so just remove the "#"+ from it.

---

Why? see below:

As this var is a jQuery object:

var bankInformation = $('#<%=bankInformation.ClientID%>'); // id selector jq object.

You don't have to make it a id selector of it again in the function:

var sameAsMerchantBankCheckbox = $('#<%=chkSameAsMerchantBank.ClientID%>');// id selector.

which is passed in the function on change event:

$(sameAsMerchantBankCheckbox).change(function () { // <----this will do.
    OpenDirectDebitDialog(bankInformation); // <----passed the jQuery selector object here.
});    

so you just need to do this:

function OpenDirectDebitDialog(dialogID) {
   dialogID.modal(); // it would suffice.
   // or $(dialogID).modal(); 
}

Answer 2

You have to do

var sameAsMerchantBankCheckbox = $('#<%=chkSameAsMerchantBank.ClientID%>');

in your code then access checkbox Id