Alert confirmation issue - javascript

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>

Related

Need to check user click print button or cancel button in print in laravel

i need to check if user click print button or not in window.print. I tried afterprint but it shows my console message for both print and cancel buttons. How to check if user only click print button
this is jquery code
<button class="btn btn-danger print not_print" >Print invoice</button>
<script>
$(document).ready(function() {
$('.print').click(function(){
window.print();
});
window.addEventListener('afterprint', (event) => {
console.log('After print');
});
});
</script>

How can I set alert confirmation window when delete button pressed

I want to add confirmation window when someone click on delete button, I'm using this code
$(document).ready(function() {
$("#btn_delete").click(function() {
$("#delete_id").val("y");
$("#myform").submit();
});
});
It just delete data without confirmation/alert message, anyone help me to sort out my query.
Thanks
You can use the confirm dialog to have a confirmation dialog displayed
$(document).ready(function () {
$("#btn_delete").click(function (e) {
e.preventDefault();
if (confirm('Do you want to delete')) {
$("#delete_id").val("y");
$("#myform").submit();
}
});
});

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.

click the button then pop up a dialogthen submit the button

<button onclick="productAddToCartForm.submit(this)" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>
js codeļ¼š
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(){
if (this.validator.validate()) {
this.form.submit();
}
}.bind(productAddToCartForm);
The above is the normal step. click the button, then submit the form. now, i want to add one step before the form is submitted. the step is. when click the button, it will pop up a dialog. when close the dialog.there are some content on it. then submit the form.
1, i want to use jquery in productAddToCartForm.submit = function(){....} .if the page have loaded the jquery library.but i don't know how to add jquery code in the function. thank you
You can use jQuery show() and hide().
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(){
if (this.validator.validate()) {
$("#YourPopUp").show('slow', function() {
$('#YourPopUp').hide(1000,'slow', function() {
productAddToCartForm.form.submit();
});
});
}
}
}.bind(productAddToCartForm);
Edit: Here is a jsfiddle example of my answer -> jsfiddle
If your popup window will be an HTML page, you could bind to the click event on your button, display / close the popup and then call form.submit();
Give your button and form an id:
<form id="myForm" action="/formsubmit.html" method="post"></form>
<button id="submitButton" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>
Then do something like this with jQuery
$(document).ready(function () {
$('#submitButton').click(function (e) {
e.preventDefault(); //prevent the default action
//show your popup
//hide your popup
$('#myForm').submit(); //submit the form
});
});
If there is a button on the popup that the user will click to close it, you could call the submit function by binding to the click event of whatever element is used to close the popup.

jquery modal dialog before form submit

I have a form on a page, and I am trapping the click action on two submit buttons. There is another submit button that is not trapped (i.e. I dont need to show a modal for this button).
So, my obvious problem is that I need to block the submit action when the modal first opens, and I then need to force the submit when the user actually clicks the OK button in the modal. However, because each button has a specific name and value associated with it (which the back-end script needs to know), a $('#myform').submit() method will therefore not work.
function something(msg) {
var $dialog = $('<div></div>').html(msg).dialog({
autoOpen: false,
title: 'Please confirm...',
modal: true,
buttons: {
"OK": function () {
$dialog.dialog('close');
//submit needs to happen here
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
event.preventDefault();
return false;
}
I would include a hidden field to take on the name and value of the submit button clicked:
<input type="hidden" name="subName" value="" />
$("#submit_button_one").function() {
$("input[name='subName']").attr("name", $(this).attr("name")).val(($(this).val());
something("message");
return false;
});
$("#submit_button_two").function() {
$("input[name='subName']").attr("name", $(this).attr("name")).val(($(this).val());
something("message");
return false;
});
function something(msg, act) {
// ...
//submit needs to happen here
$('#myform').submit()
}

Categories