We Keep Coding

gridview row delete confirmation box

I need to show a delete conformation box on Gridview delete. with OnClientClick confirmation box, I am showing a simple Internet explore box for delete confirmation. Is it possible to show a fancy box for this. below is my JavaScript code that exists inside the gridview code:
OnClientClick="return DeleteItem();"
Below is my Gridview
<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5" GridLines="None" OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting">
<Columns>
<asp:BoundField DataField="CartID" Visible="false" HeaderText="CartID" />
<asp:BoundField DataField="item" HeaderText="Item" HeaderStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-CssClass="ss-row" />
<ItemTemplate>
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" title='Remove' CommandName="delete" OnClientClick="return DeleteItem();" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
This is my Javascript function:
<script type="text/javascript">
function DeleteItem() {
if (confirm("Delete this Location?")) {
return true;
} else {
return false;
}
}
</script>
above code is showing this confirmation window:
I want to show something like this:
any help will be apprecaited.

It's not possible to add css to a confirm box. You can implement your own JavaScript popup.
Alternatively there are many plugins that can do this. One of the most popular JQuery plugins is JQuery UI dialog https://jqueryui.com/dialog/#modal-confirmation
As an as illustration for integrating JQuery UI Dialog with an ASP.NET Gridview, try something like:
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" title='Remove' CommandName="delete" class="button-delete" />
You don't need OnClientClick="return DeleteItem();"
The css class can be used as a reference for an onclick event.
JavaScript:
$(function() {
// Create click handler
$('.ui-search-result-table').on('click', 'button-delete', function(e) {
e.preventDefault($(this)); // $(this) should be a reference to imgbtnDelete
showDialog();
});
// Create the dialog popup
function showDialog(button) {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Remove": function() {
$(button).click(); // This should click imgbtnDelete
},
Cancel: function() {
$(this).dialog("close");
}
}
});
}
});
HTML for popup
<div style="display: none;">
<div id="dialog-confirm" title="Remove Item?">
<p>Are you sure you want to remove this item?</p>
</div>
</div>
Note: This example is for illustration purposes. You will need to have a play around with your solution to get it working.

javascript "beforeunload" event not fire when i use update panel

My problem is after I click a button in update panel and close the window, "beforeunload" event not fire, while when I click another button this event fires properly.
Here is my code:
function dontlogout() //for postback refreshes
{
postback = true;
alert(postback);
}
$(window).bind('beforeunload',function() {
if(postback==false)
{
//my logout code here;
}
else
{
postback = false;
}
});
<asp:Button runat="server" ID="cmdOut" OnClientClick="dontlogout();" Text="next" OnClick="cmdOut_Click"></asp:Button>
<asp:UpdatePanel runat="server" ID="updQuestion" >
<ContentTemplate>
<asp:Button runat="server" ID="cmdNext" OnClientClick="dontlogout();" Text="next" OnClick="cmdNext_Click"></asp:Button>
</ContentTemplate></asp:UpdatePanel>
when i click cmdOut button no problem and when close browser my log out code executed, but when i click cmdNext in update panel and then close the browser my log out code not executed.
How can I solve this problem?

You have to return in the function callback of onbeforeunload
$(window).bind('beforeunload',function() {
if(postback==false)
{
//my logout code here;
// 👈🏼 Ok you can leave because you dont return
}
else
{
postback = false;
return "You cannot leave"; //👈🏼 You cannot leave
}
});

Add the 'Triggers' tag just before the end tag of the update panel
<asp:UpdatePanel runat="server" ID="updQuestion" >
<ContentTemplate>
<asp:Button runat="server" ID="cmdNext" OnClientClick="dontlogout();" Text="next" OnClick="cmdNext_Click"></asp:Button>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="cmdNext" />
</Triggers>
</asp:UpdatePanel>

enable/disable textbox on bases of dropdown list

So I am trying to enable text box if other option is selected from dropdown list
i.e when i select the other option without clicking any button it shows the textbox
code is listed below with js file but its not working need help with this
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$('#type_').change(function () {
if (this.value == 'other') {
$('#other_type').css('display', 'block');
}
else {
$('#other_type').css('display', 'none');
}
});
</script>
<div>
<asp:Label ID="Label1" runat="server" Text="Type : "></asp:Label>
<asp:DropDownList ID="type_" runat="server" style="margin-left: 0px">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
<asp:ListItem>other</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="other_type" runat="server" style="margin-left: 33px; display:none" Width="157px"></asp:TextBox>.......

