We Keep Coding

swal on mouse click

The following example ONE is from https://lipis.github.io/bootstrap-sweetalert/. While clicking anywhere outside of the alert box, the alert box won't go away. That's what I expected.
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
Another example TWO is from https://sweetalert2.github.io/. It behaved in another way. While clicking anywhere outside of the alert box, the alert box is gone.
Swal.fire({
title: '<strong>HTML <u>example</u></strong>',
type: 'info',
html:
'You can use <b>bold text</b>, ' +
'links ' +
'and other HTML tags',
showCloseButton: true,
showCancelButton: true,
focusConfirm: false,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Great!',
confirmButtonAriaLabel: 'Thumbs up, great!',
cancelButtonText:
'<i class="fa fa-thumbs-down"></i>',
cancelButtonAriaLabel: 'Thumbs down'
})
In my code base as the follows, it behaved the same way as the example TWO. While clicking anywhere outside of the alert box, the alert box is gone.
How to fix it so that the alert box won't be gone while clicking anywhere outside of the alert box? What could be the version of my sweetalert ?
swal({
title: "Message:",
text: "Here is some detailed message",
type: "warning",
buttons: {
to_refresh: {
text: "Refresh the current view",
visible: true,
closeModal: true
},
to_close: {
text: "Back to Main Menu!",
visible: true,
closeModal: true
},
},
}).then(value => {
if (value === 'to_refresh') {
// window.location.href = window.location.href;
location.reload(true);
} else {
window.location.href = "to some other link"
}
});

depending on which Swal version you are using.
For SweetAlert 2:
allowOutsideClick: false
for SweetAlert (version 1):
closeOnClickOutside: false

SweetAlert confirm redirect

I've got this function to reset the game after the user presses delete and then presses ok again.
function confirmReset() {
swal({
title: "Are you sure you want to reset your game?", text: "You will not be able to recover your game!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success"),
function(){
window.location.href = "includes/php/reset.php?naam=<?php echo $naam ?>";
}
});
}
it works if i do the window.location.href at the place were the second swal('deleted'... etc) is at , but if i use a second function after the user preses OK aswell it wont fire the window.location.href

Try this code :-
function confirmReset() {
swal({
title: "Are you sure you want to reset your game?", text: "You will not be able to recover your game!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(){
swal({
title: "Deleted!",
text: "Your imaginary file has been deleted.",
type: "success",
//timer: 3000
},
function(){
window.location.href = "/";
})
});
}

By adding a conditional statement & .then, you can redirect on the "OK" Button, and no need to implement the timer. I use this particular method for API calls.
function confirmReset() {
swal({
title: "Are you sure you want to reset your game?",
text: "You will not be able to recover your game!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Continue to .....',
'success'
).then(function() {
window.location = "/";
})
}
}

Sweet Alert confirm dialog disappears before response?

I have a problem with Sweet Aler confirm dialog. When I click the delete icon, the Sweet Alert dialog shows for less then a second and then disappears and delete the element. With other words I don't have the chance to click "Delete" or "Cancel". How to stop this dialog to let me choose an option?
<i class="fa fa-trash-o fa-2x pull-right trashbin"></i>
---
<script type="text/javascript">
document.querySelector('i.trashbin').onclick = function(event){
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
};
</script>

Try adding event.preventDefault(); after:
document.querySelector('i.trashbin').onclick = function(event) {

You must replace the 'src' value from the 'a' tag with '#' and pass the 'delete=20' to the function. Then in that function if user clicks 'yes', redirect to the page specified with parameter that you passed to it. This solved my problem. I hope helps you too.
** Edited **
<i class="fa fa-trash-o fa-2x pull-right trashbin"></i>
---
<script type="text/javascript">
document.querySelector('i.trashbin').onclick = function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}).then(function () {
swal({timer: 1000, title: "Deleted!", type: "success"});
setTimeout(function goAndDel() {
window.location.assign("insert.php?delete=20");
}, 1000);
});
}
</script>

