Rectangle 27 0

javascript jQuery UI modal confirmation dialog with ASP.NET not firing onClick event?


$("#<%= btnCancel.ClientID %>").click(function(e){
    //open the dialog
});

I tried many variations on this and couldn't ever get it to work. I must have something else wrong. I'm going to put an alert in there as matpol suggested to see if my javascript is even running.

The reason it isn't working is because the ID of the button changes when it's rendered to the page. To access the control in JavaScript, you need to use the ClientID property:

Note
Rectangle 27 0

javascript jQuery UI modal confirmation dialog with ASP.NET not firing onClick event?


$('#btnCancel').click(function(e) {
alert('boo');
});

If this doesn't work you need to make the simplest script possible get that working and then add to it.

you need to break it down - it sounds like there is another error in the JS somewhere which you don't see because the page is reposting. Try an alert on the click:

Note
Rectangle 27 0

javascript jQuery UI modal confirmation dialog with ASP.NET not firing onClick event?


$("[id$='<%= btnHdnCancel.ClientID %>']").click();
<asp:Button ID="btnHdnCancel" runat="server" Style="display: none;" Text="Cancel" OnClick="btnCancel_Click" />
<script type="text/javascript" src="whatever"></script>

Here are some links with supporting information:

I figured it out! It turns out that <script> tags (nor most other tags, it seems) cannot be self-closed in HTML4 or HTML5. I was writing them like so:

This was allowing my first <script> include to work (jquery-1.7.2.min.js), but following ones to fail. Weird, huh?

Well, I spoke too soon. I only partially figured it out. I'm getting the jQuery-UI dialog now, but I need the ASPX button's server-side OnClick method to be fired if the user confirms the cancellation in the dialog. That's not happening, and I need some help with it.

Note
Rectangle 27 0

javascript jQuery UI modal confirmation dialog with ASP.NET not firing onClick event?


<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;

Hook this to the "yes" button on your modal confirmation dialog. You'll need to change the ID according to your needs.

Note
Rectangle 27 0

javascript jQuery UI modal confirmation dialog with ASP.NET not firing onClick event?


$('#btnCancel').click(function(e) {
alert('boo');
});

If this doesn't work you need to make the simplest script possible get that working and then add to it.

you need to break it down - it sounds like there is another error in the JS somewhere which you don't see because the page is reposting. Try an alert on the click:

Note
Rectangle 27 0

javascript jQuery UI modal confirmation dialog with ASP.NET not firing onClick event?


$("[id$=btnCancel]").click(function(e) {
$(function() {
        var $myDialog = $("#cancelDialog").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                    'Yes, cancel': function() {
                        $(this).dialog('close');
                        return true;
                    },
                    'No, resume editing': function() {
                        $(this).dialog('close');
                        return false;
                    }
                }
        });

        $("[id$=btnCancel]").click(function(e) {
            e.preventDefault();
            $myDialog.dialog('open');
        });
    });

$= means ends with in the jquery selector, and webforms adds a bunch of stuff that will make your id not match.

Are you including the jquery-ui.css? dialog open should make the dialog visible, yes (a bit more complicated than just setting it to visible though). If you inspect your html (using firebug or something similar) can you see the dialog? Are there any javascript errors?

I also don't understand why you have the buttons declared separately from the rest of the dialog...

I've played with this some more, and still haven't made any progress. I tried putting the javascript in its own file and including it (both in the header and the body), putting it inline in the header, and in the body - nothing works. I did try putting an alert() in place of the "dialog('open')" call, nothing happened (any clues on that?). I'm curious about something: how/when does the "display" property on the cancel dialog <div> get changed from "none" to "block" so that the dialog is visible? Is that intrinsic to jQuery-ui and just automatically happens when "dialog('open')" is called?

This got me a little closer (i.e. the form is no longer posting back) but I'm still not getting a dialog. I put the javascript (as an include) in the main content placeholder for the page as you suggested Patrick, rather than in the <head> tag.

Use $("[id$=btnCancel]") as your selector for the click event..

or client id, like James Johnson suggested. I prefer this way personally.. I guess his is more fail safe though, for example if you have "anotherbtnCancel" that would also match and give you some unexpected behavior.

Note
Rectangle 27 0

javascript jQuery UI modal confirmation dialog with ASP.NET not firing onClick event?


$("[id$='<%= btnHdnCancel.ClientID %>']").click();
<asp:Button ID="btnHdnCancel" runat="server" Style="display: none;" Text="Cancel" OnClick="btnCancel_Click" />
<script type="text/javascript" src="whatever"></script>

Here are some links with supporting information:

I figured it out! It turns out that <script> tags (nor most other tags, it seems) cannot be self-closed in HTML4 or HTML5. I was writing them like so:

This was allowing my first <script> include to work (jquery-1.7.2.min.js), but following ones to fail. Weird, huh?

Well, I spoke too soon. I only partially figured it out. I'm getting the jQuery-UI dialog now, but I need the ASPX button's server-side OnClick method to be fired if the user confirms the cancellation in the dialog. That's not happening, and I need some help with it.

Note
Rectangle 27 0

javascript jQuery UI modal confirmation dialog with ASP.NET not firing onClick event?


$("#<%= btnCancel.ClientID %>").click(function(e){
    //open the dialog
});

I tried many variations on this and couldn't ever get it to work. I must have something else wrong. I'm going to put an alert in there as matpol suggested to see if my javascript is even running.

The reason it isn't working is because the ID of the button changes when it's rendered to the page. To access the control in JavaScript, you need to use the ClientID property:

Note
Rectangle 27 0

javascript jQuery UI modal confirmation dialog with ASP.NET not firing onClick event?


<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;

Hook this to the "yes" button on your modal confirmation dialog. You'll need to change the ID according to your needs.

Note
Rectangle 27 0

javascript jQuery UI modal confirmation dialog with ASP.NET not firing onClick event?


$("[id$=btnCancel]").click(function(e) {
$(function() {
        var $myDialog = $("#cancelDialog").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                    'Yes, cancel': function() {
                        $(this).dialog('close');
                        return true;
                    },
                    'No, resume editing': function() {
                        $(this).dialog('close');
                        return false;
                    }
                }
        });

        $("[id$=btnCancel]").click(function(e) {
            e.preventDefault();
            $myDialog.dialog('open');
        });
    });

$= means ends with in the jquery selector, and webforms adds a bunch of stuff that will make your id not match.

Are you including the jquery-ui.css? dialog open should make the dialog visible, yes (a bit more complicated than just setting it to visible though). If you inspect your html (using firebug or something similar) can you see the dialog? Are there any javascript errors?

I also don't understand why you have the buttons declared separately from the rest of the dialog...

I've played with this some more, and still haven't made any progress. I tried putting the javascript in its own file and including it (both in the header and the body), putting it inline in the header, and in the body - nothing works. I did try putting an alert() in place of the "dialog('open')" call, nothing happened (any clues on that?). I'm curious about something: how/when does the "display" property on the cancel dialog <div> get changed from "none" to "block" so that the dialog is visible? Is that intrinsic to jQuery-ui and just automatically happens when "dialog('open')" is called?

This got me a little closer (i.e. the form is no longer posting back) but I'm still not getting a dialog. I put the javascript (as an include) in the main content placeholder for the page as you suggested Patrick, rather than in the <head> tag.

Use $("[id$=btnCancel]") as your selector for the click event..

or client id, like James Johnson suggested. I prefer this way personally.. I guess his is more fail safe though, for example if you have "anotherbtnCancel" that would also match and give you some unexpected behavior.

Note