First, wrap the code with $(function(){}); to bind the click after the page loads.
You're not properly selecting elements. ASP .NET changes the ID property, so you have to use <%= ControlName.ClientID %> to get the generated ID.
Or give a CssClass to the controls.
$(function(){
$('#<%= type_.ClientID %>').change(function () {
if (this.val() == 'other') {
$('#<%= other_type.ClientID %>').css('display', 'block');
}
else {
$('#<%= other_type.ClientID %>').css('display', 'none');
}
});

Show/hide div onclick jquery slowly when i click the asp button its not working

I want to show/hide div slowly using jquery when i click the button. This div will have a result from a database. I want it when it opens, to open in slow motion. I have another problem with the asp button when the div is slided down it returns to slide up again automatic. I think it is from postback. I would appreciate any help.
<script src="script/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("#<%=Button1.ClientID%>").click(function () {
$("#showdivslowly").slideDown(2000);
});
});
</script>
<form id="form1" runat="server">
<div runat="server" id="showdivslowly" style="width:500px; height:200px; background-color:Blue" visible="false">Welcome</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>

Please try the following code
<script src="script/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("#<%=Button1.ClientID%>").click(function () {
$("#showdivslowly").slideDown(2000);
return false;
});
});
<div id="showdivslowly" style="width:500px; height:200px; background-color:Blue; display: none;">Welcome</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
Thanks,
Amit

how to show inner on mouse hover of outer div with jquery

i just want to show inner div on mouse hover of outer div.
here is my jquery for show div on mouse hover:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('.thumb').hover(function(){
$('.option').show();
});
});
</script>
and here is my design code:
<asp:Repeater ID="rpt_file_list" runat="server"
onitemcommand="rpt_file_list_ItemCommand"
onitemdatabound="rpt_file_list_ItemDataBound">
<ItemTemplate>
<div class="thumb" align="center">
<table>
<tr>
<td align="center"><asp:Image ID="img1" runat="server" BorderWidth="0px"
ImageUrl="../images/Nofile_Icon1.gif" />
<br/>
<asp:Label ID="lbl_file_length" runat="server" CssClass="normaltext"
Text='<%#"("+ Eval("File_Size")+ " KB )"%>'></asp:Label>
<br/>
<asp:LinkButton ID="lbut_download" runat="server"
CommandArgument='<%# Eval("File_name")+""+Eval("File_ext")%>' CommandName="Download"
Text='<%#Eval("File_Title").ToString().Length > 15 ? Eval("File_Title").ToString().Substring(0, 15) + "..." : Eval("File_Title")%>'
ToolTip='<%#Bind("File_Title")%>'></asp:LinkButton></td>
<td valign="top"><div class="option" align="right" style="display:none">
<table>
<tr><td><asp:ImageButton ID="imbtn_download" runat="server" CommandName="Download" ImageUrl="../images/download.gif" ToolTip="Download"/></td></tr>
<tr><td><asp:ImageButton ID="ImageButton5" runat="server" CommandName="Preview" ImageUrl="../images/view.gif" ToolTip="Preview"/></td></tr>
</table>
</div></td>
</tr>
</table>
</div>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblErrorMsg" runat="server" Text="No files found." Visible="false" ForeColor="Red">
</asp:Label>
</FooterTemplate>
</asp:Repeater>
how ever it's not work properly
please help me...

You need to find the descendant element of the hovered thumb, also you need to use toggle() so that it will get hidden when mouse leaves
$(document).ready(function () {
$('.thumb').hover(function () {
$(this).find('.option').toggle();
});
});

are you looking for this
$(document).ready(function () {
$('.thumb').mouseover(function () {
$('.option').show();
});
$('.thumb').mouseout(function () {
$('.option').hide();
});
});

You just need to find the options
$(document).ready(function(){
$('.thumb').hover(function(){
$(this).find('.option').toggle(); //this will take care of show hide
});
});

$(document).ready(function(){
$(".thumb").hover(function(){
$(".option").toggle();
});
});
fiddler http://jsfiddle.net/6a6Fx/1/

hover() take two handler which are fired when your mouse enter the div and when your mouse leave the div. Also, you can use $(this) to target current hover .thumb div and find() to find the child with class option under your current hovered .thumb:
$(document).ready(function () {
$(".thumb").hover(function() {
$(this).find('.option').show();
}, function() {
$(this).find('.option').hide();
});
});
or you can use toggle() to toggle between show and hide instead of two separate function:
$(document).ready(function () {
$('.thumb').hover(function () {
$(this).find('.option').toggle();
});
});

I think you are trying to show and hide a child element if you mouse over an element, you can try this code which will work perfectly for your scenario.
Try Demo # http://jsfiddle.net/FTnsn/
$(function() {
$('.thumb').hover(
function() {
$(this).find('.option').toggle();
});
});
Let me know if I misinterpret your problem...