public function destroy(Company $company)
{
Alert::question('Delete Record?', 'Cannot Undo! Are You Sure?');
if (session('status')) {
$company->delete();
}
return back()->with('status', 'Company Deleted!');
}
At the moment the record deletes with or without the Sweet Alert confirmation. I want the record deleted only after the Sweet Alert confirmation is clicked.
Just change button type from submit to button and trigger vai javascript function
<form action="{{ route('orders.destroy', $row->id) }}" method="post" class="d-inline">#csrf#method('DELETE')<button type="button" class="btn btn-sm btn-danger confirm-delete"><i class="fas fa-times"></i></button></form>
$(document).on('click', 'button.confirm-delete', function () {
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
$(this).parent('form').trigger('submit')
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
});
});
I was searching for an answer like you, and I came up with something works perfectly!
If the user is trying to delete something, it will show him warning alert to confirm the delete.. once he clicks on yes it will delete it and show another alert with success of deletion.
Here is how you can do it:
after installing RealRashid/Sweet-Alert and publish it you need to do this:
In your view:
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
//Sweet alert stylesheet
<link rel="stylesheet" href="sweetalert2.min.css">
</head>
<body>
//refer to rashid's docs
#include('sweetalert::alert')
//The delete button
<a class="btn btn-primary mb-1" href="{{ Route('movies.edit', $movie) }}">
<i class="bi bi-pencil"></i>
</a>
<form action="{{ Route('movies.destroy', $movie) }}" method="post" class="ms-2 mb-1">
#csrf
#method('DELETE')
//The 'confirm' class is important to use in the JavaScript code
<button class="btn btn-danger confirm" type="submit">
<i class="bi bi-trash"></i>
</button>
</form>
//Add Sweetalert script lib
<script src="sweetalert2.all.min.js"></script>
<script>
//the confirm class that is being used in the delete button
$('.confirm').click(function(event) {
//This will choose the closest form to the button
var form = $(this).closest("form");
//don't let the form submit yet
event.preventDefault();
//configure sweetalert alert as you wish
Swal.fire({
title: 'هل أنت متأكد؟',
text: "لا يمكنك التراجع عن حذف الفلم",
cancelButtonText: "إلغاء",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'حذف'
}).then((result) => {
//in case of deletion confirm then make the form submit
if (result.isConfirmed) {
form.submit();
}
})
});
</script>
</body>
</html>
after doing the above code in your view, head to your controller and do this:
//Add use statement for rashid's alert
use RealRashid\SweetAlert\Facades\Alert;
//in your destroy function you can do this
public function destroy(Movie $movie)
{
$movie->genres()->detach();
$movie->delete();
return redirect()->route('movies.index')->with('success', 'تم حذف الفلم بنجاح!');
}
//with success will trigger rashid's alert to pop up and you customize the message in 'with' statement!
That's it! you don't need to do anything else or add Alert::success in the controller.. withSuccess works just fine.
Related
I have this sweetalert triggered on the submit of a form.
<script src="{{ asset('themes/js/sweetalert.min.js') }}"></script>
<script>
$('.btn-danger').click(function(event) {
event.preventDefault();
var form = $(this).parents('#form-delete');
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();
});
});
</script>
But on clicking confirm I want it to continue submitting the form...
<form action="{{ route('admin.blogs.destroy', $blog->id) }}" method="post" id="form-delete">
#csrf
#method('DELETE')
<div class="btn-group btn-group-sm">
edit
<button type="submit" class="btn btn-danger">delete</button>
</div>
</form>
error
The function swal() doesnt accept a second parameter as the callback anymore, user .then()
<script>
$('.btn-danger').click(function(event) {
event.preventDefault();
var form = $(this).parents('#form-delete');
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
})
.then(function (isConfirm) {
if (isConfirm) {
form.submit();
}
});
});
</script>
I have a form in Laravel /VueJS with multiple submit buttons. I wrote a code for confirm on submit with input button.
After Sweet Alert confirm, the form does not get submitted, as there is event.preventDefault().
Can anyone help me on what I need to do ?
<template>
<div class="large-12 medium-12 small-12 cell">
<input type="submit" name="submit" v-on:click="showAlertConfirm()"></input>
</div>
</template>
<script>
export default {
methods: {
showAlert(){
this.$swal('Hello Vue world Test!!!');
},
showAlertConfirm()
{
event.preventDefault();
var form = $('input[name="submit"]').closest("form");
console.log('form');
console.log(form);
this.$swal.fire({
title: 'Are you sure you want to submit?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes'
}).then((result) => {
console.log(result);
if (result.isConfirmed==true) {
//this does not work
form.submit();
this.$swal.fire(
'Submitted!',
'Your file has been submitted.',
'success')
}
})
},
}
}
</script>
I have a table data , this table have function delete button .
this button is successfully delete but i need to add alert on-click confirmation to delete like this :
<a href="delete.php?id=<?=$row['id']; ?>"
onclick="return confirm('Anda yakin mau menghapus item ini ?')">[Hapus]</a>
but i using datatales serverside i dont know where i put this onclick
its my function delete
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->addColumn('Nama', function ($pns) {
return ''.$pns->users->nama.'';
})
->editColumn('edit', function ($pns) {
return '<i class="glyphicon glyphicon-edit"></i>';
})
->editColumn('hapus', function ($pns) {
// THIS START HERE FOR DELETE FUNCTION
$c = csrf_field();
$m = method_field('DELETE');
return "<form action='/delete/$pns->id' method='POST'>
$c
$m
<button style='margin-left:10px; width: 30px;' type='submit'
class='btn btn-xs btn-danger delete'>
<i class='glyphicon glyphicon-remove-circle'></i>
</button>
</form>";
})
->rawColumns(['Nama' => 'Nama','hapus' => 'hapus','action' => 'action','edit'=>'edit'])
->make(true);
}
where i can put this onclick and this message ?
you can use it on your delete form's button like
<button style='margin-left:10px; width: 30px;' type='submit'
class='btn btn-xs btn-danger delete' onclick='return confirm("Anda yakin mau
menghapus item ini ?")'>
<i class='glyphicon glyphicon-remove-circle'></i>
</button>
or add a class to your form and use confirmation before submitting the form
<form action='/delete/$pns->id' method='POST' class='delete-form'>
now add this script in your view file
<script>
$('.delete-form').submit(function(event){
if(!confirm('Anda yakin mau menghapus item ini ?')){
event.preventDefault();
}
});
</script>
I want to perform the delete operation with sweetalert2. But after clicking the confirm button nothing is happening. Form is not submitted. What's the error i'm getting?
function deleteTag(id) {
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!',
cancelButtonText: 'No, cancel!',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
reverseButtons: true
}).then((result) => {
if (result.value) {
event.preventDefault();
document.getElementById('delete-form-' + id).submit();
} else if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.cancel
) {
swal(
'Cancelled',
'Your data is safe :)',
'error'
)
}
})
}
<button class="btn btn-simple btn-danger btn-fab btn-icon" type="button" onclick="deleteTag({{ $tag->id }})"><i class="material-icons">delete</i>
</button>
<form id="delete-form-{{ $tag->id }}" action="{{ route('admin.tag.destroy',$tag->id) }}" method="POST" style="display: none;">
#csrf #method('DELETE')
</form>
I got this console error after selecting confirm delete button.
enter image description here
In my laravel project I am using sweet alert works fine but it is deleting my first-row record only I don't know what the problem is
this is my form
<td>
<form id="myform" class="delete-photo" method="POST" action="{{route('testimony.destroy', $testimony->id)}}">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
<div class="form-group">
<button type="submit" data-photo-id="{{$testimony->id}}"
class="submitdel btn btn-danger"
>Delete</button>
</div>
</form>
and this is my script
$('.delete-photo').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("action");
warnBeforeRedirect(linkURL);
});
function warnBeforeRedirect(linkURL) {
swal({
title: "Are you sure?",
text: "You will not be able to recover this file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#5c5856",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
document.getElementById("myform").submit();
} else {
swal("Cancelled", "Your file is safe :)", "error");
}
}
);
}
This is because your form passing a same id each time. if you are looping in your record then the form must be loop thought. But this is not good practice. i would suggest you to use
<button type="submit" data-photo-id="{{$testimony->id}}" class="submitdel btn btn-danger">Delete</button>
in loop then the $testimony->id would be different with it's own id that is coming from database. Then get it's data-photo-id with Javascript on click event handler then pass this id to your controller and post the url.
okay suppor you are getting dynamic data from database and displaying it like
<table>
<tr>
<td>name</td>
<td>email</td>
<td><button type="submit" data-photo-id="1" class="submitdel btn btn-danger">Delete</button></td>
</tr>
<tr>
<td>name</td>
<td>email</td>
<td><button type="submit" data-photo-id="2" class="submitdel btn btn-danger">Delete</button></td>
</tr>
<tr>
<td>name</td>
<td>email</td>
<td><button type="submit" data-photo-id="3" class="submitdel btn btn-danger">Delete</button></td>
</tr>
</table>
then get the data-photo-id (replace this with your dynamic id) by using this way
<script>
$(function(){
$('.submitdel').on('click',function(){
// store current button into variable
var id = $(this).data('photo-id');
warnBeforeRedirect(id);
})
})
function warnBeforeRedirect(id) {
swal({
title: "Are you sure?",
text: "You will not be able to recover this file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#5c5856",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
window.location = 'http://yoursite.com/controllername/'+id
} else {
swal("Cancelled", "Your file is safe :)", "error");
}
}
);
}
</script>
and replace window.location with the url you are want to use. Hope you get it now.