Editable Gridview Row delete click Confirm function returns before the user response

Question

I have Delete button in my editable Gridview in asp.net and on delete click i have my function which shows confirmation popup on user feedback i want to delete or not but the issue is before the user feedback function returns it's output which is always false. Below is onclientclick of delete button

OnClientClick="return confirmDelete();"

and Below is the function definition

function confirmDelete() {
            
            var isDelete = false;
             
             showPopup(null, function (response) {
                debugger;
                 if (response == "btnYes") {
                    return true;
                } else {
                    return false;
                }
            });
            return false;
            }

Can anyone guide me where should i change so that i get the delete call at backend after the user's response ?

Answer 1

ok, the problem as noted? You don't show the js code for the ShowPopup().

but, lets assume you are using jQuery.UI (dialog) or some such.

the problem as noted, is MOST web code (js) is asynchronous. So what happens is you click on the button - the onclient code runs - but DOES NOT HALT or wait like confirm does in js. So, now the dialog displays, but the button click STILL runs the server side code stub because your showpopup() code does NOT halt. And in fact NEAR ALL web code works this way. So if you use a bootstrap dialog, or better yet a jquery.UI dialog, then you have to setup the function call a bit different.

What will happen:

You click on the button. The js code runs, displays the dialog (but returned false so the server side button code don't run). The user now deals with the dialog - say they hit "ok" or "confirm". Now, what you do is setup that function to return true, and click the button again (in js), and it will return true or false based on your choice , and thus you have conditonal running of the server side button based on that choice.

Here is a working example with jQuery.UI. Note how we scoped a booleand flag to make this work.

So, we now have:

<asp:Button ID="btnDelete" runat="server" Text="Delete" 
  
  OnClientClick = "return mydeleteprompt(this)" />    

So, say we have some delete button on the page.

Now, our jQuery.UI code looks like this:

<script>

    mydelpromptok = false
    function mydelprompt(btn) {

        if (mydelpromptok) {
            return true
        }

        var myDialog = $("#mydelprompt")
        myDialog.dialog({
            title: "Confirm delete",
            modal: true,
            width: "320px",
            resizable: false,
            appendTo: "form",
            autoOpen: false,
            buttons: {
                ok: function () {
                    myDialog.dialog("close")
                    mydelpromptok = true
                    btn.click()
                },
                cancel: function () {
                    myDialog.dialog("close")
                }
            }
        })
        myDialog.dialog('open')
        return false
    }

Note how we setup the function to return FALSE!!!. So, you now click on the button, the dialog pops up - and we ALREADY returned false!!! Now, when you hit ok, or confirm in the dialog, note how we set that flag = true and CLICK the button again in js code. But now when the fucntion runs, it will return true based on that flag, and now the server side button code will run. The same idea can work with your code - we just don't know how the ShowPopUP works - but the same idea will work.

Since the code cannot halt, then we just setup the code to always return false AND ALSO popup the dialog. When the user makes the choice, we set that flag, and click the button again. Now, it will return true (or false), and thus we can have conditional run of that button, but we done this without halting code - which as I noted, is VERY rare allowed in web code these days - it all async code now, and you thus now have to code with this non halting code concept in mind.

so, now lets assume the button is in the grid, say like this:

   <asp:GridView ID="GridView1" runat="server" 
        AutoGenerateColumns="False" 
        DataKeyNames="ID" CssClass="table table-hover  borderhide" >
      <Columns>

        <asp:TemplateField  HeaderText="HotelName" >
            <ItemTemplate><asp:TextBox id="HotelName" runat="server" Text='<%# Eval("HotelName") %>' /></ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField  HeaderText="FirstName" SortExpression="ORDER BY FirstName" >
            <ItemTemplate><asp:TextBox id="FirstName" runat="server" Text='<%# Eval("FirstName") %>' /></ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField  HeaderText="LastName" >
            <ItemTemplate><asp:TextBox id="LastName" runat="server" Text='<%# Eval("LastName") %>' /></ItemTemplate>
        </asp:TemplateField>

       <asp:TemplateField  HeaderText="City" >
            <ItemTemplate><asp:TextBox id="City" runat="server" Text='<%# Eval("City") %>' /></ItemTemplate>
        </asp:TemplateField>

          <asp:TemplateField HeaderText="Delete">
              <ItemTemplate>
                  <asp:Button ID="btnDelete" runat="server" Text="Delete"
                      OnClientClick = "return mydelprompt(this);"
                      OnClick="btnDelete_Click"
                      />
              </ItemTemplate>
          </asp:TemplateField>
    </Columns>

      </asp:GridView>

So, our code to load this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If IsPostBack = False Then
        LoadGrid()
    End If

End Sub

Sub LoadGrid()

    ' load up our grid
    Using cmdSQL As New SqlCommand("SELECT TOP 10 * from tblHotels  ORDER BY HotelName ",
                    New SqlConnection(My.Settings.TEST4))
        cmdSQL.Connection.Open()

        GridView1.DataSource = cmdSQL.ExecuteReader
        GridView1.DataBind()

    End Using


End Sub

Now, I using jQuery.ui, so our extra markup for that is this:

        <div id="MyDialog" style="display:none">
            <h2>Delete this hotel?</h2>
        </div>

     <script>
        mydelpromptok = false
        function mydelprompt(btn) {

            if (mydelprompt) {
                return true
            }

            myDialog = $("#MyDialog")
            myDialog.dialog({
                title: "Delete this Hotel - confirm?",
                appendTo: "form",
                buttons: {
                    Delete: function () {
                        myDialog.dialog('close')
                        mydelprompt = true
                        btn.click()
                    },
                    cancel: function () {
                        myDialog.dialog('close')
                    }
                }
            })
            return false
        }
   </script>

So, now our delete button code behind is this:

Protected Sub btnDelete_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender

    Dim rRow As GridViewRow = btn.Parent.Parent

    ' get pk, and then delete this row.

    Using cmdSQL As New SqlCommand("DELETE FROM tblHotels Where ID = @ID",
                    New SqlConnection(My.Settings.TEST4))
        cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = GridView1.DataKeys(rRow.RowIndex).Item("ID")
        cmdSQL.ExecuteNonQuery()
    End Using

End Sub

And it looks like this:

so we just dropped a plane jane button into the grid. But, that button click and code behind will not run unless we confirm the nice jQuery.ui dialog.

And in the button click? note how I just grabbed the one grid view row by using .parent. And like all data base operations? We use the PK, so we of course as always set the DataKeys to PK value like for near all grids.

Answer 2

Only the confirm() can hold the script. So if you make your JavaScript as this will work.

function confirmDelete() {
    return confirm('Are you sure you want to delete this record?');
}

The way you have it is just continues after the showPopup appears - but probably you can not even see it because its continue with the postback.

Other way is to make the question, and on a second action call make the delete.