sweet alert continue submitting form on confirm

I've this sweetalert triggered on submit of a form.
$(".swa-confirm").on("submit", function(e) {
e.preventDefault();
swal({
title: $(this).data("swa-title"),
text: $(this).data("swa-text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: $(this).data("swa-btn-txt"),
closeOnConfirm: false,
html: false
}, function() {
}
);
});
but on clicking confirm I want it to continue submiting the form...
Bad ideas come to mind, like:
var confirmed = false;
$(".swa-confirm").on("submit", function(e) {
var $this = $(this);
if (!confirmed) {
e.preventDefault();
swal({
title: $(this).data("swa-title"),
text: $(this).data("swa-text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: $(this).data("swa-btn-txt"),
closeOnConfirm: true,
html: false
}, function() {
confirmed = true;
$this.submit();
});
}
});
or moving swa to button click instead of on submit, and using on submit of a form.
but I don't like this solution, it looks frankesteini to me. Surely there is a better way

$('#btn-submit').on('click',function(e){
e.preventDefault();
var form = $(this).parents('form');
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(isConfirm){
if (isConfirm) form.submit();
});
});

I know this is late but it might help someone in the future, I've used this with success for submitting forms with sweetalert confirmations.
$('#form_id').submit(function (e, params) {
var localParams = params || {};
if (!localParams.send) {
e.preventDefault();
}
//additional input validations can be done hear
swal({
title: "Confirm Entry",
text: "Are you sure all entries are correct",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#6A9944",
confirmButtonText: "Confirm",
cancelButtonText: "Cancel",
closeOnConfirm: true
}, function (isConfirm) {
if (isConfirm) {
$(e.currentTarget).trigger(e.type, { 'send': true });
} else {
//additional run on cancel functions can be done hear
}
});
});

Here's another example, asking the user to confirm via checkbox.
HTML
<form id="myForm">
<button type="submit" id="btn-submit">Submit</button>
</form>
JavaScript
$(document).on('click', '#btn-submit', function(e) {
e.preventDefault();
swal({
title: 'Confirm',
input: 'checkbox',
inputValue: 0,
inputPlaceholder: ' I agree with the Terms',
confirmButtonText: 'Continue',
inputValidator: function (result) {
return new Promise(function (resolve, reject) {
if (result) {
resolve();
} else {
reject('You need to agree with the Terms');
}
})
}
}).then(function (result) {
$('#myForm').submit();
});
});

I believe this is a little more elegant:
$(".swa-confirm").submit(function (e) {
e.preventDefault();
swal({
title: $(this).data("swa-title"),
text: $(this).data("swa-text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: $(this).data("swa-btn-txt"),
closeOnConfirm: false,
html: false
}, function(){
$(".swa-confirm").off("submit").submit();
});
});

function testalert(){
swal(
{
title : "Are you sure?",
text : "You want to save?",
type : "warning",
allowEscapeKey : false,
allowOutsideClick : false,
showCancelButton : true,
confirmButtonColor : "#DD6B55",
confirmButtonText : "Yes",
showLoaderOnConfirm: true,
closeOnConfirm : false
},
function (isConfirm) {
if (isConfirm) {
profileinfo.submit();
return true;
}
return false;
}
);
}

var form = $(this).parents('form');
swal({
title: "Are you sure?",
icon: "warning",
buttons:[
'No, cancel it!',
'Yes, I am sure!'
],
}).then(function(isConfirm){
if(isConfirm){
form.submit();
}
});

100% Working!!
Do some little trick using attribute. In your form add an attribute like data-flag in your form, assign "0" as false.
<form class="swa-confirm" data-flag="0">
//your inputs
</form>
In your jquery.
$(".swa-confirm").on("click", function(e) {
$flag = $(this).attr('data-flag');
if($flag==0){
e.preventDefault(); //to prevent submitting
swal({
title: $(this).data("swa-title"),
text: $(this).data("swa-text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: $(this).data("swa-btn-txt"),
closeOnConfirm: true,
html: false
}, function( confirmed ) {
if( confirmed ){
// if confirmed change the data-flag to 1 (as true), to submit
$('.swa-confirm').attr('data-flag', '1');
$('.swa-confirm').submit();
}
});
}
return true;
});

Apply the class .swa-confirm to the input submit
$(".swa-confirm").on("click", function(e) {
e.preventDefault();
swal({
title: $(this).data("swa-title"),
text: $(this).data("swa-text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: $(this).data("swa-btn-txt"),
closeOnConfirm: true,
html: false
}, function( confirmed ) {
if( confirmed )
$(this).closest('form').submit();
});
});
First prevent the button event. After, launch the sweetalert and if "confirmed" is true then submit #my-form element.
Sorry for my bad english, regards from Mexico, I used Google translate :v.

You can use this
$('#deleteamc').on('click',function(e) {
event.preventDefault();
var form = this;
swal({
title: "Are you sure?",
text: "All data related to this AMC ID will be parmanently deleted",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, DELETE it!",
cancelButtonText: "No, cancel please!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
form.submit();
} else {
swal("Cancelled", "AMC Record is safe :)", "error");
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" id="deleteform">
<input type="hidden" name="amccode" id="amccode" value="<?php echo $row['amccode']; ?>">
<button class="btn btn-danger" id="deleteamc" name="delete" type="submit">
<i class="fa fa-minus"></i>
Delete
</button>
</form>

Just Replace
You code is fine just replace
$this.submit(); to $( "button[name=submit]" ).trigger('click');

Just Do like this one
$('.finalpost').click(function (e){
e.preventDefault();
let form = $(this).parents('form');
swal({
title: 'Are you sure?',
text: 'Before post please recheck all transaction and your closing balance is correct, As you cannot alter/delete the transaction after post?',
icon: 'warning',
buttons: ["Make Changes", "Yes!"],
}).then(function(value) {
if(value){
form.submit();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<input type="submit" value="Post" name="post" class="btn btn-primary finalpost" style="background:#ff5733 !important; color:white !important;">

If you guys want Sweet alert with native HTML form validation, check this way:
$(document).on("click", ".submit", function (e) {
e.preventDefault();
var $invoiceForm = $('.form-create');
if (!$invoiceForm[0].checkValidity()) {
$invoiceForm[0].reportValidity()
} else {
swal({
title: "Are you sure?",
text: "Did you check all the inputs and calculations?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, Submit!",
}).then(function (result) {
$invoiceForm.submit();
});
}
});

Here's the Vanilla Javascript version should you have multiple submit buttons. No jQuery is needed.
<button class="submit" type="submit"
data-confirm="Are you sure you want to submit this?"
data-icon="warning"
data-color="#e55353">
Submit
</button>
document.querySelectorAll('.submit').forEach(item => {
item.addEventListener('click', function(event){
event.preventDefault();
let form = this.closest('form');
Swal.fire({
icon: this.getAttribute('data-icon'),
text: this.getAttribute('data-confirm'),
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'No',
iconColor: this.getAttribute('data-color'),
confirmButtonColor: this.getAttribute('data-color'),
}).then((result) => {
if (result.isConfirmed) {
form.submit();
}
})
})
});

How to post to an controller action result method using sweet alert? mvc5 c#

Im using sweet alerts for my web application. I have come across posts with the similar problem how ever they where never answered accordingly. i want to know how would i go about posting to an action result method once the user confirms. supporting code is below . help please.
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: " warning ",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: " No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe: ) ", " error ");
}
});

I am not sure where you form is, but assuming it's id is form, then something like below may get you started:
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: " warning ",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: " No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm) {
if (isConfirm) {
// once confirm, post your form
$("#form").submit();
} else {
swal("Cancelled", "Your imaginary file is safe: ) ", " error ");
}
});