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

jQuery Sweet Alert Unexpected 2nd argument error

I am using sweet alert plugin and getting an error. I have tried every example but can't understand what this error means
Uncaught SweetAlert: Unexpected 2nd argument (function() {
setTimeout(function() {ckquote
My code:
<script type="text/javascript">
$('.delete-confirm').on('click', function() {
var postID = $(this).val();
console.log(postID);
swal({
title: "Are you sure?",
text: "If you delete this post all associated comments also deleted permanently.",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
}, function() {
setTimeout(function() {
$.post("../delete.php", {
id: postID
},
function(data) {
swal({
title: "Deleted!",
text: "Your post has been deleted.",
type: "success"
},
);
}
);
}, 50);
});
});
</script>
My whole error on console window:
sweetalert.min.js:1 Uncaught SweetAlert: Unexpected 2nd argument (function() {
setTimeout(function() {
$.post("../delete.php", {
id: postID
},
function(data) {
swal({
title: "Deleted!",
text: "Your post has been deleted.",
type: "success"
},
);
}
);
}, 50);
})

Sweet Alert can be invoked in two ways
1, 2, or 3 strings parameters
swal(["title",] "text" [, "iconname"])
a single object parameter containing all the options:
swal({
title: "Are you sure?",
text: "If you delete this post all associated comments also deleted permanently.",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
});
If you want to do something with the response, it returns a promise, and you can retrieve the value with .then:
swal({
title: "Are you sure?",
text: "If you delete this post all associated comments also deleted permanently.",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
}).then(function() {
setTimeout(function() {
$.post("../delete.php", {
id: postID
},
function(data) {
swal({
title: "Deleted!",
text: "Your post has been deleted.",
type: "success"
}, );
}
);
}, 50);
});

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 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();
}
})
})
});

SweetAlert confirm with Ajax request

I'm new at Javascript - coding it actually for the first time.
I'm trying to do a button with delete confirmation with SweetAlert. Nothing happens when I press the button with onclick="confirmDelete()". This code may be just crab, but here it is:
<script type="text/javascript">
function confirmDelete() {
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
)},
$.ajax({
url: "scriptDelete.php",
type: "POST",
data: {id: 5},
dataType: "html",
success: function () {
swal("Done!","It was succesfully deleted!","success");
}
});
}
</script>
Delete
Can I add any alert if deleting fails?

If I understand your question correctly, you are asking how to handle error condition in ajax request. Ajax settings has an error attribute and it can be used like this
$.ajax({
.... other settings you already have
error: function (xhr, ajaxOptions, thrownError) {
swal("Error deleting!", "Please try again", "error");
}
});
Also, you are invoking swal in a wrong way. Swal has a callback like this
swal({settings}, function(isConfirm){});
Overall code would look something like this
function confirmDelete() {
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) return;
$.ajax({
url: "scriptDelete.php",
type: "POST",
data: {
id: 5
},
dataType: "html",
success: function () {
swal("Done!", "It was succesfully deleted!", "success");
},
error: function (xhr, ajaxOptions, thrownError) {
swal("Error deleting!", "Please try again", "error");
}
});
});
}
Here is a demo http://jsfiddle.net/dhirajbodicherla/xe096w10/33/

Try This Code.It's Working fine for me.
$('.delete-confirm').on('click', function() {
var postID = $(this).val();
console.log(postID);
swal({
title: "Are you sure?",
text: "If you delete this post all associated comments also deleted permanently.",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
}, function() {
setTimeout(function() {
$.post("delete.php", {
id: postID
},
function(data, status) {
swal({
title: "Deleted!",
text: "Your post has been deleted.",
type: "success"
},
function() {
location.reload();
}
);
}
);
}, 50);
});
});

You have doing mistake in swal({)} it should be swal({})
Updated code :
<script type="text/javascript">
function confirmDelete() {
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) {
$.ajax({
url: "scriptDelete.php",
type: "POST",
data: {id: 5},
dataType: "html",
success: function () {
swal("Done!","It was succesfully deleted!","success");
}
});
}else{
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
})
}
</script>

I finally got this to work for that one dude 3 years from now.
function dropConfig(config_index){
swal({
title: "WARNING:",
text: "Are you sure you want to delete this connection?",
type: "warning",
inputType: "submit",
showCancelButton: true,
closeOnConfirm: true,
timer: 2000
}, //end swal }
function(isConfirm) {
if (isConfirm == true) {
//do the ajax stuff.
$.ajax({
method: "POST",
url: "/drop_config",
data: {"curr_config": $("#curr_conf_conn_name_" + config_index).val()}})
.success(function(msg) {
show_notification(msg,"success");
setInterval(function() {.reload();
}, 2500);})
.error(function(msg) {show_notification(msg.responseText,"danger");});
} // end if }
}); // end function } & end swal )
} // end function }