SimpleModal, no response from ASP.NET button

Question

Hi, I have the following code.

 $(document).ready(function() {
        $('#btnOpen').click(function(e) {
            $('#content').modal({
                onOpen: function(dialog) {
                    dialog.overlay.fadeIn('slow', function() {
                        dialog.data.hide();
                        dialog.container.fadeIn('slow', function() {
                            dialog.data.slideDown('slow');

                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('slow', function() {
                        dialog.container.slideUp('slow', function() {
                            dialog.overlay.fadeOut('slow', function() {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                }
            });

        });
        $('#btnClose').click(function(e) {
            $.modal.close();
        });

If I use <a hrf ="#" id="btnOpen">Open</a>, it works perfectly. If I replace the with an ASP.net Button,
<asp:Button ID="btnOpen" runat="server" Text="Open" />, nothing happened... Any help please?

Answer 1

ASP.Net will automatically generate unique IDs for server-side controls based on the controls' containers.

Therefore, the generated HTML doesn't actually have a #btnOpen element.

You need to use ASP.Net's generated client ID, like this:

$('#<%= btnOpen.ClientID %>').click(...);

Alternatively, in ASP.Net 4.0, you can set the control's ClientIDMode property to prevent ASP.Net from generating a unique ID:

<asp:Button ID="btnOpen" runat="server" Text="Open" ClientIDMode="Static" />

Answer 2

The problem is that ASP.Net controls append the name of the parent container to their ID, so if you do a view HTML source on the generated page you will see that the ID of the button is not btnOpen but parentContainerID_btnOpen.

If you are using ASP.Net 4 you can have the button not append the parent control name by setting an option, otherwise you need to change the javascript code to use the proper ID.

Answer 3

Here is the working codes:

$('#<%= btnOpen.ClientID %>').click(function(e) {
            e.preventDefault();
            $('#content').modal({
                onOpen: function(dialog) {
                    dialog.overlay.fadeIn('slow', function() {
                        dialog.data.hide();
                        dialog.container.fadeIn('slow', function() {
                            dialog.data.slideDown('slow');

                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('slow', function() {
                        dialog.container.slideUp('slow', function() {
                            dialog.overlay.fadeOut('slow', function() {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                }
            });

        });

Only two changes 1: I had changed the name to('#<%= btnOpen.ClientID %>').click(...); 2: I added a e.preventDefault();

However, no postback from the asp button is allowed