jQuery UI modal confirmation dialog at asp.net: how to prevent trigger OnClick event

Question

I am trying to use confirmation dialog from jQuery UI.

I ran into this problem: how to trigger correctly the dialog and at the same time prevent trigger OnClick event specified at button until user click on Yes or No buttons at dialog?

In the example below are two ways how to popup confirmation. Lower one works well. It's a classic JavaScript confirm dialog. When I try to use the jQuery UI dialog, it displays a dialog but allows it to run the event assigned at OnClick (here by using Command, but I suppose there is no difference. Hope I am not wrong.). The piece is taken from the ASP.NET Repeater control btw.

<li>
   <asp:LinkButton ID="lbtnRenew" runat="server" Text="Renew" CssClass="ContextMenuItem"
  CommandName="Renew" CommandArgument="<%# Container.ItemIndex %>" 
  OnClientClick="javascript: openModalDiv('dialogRenew');" /></li>
<li>
   <asp:LinkButton ID="lbtnRemove" runat="server" Text="Remove" CssClass="ContextMenuItem"
  CommandName="Remove" CommandArgument="<%# Container.ItemIndex %>" 
  OnClientClick="return confirm('Are you sure that you want to delete package?');" /></li>

This is the JavaScript I used so far:

function openModalDiv(divname) {
  $('#' + divname).dialog({
    bgiframe: true,
    resizable: false,
    modal: true,
    overlay: {
    backgroundColor: '#000',
    opacity: 0.5
    },
    buttons: {
     Ok: function() {
       $(this).dialog('close');return true;
     },
     Cancel: function() {
       $(this).dialog('close');return false;
     }
   }
  });
}

I am missing something, but don't know what. How do I solve this problem?

Thanks for any tip.

P.S. if you need add some additional information let me know.

Answer 1

Remove the onClientClick and use jQuery to add the event, then you can use preventDefault...

$("#lbtnRenew").click(function(e) {
e.preventDefault(); //stops OnClick event
//jscript code here
});

Answer 2

You need to configure your modal dialog and then attach an onclick event handler in the document.ready handler. Also since you're using asp.net server controls, the id generated in the html will contain the naming container so you won't be able to select using #lbtnRenew selector mentioned above. The actual generated ID will be something like ctl00_...lbtnRenew. You can use alternate jquery selectors to get just the last part of the id or name as follows

    $(function() {
  // configure modal dialog
$('#dialogRenew').dialog({
    bgiframe: true,
    resizable: false,
    modal: true,
    autoOpen: false,
    overlay: {
    backgroundColor: '#000',
    opacity: 0.5
    },
    buttons: {
     Ok: function() {
       $(this).dialog('close');return true;
     },
     Cancel: function() {
       $(this).dialog('close');return false;
     }
   }
  });

// attach onclick event handler to open dialog
// $= selector for elements with attribute ending in text
$("submit[name$=lbtnRenew]").click(function(event) {
        event.preventDefault();
        $('#dialogRenew').dialog('open');
    });
});

then you can remove the onclientclick inline javascript for your linkbutton