Ok, I’m going to bite.
And the REASON is that I went through this, and the working examples are HORRID – BEYOND suffering!!
So, let’s work through this.
First up, unlike JavaScript (js) “alert” or “confirm”?
Most web stuff and including jQuery.UI does NOT halt, nor does it block code.
This means our “image” button “on click” can’t be used to return true or false, since our dialog does NOT wait. We thus have to get the results of the dialog AND THEN run that delete button code.
Given above?
Then most simple is placing a hidden delete button into that grid. We then have our jQuery.UI “click” that delete button for us.
jQuery.ui expects to “operate” on a jQuery selector. That means $(“please select this thing”)
Often that is some control or button, but for dialogs, most often that is a div you place on the page (and hide it --- FYI: note how we hid the jQuery.UI dialog "div" and ALSO how we hide the delete button with style="display:none").
So, let’s add our delete button – right below the image button (and by the way, you can use an asp.net button here – you’re not limited to an image button).
So, ONLY job of image button is to NOW call our jquery dialog – but it CAN NOT run our server side delete code.
So, let’s add that delete button.
We MOVE the delete stuff to this button FROM the image button.
So, we have this now:
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="imgbtnDelete" runat="server"
ImageUrl="~/Images/delete1.png" ToolTip="Click To Delete"
AlternateText="Click To delete"
OnClientClick="myclick(this.id);return false;"
/>
<asp:Button ID="MyDelete" runat="server" Text="del"
CommandName="MyDelete"
CommandArgument='<%# Eval("CartID") %>'
style="display:none"/>
</ItemTemplate>
</asp:TemplateField>
So, we WILL RETURN false and NOT have that image button server side click run, or do a post-back.
So, change the image button (to call our simple js function.
NOTE HOW we moved the features and information to our hidden "my delete" button.
As FYI:
Remember in a grid view, the commandName has SPECIAL meaning here. So, if we fill out both CommandName and CommandArgument, then the GridView “row command” event will fire!!!
And it looks like you doing that now anyway (using row command).
And here is the script + markup:
</asp:GridView> ---- end of your gridview
<div id ="mydialog" style="display:none" runat="server">
<h2>Do you really want to delete?</h2>
</div>
<script>
function myclick(mycontrolid) {
var mydiv = $('#mydialog');
mydiv.dialog({
autoOpen: false, modal: true, title: 'Delete?', width: '25%',
position: { my: 'top', at: 'top+150' },
buttons: {
'ok': function () {
vbtns = '#' + mycontrolid.replace('imgbtnDelete', 'MyDelete');
$(vbtns).click();
},
'cancel': function () {
mydiv.dialog('close');
}
}
});
mydiv.dialog('open');
}
</script>
And that is ALL you need here (remove that other "initialize" js junk you have).
The result should look like this:
So above is about the least amount of code for this to work. There are a dozen different ways to do this. But above is I think quite simple.
So, I have suggested the above since we in js do a “click()” of our delete button, and thus your existing code stub in the on-command row event can remain in place as you no doubt have it now. (So the suggested solution here takes into account your existing setup).
And for final good measure? our delete command will look like this:
Protected Sub GridView1_RowCommand(sender As Object, e As GridViewCommandEventArgs) Handles GridView1.RowCommand
If e.CommandName = "MyDelete" Then
Using cmdSQL As New SqlCommand("DELETE FROM tblHotels where ID = " & e.CommandArgument,
New SqlConnection(My.Settings.Test3))
cmdSQL.Connection.Open()
cmdSQL.ExecuteNonQuery()
End Using
LoadGrid() ' re-load the grid
End If
End Sub
Note that you probably did call your code to load the grid up on first post (and NOT additonal post backs, but as above shows, WHEN you delete, you need to re-load the grid, since it does have a view state, and without a re-load of the grid view, then that deleted row WILL remain in view.
Edit: ----------------
It looks like the posted code DOES NOT include jQuery.UI.
You need BOTH jQuery, and ALSO need jQuery.UI. They are two separate libriies.
Also, jQuery.UI ALSO needs a style sheet, and it MUST be placed before the jQuery.UI referance.
The screen shots and working test code, starting at the "body" tag in the asp.net web form page looks like this:
<body>
<form id="form1" runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" SortExpression="HotelName" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="Button2" runat="server" Text="Button"
OnClientClick="myclick(this.id);return false;"
/>
<asp:Button ID="MyDelete" runat="server" Text="Button3"
CommandName="MyDelete"
CommandArgument='<%# Eval("ID") %>'
style="display:none"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id ="mydialog" style="display:none" runat="server">
<h2>Do you really want to delete?</h2>
</div>
<script>
function myclick(mycontrolid) {
var mydiv = $('#mydialog');
mydiv.dialog({
autoOpen: false, modal: true, title: 'Delete?', width: '25%',
position: { my: 'top', at: 'top+150' },
buttons: {
'ok': function () {
vbtns = '#' + mycontrolid.replace('Button2', 'MyDelete');
$(vbtns).click();
},
'cancel': function () {
mydiv.dialog('close');
}
}
});
mydiv.dialog('open');
}
</script>
</form>
</body>
Note I did place the jQuery and the jQuery.UI script references right inside of the form tag, but often users will place the references inside of the "head" tag.
but for ease of posting - I have included the jQuery, ad jQuery.UI references inside of the "form" tags.
