Question

My code make deleting item before I confirm it. How can I make a change to let it deletes item after I confirm it. Here is javascript code:

<script type="text/javascript">
    var _source;
    var _popup;

    function showChild_Delete(source) {
        this._source = source;
        this._popup = $find('popupChild_Delete');
        this._popup.show();
    }

    function btnChild_Delete_Click() {  
        this._popup.hide();
        __doPostBack(this._source.name, '');
    }                     
</script>

asp.net code call js code:

<asp:ImageButton ID="btnChild_Delete" runat="server" SkinID="delete" OnClientClick="showChild_Delete(this); return false;"
                                                    CommandName="deleteChild" CausesValidation="False" CommandArgument='<%# Eval(childID) %>' />

C# code:

 if (e.CommandName == "deleteChild")

    {
        hashTable.Add(childID, e.CommandArgument);
        sqlData.GetDataTable(sproc_delChild, hashTable);

        gvChild.SelectedIndex = -1;
        pnlChild_Upload.Visible = false;
        this.upnlChildUpload.Update();

        RefreshChild();
    }

I will appreciate any help.

Answer 1

You would want to do something client-side in javascript prompting them to accept their decision before doing it…

<script type="text/javascript">
    function btnChild_Delete_Click() {  
        this._popup.hide();

        // the _doPostBack is triggering the delete. simply writing something here.
        if (!confirm('Are you sure?')) return;

        __doPostBack(this._source.name, '');
    }                     
</script>

---

EDIT: to do this with a stylized confirmation window I would do the following (example is pseudo-code to exemplify logic flow).

1. Make a DIV for confirmation of the deletion. Stylize it as you like in CSS and hide it (either by making it display:none, or off-screen with margins.

   <div id="confirmationBox">
       <p>Are you sure?</p>
       <button id="doDelete">Delete</button>
   </div>
   

2. Alter your script to call a function that shows/hides the confirmation DIV:

   function buttonConfirmDelete_Click {
       // 1. display the confirmation box.
   }
   
   function buttonDoDelete_Click {
       __doPostBack(this._source.name, '');
       // 2. hide the confirmation box.
   }
   

The result is your existing delete button simply unveils the delete button that actually performs the call back which is now contained within the confirmation popup.

there are certainly more clean ways to do this, but it seems like you are looking for a quick and easy solution.

That answer your question?