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

Question

jQuery newbie here. I've looked at dozens of similar questions on this site, as well as the answers provided so far here, all having pretty much the same response, and I've tried all of them, but nothing is working for me.

For the Javascript code in my .aspx, I currently have:

<script type="text/javascript" src="/resources/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/resources/jquery-ui-1.8.20.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="/resources/ui-lightness/jquery-ui-1.8.20.custom.css" />

<script language="javascript" type="text/javascript">
    $(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();
            alert('boo');
            //$myDialog.dialog('open');
        });
    });
</script>

The markup for "btnCancel" looks like this - notice that I don't have an "onClientClick" attribute because jQuery is supposed to do this for me, right?

<asp:Button ID="btnCancel" CssClass="btnCancel" runat="server" Text="Cancel"
    CausesValidation="false" UseSubmitBehavior="false" />

And here's the markup I have for the cancellation dialog:

<div id="cancelDialog" style="display: none;" title="Please confirm cancellation">
    <p>Are you sure you wish to cancel and abandon your changes?</p>
</div>

According to all the examples I've seen (and the answers provided here), this should give me a jQuery UI popup with my two buttons that just works. The page is no longer posting back when I hit the cancel button (due to the changes I made at Patrick Scott's suggestion). I could just use a standard Javascript confirm() dialog for this, but I want to be able to customize the prompts/styling.

The only other information I can think of to throw in is that this code is on an ASP.NET Wizard control (the cancel button is in the StepNavigationTemplate), but that shouldn't matter, should it?

Any hints as to what I need to change to get this working are greatly appreciated!

(question & code updated to reflect recent changes I've made)

Are you sure that the Id of the element is btnCancel when it is being rendered in the browser ? — Shyju
– Shyju, Commented Apr 9, 2012 at 20:26
if .net is adding a bunch of stuff, use $("[id$=btnCancel]") — Patrick Lee Scott
– Patrick Lee Scott, Commented Apr 9, 2012 at 20:36

James Johnson · Accepted Answer · 2012-04-09 20:37:49Z

1

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:

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

edited Apr 9, 2012 at 20:37

answered Apr 9, 2012 at 20:32

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

timbck2 Over a year ago

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.

Patrick Lee Scott · Accepted Answer · 2012-04-09 20:45:42Z

1

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

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

$("[id$=btnCancel]").click(function(e) {

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

do this instead:

$(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');
        });
    });

edited Apr 9, 2012 at 20:45

answered Apr 9, 2012 at 20:38

Patrick Lee Scott

8,7993 gold badges39 silver badges43 bronze badges

6 Comments

Patrick Lee Scott Over a year ago

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.

Patrick Lee Scott Over a year ago

Though his js needs to be defined inside of the aspx page

timbck2 Over a year ago

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.

timbck2 Over a year ago

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?

Patrick Lee Scott Over a year ago

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?

|

matpol · Accepted Answer · 2012-04-09 20:33:50Z

0

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:

$('#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.

answered Apr 9, 2012 at 20:33

matpol

3,0741 gold badge16 silver badges20 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:20:18Z

0

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:

<script type="text/javascript" src="whatever" />

when according to the standard, they must be written like so:

<script type="text/javascript" src="whatever"></script>

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

Here are some links with supporting information:

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Jun 1, 2012 at 17:18

timbck2

1,0763 gold badges15 silver badges38 bronze badges

3 Comments

timbck2 Over a year ago

Thanks everyone for your help! I really appreciate it!

timbck2 Over a year ago

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.

timbck2 Over a year ago

To solve this, I ended up adding a hidden Cancel button to the ASPX form (<asp:Button ID="btnHdnCancel" runat="server" Style="display: none;" Text="Cancel" OnClick="btnCancel_Click" />) and then adding a click() event to the "Yes" button on the jquery-ui confirmation dialog like so: $("[id$='<%= btnHdnCancel.ClientID %>']").click();.

eldarerathis · Accepted Answer · 2013-02-16 16:52:41Z

0

<%=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.

edited Feb 16, 2013 at 16:52

eldarerathis

36.4k10 gold badges93 silver badges94 bronze badges

answered Feb 16, 2013 at 16:20

Maulik Anand

1,4593 gold badges15 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

6 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

6 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related