Related
I am able to display sweet alert after the page refresh but I have to click on Ok button which I am getting on sweet alert to redirect the page.Please help me in this.
<?php
echo '<script type="text/javascript">';
echo 'setTimeout(function () { swal("WOW!","Message!","success");';
echo '}, 1000);'
echo 'window.location.href = "index.php";';
echo '</script>';
?>
Just make use of JavaScript promises. Put the then method after swal function. We do not need to use timer features.
For example:
swal({
title: "Wow!",
text: "Message!",
type: "success"
}).then(function() {
window.location = "redirectURL";
});
The promise method .then is used to wait until the user reads the information of modal window and decide which decision to make by clicking in one button. For example, Yes or No.
After the click, the Sweet Alert could redirect the user to another screen, call another Sweet Alert modal window with contains new and subsequent question, go to a external link, etc.
Again, we do not have to use timer because it is much better to control user action. The user could wait for the eternity or take action as a Thanos' or Iron Man's finger snap. 😜
With the use of promises, the code becomes shorter, clean and elegant. 😉
To specify a callback function, you have to use an object as the first argument, and the callback function as the second argument.
echo '<script>
setTimeout(function() {
swal({
title: "Wow!",
text: "Message!",
type: "success"
}, function() {
window.location = "redirectURL";
});
}, 1000);
</script>';
You can use the build-in function timer, i.e.:
swal({
title: "Success!",
text: "Redirecting in 2 seconds.",
type: "success",
timer: 2000,
showConfirmButton: false
}, function(){
window.location.href = "//stackoverflow.com/a/37358578/797495";
});
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
Best and Simple solution, we can add more events as well!
swal({ title: "WOW!",
text: "Message!",
type: "success"}).then(okay => {
if (okay) {
window.location.href = "URL";
}
});
I wasn't able to do that with any swal(sweatAlert) default callback function, so I forced with jquery, got the Ok button class inspecting the element in chrome an made something like this:
<script>
sweetAlert({
title:'Warning!',
text: 'Invalid user or password!',
type:'warning'
},function(isConfirm){
alert('ok');
});
$('.swal2-confirm').click(function(){
window.location.href = 'index.php';
});
</script>
The 'Ok' alert in function(isConfirm) was just a test to see if it would get into this function, if so I should be able to redirect from there, but I wasn't...
So I used jQuery to determine if the button "OK" of swal was clicked by getting it class: ".swal2-confirm' then I could redirect with success...
Hope this helps you all !
PS: I am using php echo to run the script, I din't have to leave php to run it, just use single quotes and you're done !
If anyone needs help, this code is working!
swal({
title: 'Request Delivered',
text: 'You can continue with your search.',
type: 'success'
}).then(function() {
window.location.href = "index2.php";
})
Swal.fire({
title: result.value.title,
icon: result.value.icon,
text: result.value.message,
}).then(function() {
window.location.href = "url";
})
None of the above solutions worked for me, I had to use .then
swal({
title: 'Success!',
text: message,
type: 'success',
confirmButtonText: 'OK'
}).then(() => {
console.log('triggered redirect here');
});
I think this will help. It's same as given by Mr. Barmer. But I have enclosed this within php tags.
Here it goes....
<?php if(!empty($_GET['submitted'])):?>
<script>
setTimeout(function() {
swal({
title: "Congratulaions!",
text: "Signed up successfully, now verify your mail",
type: "success",
confirmButtonText: "Ok"
}, function() {
window.location = "index.php";
}, 1000);
});
</script>
<?php endif;?>
function confirmDetete(ctl, event) {
debugger;
event.preventDefault();
var defaultAction = $(ctl).prop("href");
swal({
title: "Are you sure?",
text: "You will be able to add it back again!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
$.get(ctl);
swal({
title: "success",
text: "Deleted",
confirmButtonText: "ok",
allowOutsideClick: "true"
}, function () { window.location.href = ctl })
// $("#signupform").submit();
} else {
swal("Cancelled", "Is safe :)", "success");
}
});
}
Existing answers did not work for me i just used $('.confirm').hide(). and it worked for me.
success: function(res) {
$('.confirm').hide()
swal("Deleted!", "Successfully deleted", "success")
setTimeout(function(){
window.location = res.redirect_url;
},700);
I did it by using this code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js"></script>
<script>
$(".confirm").on('click',function(){
window.location.href = "index.php";
});
</script>
Thanks.
setTimeout(function(){
Swal.fire({
title: '<span style="color:#fff">Kindly click the link below</span>',
width: 600,
showConfirmButton: true,
confirmButtonColor: '#ec008c',
confirmButtonText:'<span onclick="my2()">Register</span>',
padding: '3em',
timer: 10000,
background: '#fff url(bg.jpg)',
backdrop: `
rgba(0,0,123,0.4)
center left
no-repeat
`
})
}, 1500);
}
function my2() {
window.location.href = "https://www.url.com/";
}
Worked for me!!
<head>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
</head>
<?php
echo "<script>
Swal.fire({
title: 'Do you want to save the changes?',
showCancelButton: true,
confirmButtonText: `Save`,
denyButtonText: `Don't save`,
}).then((result) => {
if (result.isConfirmed) {
window.location = 'www.google.com';
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
})
</script>";
?>
You can use callback function in SweetAlert2, it worked for me.
swal({
title: "Success!",
text: "Example success message",
type: "success"
}, function() {
window.location.href = 'https://some-url';
});
$('.delete-record').on('click', function (e) {
e.preventDefault();
window.url = $(this).attr('href');
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Confirm',
padding: '2em'
}).then(function (result) {
if (result.value) {
console.log(window.url);
window.location.href = window.url;
}
});
});
swal("Payment send successfully", "Thanks for using Npay!", "success")
.then(function() {
router.push("/")
});
I am currently working with sweetalert2 and I am trying to detect when the alert closes. However the DeleteUnsavedImages function is not firing. I thought that assigning the function to the onclose key would work but no luck.
swal({
html: data,
showCloseButton: false,
showCancelButton: false,
width: 800,
showConfirmButton: false,
onClose: DeleteUnsavedImages()
}).then(function () {
});
function DeleteUnsavedImages(){
var test = "-1";
}
Any help would be appreciated :-)
I tested with my sweet alert to confirm the issue, you just need to pass the function name without () and the function will be called inside onClose event handler of swal. Its called passing a reference of the function to call when onClose gets fired of swal.
Make a little change like this:
swal({
html: data,
showCloseButton: false,
showCancelButton: false,
width: 800,
showConfirmButton: false,
onClose: DeleteUnsavedImages // Removed () from here
}).then(function () {
});
function DeleteUnsavedImages(){
var test = "-1";
}
swal({
html: data,
showCloseButton: false,
showCancelButton: false,
width: 800,
showConfirmButton: false,
onClose: () => {
this.DeleteUnsavedImages();
}
})
private DeleteUnsavedImages(){
}
swal({
title: "client",
content: html,
buttons:
{
cancel: {
text: "Close",
visible: true,
closeModal: true,
},
confirm: {
text: "Download",
visible: true,
closeModal: false
}
},
}).then((confirm) => {
if (confirm) {
download();
}
else {
DeleteUnsavedImages();
}
});
function DeleteUnsavedImages(){
var test = "-1";
}
I am able to display sweet alert after the page refresh but I have to click on Ok button which I am getting on sweet alert to redirect the page.Please help me in this.
<?php
echo '<script type="text/javascript">';
echo 'setTimeout(function () { swal("WOW!","Message!","success");';
echo '}, 1000);'
echo 'window.location.href = "index.php";';
echo '</script>';
?>
Just make use of JavaScript promises. Put the then method after swal function. We do not need to use timer features.
For example:
swal({
title: "Wow!",
text: "Message!",
type: "success"
}).then(function() {
window.location = "redirectURL";
});
The promise method .then is used to wait until the user reads the information of modal window and decide which decision to make by clicking in one button. For example, Yes or No.
After the click, the Sweet Alert could redirect the user to another screen, call another Sweet Alert modal window with contains new and subsequent question, go to a external link, etc.
Again, we do not have to use timer because it is much better to control user action. The user could wait for the eternity or take action as a Thanos' or Iron Man's finger snap. 😜
With the use of promises, the code becomes shorter, clean and elegant. 😉
To specify a callback function, you have to use an object as the first argument, and the callback function as the second argument.
echo '<script>
setTimeout(function() {
swal({
title: "Wow!",
text: "Message!",
type: "success"
}, function() {
window.location = "redirectURL";
});
}, 1000);
</script>';
You can use the build-in function timer, i.e.:
swal({
title: "Success!",
text: "Redirecting in 2 seconds.",
type: "success",
timer: 2000,
showConfirmButton: false
}, function(){
window.location.href = "//stackoverflow.com/a/37358578/797495";
});
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
Best and Simple solution, we can add more events as well!
swal({ title: "WOW!",
text: "Message!",
type: "success"}).then(okay => {
if (okay) {
window.location.href = "URL";
}
});
I wasn't able to do that with any swal(sweatAlert) default callback function, so I forced with jquery, got the Ok button class inspecting the element in chrome an made something like this:
<script>
sweetAlert({
title:'Warning!',
text: 'Invalid user or password!',
type:'warning'
},function(isConfirm){
alert('ok');
});
$('.swal2-confirm').click(function(){
window.location.href = 'index.php';
});
</script>
The 'Ok' alert in function(isConfirm) was just a test to see if it would get into this function, if so I should be able to redirect from there, but I wasn't...
So I used jQuery to determine if the button "OK" of swal was clicked by getting it class: ".swal2-confirm' then I could redirect with success...
Hope this helps you all !
PS: I am using php echo to run the script, I din't have to leave php to run it, just use single quotes and you're done !
If anyone needs help, this code is working!
swal({
title: 'Request Delivered',
text: 'You can continue with your search.',
type: 'success'
}).then(function() {
window.location.href = "index2.php";
})
Swal.fire({
title: result.value.title,
icon: result.value.icon,
text: result.value.message,
}).then(function() {
window.location.href = "url";
})
None of the above solutions worked for me, I had to use .then
swal({
title: 'Success!',
text: message,
type: 'success',
confirmButtonText: 'OK'
}).then(() => {
console.log('triggered redirect here');
});
I think this will help. It's same as given by Mr. Barmer. But I have enclosed this within php tags.
Here it goes....
<?php if(!empty($_GET['submitted'])):?>
<script>
setTimeout(function() {
swal({
title: "Congratulaions!",
text: "Signed up successfully, now verify your mail",
type: "success",
confirmButtonText: "Ok"
}, function() {
window.location = "index.php";
}, 1000);
});
</script>
<?php endif;?>
function confirmDetete(ctl, event) {
debugger;
event.preventDefault();
var defaultAction = $(ctl).prop("href");
swal({
title: "Are you sure?",
text: "You will be able to add it back again!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
$.get(ctl);
swal({
title: "success",
text: "Deleted",
confirmButtonText: "ok",
allowOutsideClick: "true"
}, function () { window.location.href = ctl })
// $("#signupform").submit();
} else {
swal("Cancelled", "Is safe :)", "success");
}
});
}
Existing answers did not work for me i just used $('.confirm').hide(). and it worked for me.
success: function(res) {
$('.confirm').hide()
swal("Deleted!", "Successfully deleted", "success")
setTimeout(function(){
window.location = res.redirect_url;
},700);
I did it by using this code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js"></script>
<script>
$(".confirm").on('click',function(){
window.location.href = "index.php";
});
</script>
Thanks.
setTimeout(function(){
Swal.fire({
title: '<span style="color:#fff">Kindly click the link below</span>',
width: 600,
showConfirmButton: true,
confirmButtonColor: '#ec008c',
confirmButtonText:'<span onclick="my2()">Register</span>',
padding: '3em',
timer: 10000,
background: '#fff url(bg.jpg)',
backdrop: `
rgba(0,0,123,0.4)
center left
no-repeat
`
})
}, 1500);
}
function my2() {
window.location.href = "https://www.url.com/";
}
Worked for me!!
<head>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
</head>
<?php
echo "<script>
Swal.fire({
title: 'Do you want to save the changes?',
showCancelButton: true,
confirmButtonText: `Save`,
denyButtonText: `Don't save`,
}).then((result) => {
if (result.isConfirmed) {
window.location = 'www.google.com';
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
})
</script>";
?>
You can use callback function in SweetAlert2, it worked for me.
swal({
title: "Success!",
text: "Example success message",
type: "success"
}, function() {
window.location.href = 'https://some-url';
});
$('.delete-record').on('click', function (e) {
e.preventDefault();
window.url = $(this).attr('href');
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Confirm',
padding: '2em'
}).then(function (result) {
if (result.value) {
console.log(window.url);
window.location.href = window.url;
}
});
});
swal("Payment send successfully", "Thanks for using Npay!", "success")
.then(function() {
router.push("/")
});
I am using swal (http://t4t5.github.io/sweetalert) to get some data from the user when they click on something. I want to then return that from the function I am calling swal in. In other words, for the example below, I want to set the text of the items in labels to the input value. The problem is it seems to return before swal has been closed/data has been entered:
.on('dblclick', function(l) {
labels.text(function (e) {
return swal({
title: "Edit label"
},
function(inputValue){
if(inputValue) {
return inputValue
}
});
})
});
A normal prompt alert is blocking so this can be done, can swal do this?
Thanks
While you can't have Sweet Alerts block, what you can do is use its callback functionality to fire any code that needs the alert to be dismissed first. The examples have a few instances of this. For example, assuming you have a yes/no style alert, there's the file deletion example.
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){
//The callback will only fire on cancel if the callback function accepts an
//argument. So, if the first line were 'function () {' with no argument, clicking
//cancel would not fire the callback.
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
Or the AJAX example:
swal({
title: "Ajax request example",
text: "Submit to run ajax request",
type: "info",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
},
function(){
setTimeout(function(){
swal("Ajax request finished!");
}, 2000);
});
In both of these, the callback isn't fired until the alert is interacted with, and the result of the call is passed in as an argument to the callback.
So say you need to wait until someone clicks okay.
swal({
title: "Delete your account?",
text: "Clicking on continue will permanently delete your account.",
type: "warning",
confirmButtonText: "Continue",
closeOnConfirm: false
}, function () {
swal("Deleted account", "We'll miss you!", "success");
});
Note: The closeOnConfirm/closeOnCancel only needs to be false if you're displaying a subsequent alert in the callback. If it's set to true, it will close the second alert before it's displayed to the user. However, if you're doing something non-swal related, and you don't have it close, it will remain open indefinitely.
swal({
title: "Delete your account?",
text: "Clicking on continue will permanently delete your account.",
type: "warning",
confirmButtonText: "Continue"
}, function () {
console.log("This still shows!")
});
If you want the alert to stay open while you're doing something non-swal related, you should call swal.close() at the end of your code.
swal({
title: "Delete your account?",
text: "Clicking on continue will permanently delete your account.",
type: "warning",
confirmButtonText: "Continue",
closeOnConfirm: false
}, function () {
console.log("This still shows!");
setTimeout(function () {
// This will close the alert 500ms after the callback fires.
swal.close();
}, 500);
});
No it can't, there is no way to create blocking code that waits for user input. Only ways are what JS already provides: prompt, alert, etc. Just run the code you need from the callback.
I am trying to override javascript confirm box with SweetAlert.
I have researched also about this but I can't found proper solution.
I am using confirm like this
if (confirm('Do you want to remove this assessment') == true) {
//something
}
else {
//something
}
And I am using this for overriding
window.confirm = function (data, title, okAction) {
swal({
title: "", text: data, type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes", cancelButtonText: "No", closeOnConfirm: true, closeOnCancel: true
}, function (isConfirm) {
if (isConfirm)
{
okAction();
}
});
// return proxied.apply(this, arguments);
};
Now confirm box is replaced with sweetalert.
When user click on Yes button then OK action of confirm box should be called. But this isn't calling
And In above code an error occurred Uncaught TypeError: okAction is not a function.
Please suggest me I should I do for override confirm box.
Since the custom implementation is not a blocking call, you need to call it like
confirm('Do you want to remove this assessment', function (result) {
if (result) {
//something
} else {
//something
}
})
window.confirm = function (data, title, callback) {
if (typeof title == 'function') {
callback = title;
title = '';
}
swal({
title: title,
text: data,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No",
closeOnConfirm: true,
closeOnCancel: true
}, function (isConfirm) {
callback(isConfirm);
});
// return proxied.apply(this, arguments);
};