Jquery BlockUI w/ Asp.net confirm delete

Question

Asp.Net 3.5 / WebForms (no ajax)

I am trying to update a delete confirm box with jquery & UIBlock. Old code looks something like this...

<asp:LinkButton OnClientClick="return confirm('Are you sure you want to delete?')" runat="server" ID="DeleteButton" OnClick="DeleteButton_OnClick">Delete</asp:LinkButton>

What is the best practice to postpone and then continue a postback with jquery & asp.net? I haven't found a clean way/example/guidance on this. Dave Ward (encosia.com) has some examples w/ UIBlock but none of them uses UIBlock as a confirmation / modal popup.

Thanks for any help/pointers.

Answer

<a href="#" id="delete">
  <span>Delete?</span>
</a>

<div id="question" style="display:none; cursor: default"> 
        <h1>Are you sure you want to delete?</h1> 
        <asp:LinkButton runat="server" Text="Yes" OnClick="DeleteButton_OnClick"></asp:LinkButton>
        <a href="#" id="no"><span>No</span></a>
</div> 


<script type="text/javascript">
    $(document).ready(function() {

      $('#delete').click(function(ev) {
        ev.preventDefault();
        $.blockUI({ message: $('#question'), css: { width: '275px'} });
      });

      $('#no').click(function() {
        $.unblockUI();
        return false;
      });

    }); 
</script>

Answer 1

Hi,

You can do something like this :

$('#DeleteButton').bind('click', function() {

   // if confirmation button inside the form is pressed ..
   $('#confirm_button').bind('click', function() {
    // redirect to the page where it resolves the request  
        window.location = "http://www.site.com/?delete";
        // or use ajax call
    $.ajax({
     // the request to delete 
    });
        // this one in case you choose to make ajax request
    $.unblockUI();
   });

   $.blockUI({
        // form setted with display:none; in css to be trigged when delete button is clicked
        // css here is an example
    message: $('#delete_form'),
    css: { 
     border: 'none', 
     padding: '15px',
     width: '400px',
     backgroundColor: '#000', 
     '-webkit-border-radius': '10px', 
     '-moz-border-radius': '10px',
     color: '#fff' 
     }
    });

        // cancel button inside the form, when clicked, dismiss form 
    $('#cancel').click($.unblockUI);
        // if user clicks outside the form, it dismisses the form as well
    $('.blockOverlay').click($.unblockUI); 
});