Anyone can help me?
I tried to used sweetalert2 on my app, but if used "question", "warning", and "info" it isn't correct.
Source from : https://sweetalert2.github.io/
enter image description here
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
<script>
function deleteConfirmation(id) {
var urlsite = "https://"+window.location.hostname+'/gudang/public/blok/d/'+id;
Swal.fire({
title: 'Peringatan',
text: "Anda yakin ingin menghapus data?",
icon: "question",
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, Hapus!'
}).then((result) => {
if (result.isConfirmed) {
// redirect to delete data
location.replace(urlsite);
// notification
Swal.fire(
'Sukses!',
'Data Anda berhasil dihapus, mohon tunggu hingga proses selesai!',
'success'
)
} else {
// cancel to deleting data
Swal.fire(
'Batal Hapus!',
'Data Anda batal dihapus!',
'error'
)
}
})
}
</script>
try with options
Swal.fire({
title: 'Batal Hapus',
text: 'Data Anda batal dihapus!',
icon: 'error',
})
as per doc https://sweetalert2.github.io/
You can use a custom class to hide one of the icons. Some icons have content in a ::before pseudo-class which doubles up.
Create a custom class
.no-before-icon::before {
display: none !important;
}
Apply it to all icons - doesn't effect success or error icons
Swal.fire({
title: "No more double icons",
icon: "info",
customClass: {
icon: "no-before-icon",
},
});
Depending on your version of Sweetalert the property that sets the icon can be called either 'icon' or 'type', try both. Can't do much more without seeing your code.
Related
I created a DA using a SweetAlert js code but when i click in the cancel button the other actions in this DA dont stop.
This is the code that im using:
``
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
swalWithBootstrapButtons.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
} else if (
/* Read more about handling dismissals below */
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
``
What do i need to do to stop the actions when i push the cancel button?
Thanks in advance for all your help.
Try with apex.da.cancel.
Find out more on this link.
When using SweetAlert i'm having problems when using single quotes for example the code below works
<script>
function test()
{
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
}
</script>
But when using this with single quotes (within php echo) - it will not work
text: "You won't be able to revert this!", = ok
text: 'You won't be able to revert this!', = not ok.
is there a answer to this puzzle.
You have an unescaped quote in the word won't. If you wish to use single quotes to define your string, you should escape it, like so: 'You won\'t be able to revert this!'
I have a problem with sweetalert, I would like to show the confirm box alert on button click but it's not working
This is my JS code:
$(document).ready(function(){
$('[data-confirm]').on('click', function(e){
e.preventDefault(); //cancel default action
//Recuperate href value
var href = $(this).attr('href');
var message = $(this).data('confirm');
//pop up
swal({
title: "Are you sure ??",
text: message,
type: "warning",
showCancelButton: true,
cancelButtonText: "Cancel",
confirmButtonText: "confirm",
confirmButtonColor: "#DD6B55"},
function(isConfirm){
if(isConfirm) {
//if user clicks on "confirm",
//redirect user on delete page
window.location.href = href;
}
});
});
});
HTML:
<a data-confirm='Are you sure you want to delete this post ?'
href="deletePost.php?id=<?= $Post->id ?>"><i class="fa fa-trash">
</i> Delete</a>
All required files are imported.
The code you are using is from prior the latest version 2. Please read up on Upgrading from 1.X.
You should use promise to keep track of user interaction.
Updated code
$(document).ready(function(){
$('[data-confirm]').on('click', function(e){
e.preventDefault(); //cancel default action
//Recuperate href value
var href = $(this).attr('href');
var message = $(this).data('confirm');
//pop up
swal({
title: "Are you sure ??",
text: message,
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
window.location.href = href;
} else {
swal("Your imaginary file is safe!");
}
});
});
});
Notes
type have been replaced with icon option.
Replaced showCancelButton, CancelbuttonText, confirmButtonText and confirmButtonColor with only buttons.
dangerMode: true to make the confirm button red.
I have an array in my controller called this.selectedCourses. This array have some items which are showed in my view as a list.
After some steps I have this:
this.checkAddedCourses = function(studentCourses){
...
if(repeatedCourses.length != 0){
sweetAlert({
title: title,
text: text + ' ' + courseList,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: confirmButtonText,
closeOnConfirm: false,
html: true
},
function(){
angular.forEach(repeatedCourses, function(repeatedCourse){
this.removeCoursePurchase(repeatedCourse);
}.bind(this));
swal("Deleted!", "Your purchase has been refreshed.", "success");
}.bind(this));
}
}
When the user click on button 'Remove' the items are removed fine from the array, I've already checked, but in my view I still seeing those items until I do something with that array. Is like it isn't refreshing the array after remove the elements.
Thanks.
PD: sweetAlert is a library for alerts.
Use $scope instead of this for data-binding on your view - so $scope.selectedCourses. Remember to pass $scope into your controller as a dependency.
Ok I've solved with the ´$apply´ function using it like this:
sweetAlert({
title: title,
text: text + ' ' + courseList,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: confirmButtonText,
closeOnConfirm: false,
html: true
},
function(){
angular.forEach(repeatedCourses, function(repeatedCourse){
$rootScope.$apply(function() {
this.removeCoursePurchase(repeatedCourse);
}.bind(this));
}.bind(this));
swal("Deleted!", "Your purchase has been refreshed.", "success");
}.bind(this));
I am using JQuery noty plugin. I need Confirmation message box, how ever the Confirmation Message Box comes fine along with Buttons, but the Buttons Click Event are not working. When i click any of the Buttons. It gives me
HTTP Error 404.0 - Not Found.
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable. error. Below is my code.
noty({
text: 'Are you sure?',
type: 'confirm',
buttons: [
{
addClass: 'btn btn-primary', text: 'Ok', onClick: function ($noty) {
$noty.close();
noty({ text: 'You clicked "Ok" button', type: 'success' });
}
},
{
addClass: 'btn btn-danger', text: 'Cancel', onClick: function ($noty) {
$noty.close();
noty({ text: 'You clicked "Cancel" button', type: 'error' });
}
}
]
})
whats wrong with this.
Check if the scripts are really loaded via firebug/devtools and if your paths are correct. Tested your code and it worked for me.