How to use sweetalert2 with delete function in button href ?
i have button like this
<button type="button" id="btnDelete" href=" <?php echo site_url('administrator/master/delete/' . $a->idDept); ?>" class="btn btn-danger fa fa-trash but" data-toggle="tooltip" data-placement="top" title="Delete"></button>
$('.btnDelete').click(function() {
swal.fire({
title: 'Are you sure?',
text: "It will permanently deleted !",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function() {
swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
);
});
});
sweetalert2 working but not delete the data
You will need to pass the fetch/ajax method in Swal.fire call.
$('.btnDelete').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
preConfirm: () => {
return fetch(url)
.then(response => {
console.log(response);
if (!response.ok) {
throw new Error(response.statusText)
}
return response.json()
})
.catch(error => {
Swal.showValidationMessage(
`Request failed: ${error}`
)
})
}
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
});
});
Use this example codepan and modify it as you need.
https://codepen.io/ympervej/pen/wvJQyOr
Related
Alert does not wait for user response and the form completes, Does anyone know how to solve this problem?
I need it in response to a button that is not on the form because I have several buttons on the form. Thank you
function Upravit(){
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
);
return true;
} else {
return false
}
});
}
<button {if $d->aktivni == 0}disabled{/if} onclick="return Upravit()"
n:name="upravitreklamaci" type="submit" class="btn btn-primary btn-lg btn-block">Upravit
reklamaci</button>
I have an issue, I'm learning how to use sweetarlet2, I'm using spring project. I want to make a button that have arlet before delete it.
here my HTML button.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#delete" onclick="deleteArlet('+${ps.nama}+ ')"> delete </button>
and here my js script.
<script>
function deleteArlet(id){
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
url: "/siswa/delete/"+ Id,
data: { Id: Id }
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
}
try, if(result.isConfirmed) instead of if (result.value). that worked for me
I have an error in my sweetalert2 and I am using laravel vue in developing my app. What I want my app to happen is to create a confirmation modal for deleting a row in my database. Whenever I click "Yes", the item is removed but when I click the cancel button, the modal closes but also deletes the entire row. I am very confused as of the moment and this is my first time learning these frameworks and I want to learn more about this.
this is my code under the IndexComponent.vue
methods: {
deletePost(id) {
this.$swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
closeOnCancel: true
}).then((result) => {
//send request to server
let uri = `/api/post/delete/${id}`;
axios.delete(uri).then(response => {
this.posts.splice(this.posts.indexOf(id), 1);
});
if (result.value) {
this.$swal(
'Deleted!',
'Your post has been deleted!',
'success'
)
}
})
}
}
This is my button placed inside a td in my table:
<td><button #click="deletePost(post.id)" class="btn btn-danger">Delete</button></td>
This is what's inside my PostController.php:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Resources\PostCollection;
use App\Post;
public function delete($id) {
$post=Post::find($id);
$post->delete();
return response()->json('Successfully deleted!');
}
All operations are working (CRUD) but when I tried to implement the sweetalert2 the deletions are multiple. Can someone please help me?
You have to write your API call inside if like this
methods: {
deletePost(id) {
this.$swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
closeOnCancel: true
}).then((result) => {
//send request to server
if (result.value) {
let uri = `/api/post/delete/${id}`;
axios.delete(uri).then(response => {
this.posts.splice(this.posts.indexOf(id), 1);
});
this.$swal(
'Deleted!',
'Your post has been deleted!',
'success'
)
}
})
}
}
Your splice index is incorrect. It will return -1, then it will delete the last item.
It should be
this.posts = this.posts.filter(post => post.id !== id)
Full code
methods: {
deletePost(id) {
this.$swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
closeOnCancel: true
}).then((result) => {
//send request to server
if (result.value) {
let uri = `/api/post/delete/${id}`;
axios.delete(uri).then(response => {
this.posts = this.posts.filter(post => post.id !== id)
this.$swal(
'Deleted!',
'Your post has been deleted!',
'success'
)
});
}
})
}
}
I have a button to cancel a hiring event and included in that is a confirmation message using sweet alert but then confirming the action wont go pass my ajax post.
I tried checking the url's if it's correct but then again, all of the url's are correct.
Here is my function in the controller:
{
$hiring_id = $this->input->post('key');
$hiring_data = $this->hiring_model->get_hiring($hiring_id);
$return_a = $this->search_model->update_applicant($hiring_data[0]->applicant_id);
$return_b = $this->search_model->cancel_hiring($hiring_id);
if ($return_a > 0 && $return_b > 0) {
echo json_encode(array('ret'=>'1','new_url'=>base_url('partners/hiring')));
}
}
Here is my code in the HTML:
<button type="button" class="btn btn-danger btn-sm m-btn--custom" id="cancel_hiring" data-url="<?php echo base_url('partners/hiring/cancel_hiring/'); ?>" data-key="<?php echo $h->hiring_id;?>">
And here is my javascript:
<script>
$(function(){
$("#cancel_hiring").click(function(e){
Swal.fire({
title: 'Are you sure you want to cancel this hiring?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Cancel Hiring'
}).then((result) => {
if (result.value) {
console.log($(this).data('url'));
console.log($(this).data('key'));
$.post($(this).data('url'), {key:$(this).data('key')}, function(data) {
console.log(data);
if (data.ret) {
console.log('cancelled');
Swal.fire(
'Success!',
'Hiring cancelled.',
'success'
)
var delay = 1000;
setTimeout(function(){ window.location = data.new_url; }, delay);
} else {
Swal.fire(
'Failed!',
'Error occured.',
'warning'
)
}
}, 'json');
}
})
});
});
</script>
I have ajax delete function but it keeps cannot work with my sweetalert,i dont know what wrong with my code,can't see any place wrong.Please tell me how to modify it.
function deletei(){
swal({
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!'
},function ($rfno,$user) {
theuser = $user;
therfno = $rfno;
$.ajax ({
type: "POST",
url: "updateleave.php",
data: {RefNo: $rfno, userid: $user},
success: function () {
swal('Deleted!', 'Your file has been deleted!', 'success')
}
});
});
}
<input type="button" value="button" onClick="deletei(\'' .$poarr[$i]['RefNo']. '\',\''.$poarr[$i]['StaffId'].'\')" >
So i have updated my successful answer for my current condition.Hope You guys can take a reference indeed,i did not add the library in fiddle ,so you guys may just copy this code and amend yourself.Thanks everyone who provide suggestion for me!
function deletei($refnos,$users){
var refId = $refnos;
var userId = $users;
SwalDelete(refId,userId);
e.preventDefault();
}
function SwalDelete(refId,userId){
swal({
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!',
preConfirm: function() {
return new Promise(function(resolve) {
$.ajax ({
type: "POST",
url: "updateleave.php",
data: {RefNo: refId, userid: userId},
success: function(data){
swal('Deleted!', 'Your file has been deleted!', 'success');
var tbl = document.getElementById("myTable");
for (var i=0; i < tbl.rows.length; i++) {
var trs = tbl.getElementsByTagName("tr")[i];
var cellVal=trs.cells[0].innerHTML;
if (cellVal=== refId) {
document.getElementById("myTable").deleteRow(i);
break; }
}
},
});
});
},
});
}
<button type="button" onClick="deletei(\'' .$poarr[$i]['RefNo']. '\',\''.$poarr[$i]['StaffId'].'\')" ></button>
showCancelButton: true, is deprecated. I will recommend using buttons. You could then create an array with what buttons you want.
function deletei(user,rfno){
var theuser = user;
var therfno = rfno;
swal({
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!'
},function () {
$.ajax ({
type: "POST",
url: "updateleave.php",
data: {RefNo: therfno, userid: theuser},
success: function () {
swal('Deleted!', 'Your file has been deleted!', 'success')
}
});
});
}
<input type="button" value="button" onClick="deletei(\'' .$poarr[$i]['RefNo']. '\',\''.$poarr[$i]['StaffId'].'\')" >
Try this .
Modification :- remove $ from $rfno
Edit:-You are not passing the value of username and regNo in deletei function.
You call deletei with the two arguments $poarr[$i]['RefNo'] and $poarr[$i]['StaffId'], but you don't use them in deletei. I suspect these arguments should be the value of theuser and therfno?
function deletei($rfno, $user){
swal({
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!'
}, function () {
$.ajax ({
type: "POST",
url: "updateleave.php",
data: {RefNo: $rfno, userid: $user},
success: function () {
swal('Deleted!', 'Your file has been deleted!', 'success')
}
});
});
}