sweetalert not showing when deleting in laravel - javascript

I am trying to implement sweet alert on my laravel project. But the delete method is working without the sweetalert.
in my blade file--
<div class="action-btn bg-danger ms-2">
<a class="delete-confirm" href="{{ URL::to('/delete-customer/' . $customer->id) }}" type="button">
<i class="ti ti-trash delete-confirm"></i></a>
</div>
in my controller--
public function delete($id)
{
$customer = Customer::findOrfail($id);
$customer->delete();
return redirect()->back()->with('success', __('Customer successfully deleted.'));
}
For sweetalert I used this code--
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
$('.delete-confirm').on('click', function (event) {
event.preventDefault();
const url = $(this).attr('href');
swal({
title: 'Are you sure?',
text: 'This record and it`s details will be permanantly deleted!',
icon: 'warning',
buttons: ["Cancel", "Yes!"],
}).then(function(value) {
if (value) {
window.location.href = url;
}
});
});
</script>
when I click delete button it doesn't show the sweet alert. Can anyone explain what did I miss?


Try this
$('body').on('click', '.delete-confirm', function() {
var id = $(this).attr('data-id');
Swal.fire({
title: 'Are you sure?',
text: "If You Remove A Referral You Will Not Be Able To Recover It!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes'
}).then((result) => {
if (result.value === true) {
var token = $("meta[name='csrf-token']").attr("content");
$.ajax({
type: "DELETE",
url: "/referrals/" + id,
data: {
"id": id,
"_token": token,
},
success: function(result1) {
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Referral Removed ',
text: "You Have Removed A Referral",
showConfirmButton: false,
timerProgressBar: true,
timer: 1800
});
table.ajax.reload();
},
error: function(error) {
Swal.fire({
position: 'top-end',
icon: 'error',
title: 'We have some error',
showConfirmButton: false,
timerProgressBar: true,
timer: 1800
});
}
});
}
});
});

Related

how can i make sweet2alert don't show again message?

I have been trying to hide this message if I click "<span onclick='save()'>Don't Show Again</span>", using localstorage but it's not working. how do i do that?
<script type="text/javascript">
if(localStorage.getItem("DontShow")) {
$("#save").hide();
}
$(document).on("click", "#save", function() {
localStorage.setItem("DontShow", "true");
});
Swal.fire({
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showCancelButton: true,
icon: 'info',
title: 'Title',
html: '<div class="swal-left"><b>Text</b><br>Text</div>',
confirmButtonColor: '#DD6B55',
cancelButtonText: "Close",
confirmButtonText: "<span onclick='save()'>Don't Show Again</span>",
footer: '<a href>Why do I have this issue?</a>'
});
</script>

add this after the swal.fire function
.then((result) => {
if (result.isConfirmed)
'function that hides here'
});

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

How to refresh the page after conform pop up?

When I click the delete button it will conform pop up - if I choose "YES" then success msg wil be shown "Module has been deleted".
$(document).ready(function () {
$("#example tbody").on('click', '.user-Delete', function (e) {
e.preventDefault();
var getId = $(this).data('id');
swal({
title: "Are you sure?",
text: "You will not be able to recover this Module!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel it!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
$.ajax({
type: 'POST',
url: '#Url.Action("DeleteModule")',
dataType: 'json',
data: {
ModuleID: getId
},
success: function (data) {
if (data.success) {
swal({
title: "Deleted!",
text: "Module has been deleted.",
type: "success",
confirmButtonClass: "btn-success",
});
}
},
error: function (ex) {
alert('Failed to retrieve Sub Categories : ' + ex);
}
});
} else {
swal({
title: "Cancelled",
text: "Module Record is safe :)",
type: "error",
confirmButtonClass: "btn-danger"
});
}
});
});
});
Inside the message popup if I choose ok button then only page should refresh.
when I click OK then refresh the page

You can use :
window.location.reload();

try this :
success: function (data) {
if (data.success) {
swal({
title: "Deleted!",
text: "Module has been deleted.",
type: "success",
confirmButtonClass: "btn-success",
},
function(){
location.reload();
});
}
}

Try adding this to your swal() call within the success block:
success: function (data) {
if (data.success) {
swal({
title: "Deleted!",
text: "Module has been deleted.",
type: "success",
confirmButtonClass: "btn-success",
})
.then(function() {
location.reload();
});
}
},

You can use below javascript function on ok button click
alert("page refresh")
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
<input type="submit" value="ok" id="submit" onclick="refresh()">

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 }

Categories