We Keep Coding

How to block the popups alert on beforeUnload while using custom alert popup?

I am using JqueryUI for custom Confirm box when user clicks on a button.
Here is the script,
function exit() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Restore": function () {
callClick();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
Here is the HTML code
<asp:Button ID="btnExit" runat="server" Text="Exit" OnClientClick="exit()" />
<div id="dialog-confirm" title="Proceed Confirmation?">
<p>Are you sure you want to exit?</p>
</div
When user click on proceed button i want to call another function.
window.onbeforeunload = null;
function callClick() {
$('#test').click()
}
But as soon as button is clicked alert popups appear along with my custom made alert popup.
i wish to disable the default popup.
please see below image for referrence.

Try to use this method window.onbeforeunload = function(event){} to catch this event.

Bootstrap to hide popover need press button twice

I'm using Bootstrap v3.3.7
I need to click twice to hide a popover.
I have problem like this https://jsfiddle.net/hik200/ejxkv8hb/1/
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false; });

I edited your fiddle, you were adding the click listener once on your button click, which did not actually trigger the close function :
function ClosePopover() {
$("#destroy").click(function(){
$("[data-toggle='popover']").popover('hide');
});
console.log('asd');
}
this is good :
function ClosePopover() {
$("[data-toggle='popover']").popover('hide');
console.log('asd')
}

Alert confirmation issue

I have a button on which when the user clicks to delete project on the site a confirmation pops up , I am using alertify.js for this I have the button etc working however when clicking delete the confirmation box appears and automatically deletes project and vanishes before I can either click ok to confirm or cancel.. ?
here is the html
<button type="submit" class="btn btn-link btn-sm" Onclick="return ConfirmDelete();" style="margin:5px;"></button>
here is javascript code
function ConfirmDelete()
{
alertify.confirm("This is a confirm dialog", function (ev) {
ev.preventDefault();
alertify.success("You've clicked OK");
}, function(ev) {
ev.preventDefault();
alertify.error("You've clicked Cancel");
});
}
how can I prevent this from happening ?

You can't prevent form submission in this case because custom confirmation is non-blocking asynchronous dialog. You can stop it however by always returning false and submitting form manually (programmatically) in case of Ok button press:
function ConfirmDelete(button) {
alertify.confirm("This is a confirm dialog", function() {
button.form.submit()
// alertify.success("You've clicked OK", function() {
// button.form.submit()
// });
}, function() {
alertify.error("You've clicked Cancel");
});
return false;
}
For this make sure to pass button reference to your function:
<button type="submit" onclick="return ConfirmDelete(this)">ConfirmDelete</button>

Using onclick on an <a> element

I have an a element containing an href attribute. Clicking on it would delete data so I want the user to confirm that action. The href attribute refers to a php file with an id of the data that will be deleted in the GET parameter. I've added an onclick attribute, that should execute the following piece of JS (it shows a Semantic UI modal that asks for confirmation):
confirmmodal = function () {
beforeunload = function () {
$('.ui.basic.modal')
.modal({
closable: false,
onDeny: function () {
return false;
},
onApprove: function () {
return true;
}
})
.modal('show')
;
}
}
But when I run this it still goes to the page that would delete the data (although I haven't built it yet, so nothing is deleted). Would there be an option that gives the onclick attribute priority over the href attribute somehow?

You need to add event.preventDefault() at the end of your code.
Eg:
Delete
function showDialog(e) {
// custom code to show dialog here
e.preventDefault();
}

Okay, I got there with a few tweaks on the script, taking gavgrif's comment into account as well.
I made the <a> element a little different, so it won't contain an href attribute anymore:
<a title="Delete post" onclick="confirmmodal(this)" data-postid="'. $row['postnr'] .'"><i class="large delete middle aligned icon"></i></a>
Now, if the icon is clicked, the postid is available for the JS as well, so we can just refer to that in the GET parameter when the confirm button is clicked:
confirmmodal = function (a) {
$('.ui.basic.modal')
.modal({
closable: false,
onDeny: function () {
return true;
},
onApprove: function () {
window.location.href = "deletepost.php?id=" + a.dataset.postid
return true;
}
})
.modal('show')
;
}
Which is a semi-ugly fix, but it's not that many more lines, and I don't know s*** about JQuery :)
Thanks for all the help, I almost got there with preventDefault() but I couldn't continue if the action was confirmed, so this is an easier solution.

Postback from jQuery Modal Dialog by invoking ASP.NET Button Click

I have a ASP.NET web forms application. I am trying to show a Modal Dialog for confirmation when user clicks on Submit button. I am using OnClientClick of the Button to call a JavaScript function. The function opens the modal dialog if Page Validation is successful. When the user clicks on Yes button of modal dialog, I want the form to be submitted. I tried _doPostback(btn, 'OnClick'), btn.trigger('click') and btn.click(). I can see the modal dialog and the Cancel button works. But when I click on Yes, Page is not Posting. Please see the below code and help me. Thanks!
ASPX:
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"
OnClientClick="clientValidate();return false;"/>
<div id="alert" style="display: none">
Are you sure you want to submit?
</div>
JavaScript:
$(document).ready(function () {
$('#alert').dialog({
title: 'Confirm',
modal: true,
autoOpen: false,
buttons: {
Yes: function () {
var btn = document.getElementById('<%=btnSubmit.ClientID%>');
//_doPostback(btn, 'OnClick');
//btn.trigger('click');
//btn.click();
// Above three didn't work! :(
},
Cancel: function () {
$(this).dialog('close');
}
}
});
});
function clientValidate() {
var btnsubmit = document.getElementById(<%=btnSubmit.ClientID%>);
if (Page_ClientValidate()) {
$('#alert').dialog('open');
}
}
UPDATE:
Corrected _doPostBack() to __doPostBack(). The page posts now. But btnSubmit_Click in not getting called.

Your doPostBack call is wrong. It should be __doPostBack() not _doPostBack() - there are supposed to be two underscores, you have one. Which is probably why it failed to begin with.
Try this instead:
buttons: {
Yes: function () {
var btn = document.getElementById('<%=btnSubmit.ClientID%>');
__doPostback(btn, 'OnClick');
},
UPDATE
Try this:
In your code behind add this in your page load function
if (Page.IsPostBack)
{
var param = Request["__EVENTARGUMENT"];
if (target == "Submit")
btnSubmit_Click(sender, e);
}
In your Javascript you would do
__doPostBack(btn, 'Submit');
That should do it.