JQuery controlled Popup div on button click

Question

I am trying to get a popup window which should be controlled by a jQuery function that will show/hide on the button click. My button is an asp.net control but I can't figure out how to "call" the jQuery function when the button is clicked

I have tried to add a function name to my asp.net control's onClientClick that should at least just show the popup div but that is not working. I am new to using jQuery and I believe I have everything set up correctly but I am not positive. I am also not certain whether or not I am trying to "call" the jquery function correctly.

Here is the jQuery code..

    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

    <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">


    $(documnet).ready(function () {
        $("#AddToCartBtn").click(function (e) {
            ShowDialog(false);
            e.preventDefault();
        });

        $("#AddToCartBtn").click(function (e) {
            ShowDialog(true);
            e.preventDefault();
        });

        $("#btnClose").click(function (e) {
            HideDialog();
            e.preventDefault();
        });

        $("#btnSubmit").click(function (e) {
            var brand = $("#brands input:radio:checked").val();
            $("#output").html("<b>Your favorite mobile brand: </b>" + brand);
            HideDialog();
            e.preventDefault();
        });

    });

    function ShowDialog() {
        $("#overlay").show();
        $("#dialog").fadeIn(300);


        if (modal) {
            $("#overlay").unbind("click");
        }
        else {
            $("#overlay").click(function (e) {
                HideDialog();
            });
        }
    }

    function HideDialog() {
        $("#overlay").hide();
        $("#dialog").fadeOut(300);
    } 
</script>

Heres the css..

    .web_dialog_overlay
    {
    position: fixed;
    top: 0;


     right: 0;
       bottom: 0;
       left: 0;
       height: 100%;
       width: 100%;
       margin: 0;
       padding: 0;
       background: #000000;
       opacity: .15;
       filter: alpha(opacity=15);
       -moz-opacity: .15;
       z-index: 101;
       display: none;
    }
    .web_dialog
    {
       display: none;
       position: fixed;
       width: 380px;
       height: 200px;
       top: 50%;
       left: 50%;
       margin-left: -190px;
       margin-top: -100px;
       background-color: #ffffff;
       border: 2px solid #336699;
       padding: 0px;
       z-index: 102;
       font-family: Verdana;
       font-size: 10pt;
    }
    .web_dialog_title
    {
       border-bottom: solid 2px #336699;
       background-color: #336699;
       padding: 4px;
       color: White;
       font-weight:bold;
    }
    .web_dialog_title a
    {
       color: White;
       text-decoration: none;
    }
    .align_right
    {
       text-align: right;
    }

and lastly the asp button control and the <div>'s

    <asp:ImageButton ID="AddToCartBtn" runat="server" RowIndex='<%# Container.DisplayIndex %>'
                                            ImageUrl="~/Pictures/ShoppingCart.png" onClientClick="ShowDialog()"                                         
                                              />

    <div id="output"></div>

    <div id="overlay" runat="server" class="web_dialog_overlay"></div>

    <div id="dialog" class="web_dialog">


    <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
          <tr>
             <td class="web_dialog_title">Online Survey</td>
             <td class="web_dialog_title align_right">
                <a href="#" id="btnClose">Close</a>
             </td>
          </tr>
          <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
          </tr>
          <tr>
             <td colspan="2" style="padding-left: 15px;">
                <b>Choose your favorite mobile brand? </b>
             </td>
          </tr>
          <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
          </tr>
          <tr>
             <td colspan="2" style="padding-left: 15px;">
                <div id="brands">
                   <input id="brand1" name="brand" type="radio" checked="checked" value="Nokia" /> Nokia
                   <input id="brand2" name="brand" type="radio" value="Sony" /> Sony 
                   <input id="brand3" name="brand" type="radio" value="Motorola" /> Motorola
                </div>
             </td>
          </tr>
          <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
          </tr>
          <tr>
             <td colspan="2" style="text-align: center;">
                <input id="btnSubmit" type="button" value="Submit" />
             </td>
          </tr>
       </table>
    </div>

So recap, I am having trouble calling my jQuery function when my asp.net button is clicked. I don't think the function is ever getting called at all because when i set breakpoints at the function it never jumps to them when testing. Any help would be greatly appreciated

Answer 1

ASP.NET Buttons have a dynamic generated ID, depending on its parent controls. So your Button ID isn't #AddToCardBtn. Check the generated HTML for that. As a workaround you can call out the generated ID by: <%=AddToCardBtn.ClientID%> into your jquery code to get the generated client ID of your button.

Example:

$("#<%=AddToCardBtn.ClientID%>").click(function (e) {
            ShowDialog(false);
            e.preventDefault();
        });

Thats the cause why your window isn't showed. The function isn't bound to your button.