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>
Related
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.
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>
is there anything wrong with my id=submit_fw in the blade, the modal did not appear and I already addressed it to the text/javascript below, the button will submit the data in the show.blade and it supposed to have a confirmation message.
show blade
<div class="col-3 col-xs-3 col-sm-3 col-md-1 col-lg-1 col-xl-1 p-0 mt-0"></div>
#if($fw->fw_current_stg == "UR" && $fw->fw_user == $user)
<div class="col-12 col-xs-12 col-sm-12 col-md-5 col-lg-5 col-xl-5 p-0 mt-0 text-right">
<button type="button" class="btn btn-primary btn-block text-white" id="submit_fw">
<span class="spinner-border spinner-border-sm d-none" id="sp_submit" aria-hidden="true"></span>
<i class="fas fa-check" id="icon_submit"></i> SUBMIT REQUEST
</button>
#endif
text/javascript
$('#submit_fw').click(function()
{
$('#sp_submit').removeClass('d-none');
$('#icon_submit').addClass('d-none');
Swal.fire({
title: 'Proceed PR?',
text: 'Are you sure you want to submit this PR to Department Head?',
icon:'question',
confirmButtonText: 'YES',
confirmButtonColor: '#fa0031',
cancelButtonColor: '#fa0031',
showCancelButton:'true',
cancelButtonText:'NO',
}).then((result) => {
if (result.value) {
$.ajax({
url: "{{route('fw.submitfw')}}",
type:"post",
data:{
fw_number:$('#fw_number').val(),
},
success: function(result){
if(result == "submitted")
{
Swal.fire({
title: 'Success',
text: 'Your PR has been submitted to your Department Head',
icon: 'success',
confirmButtonText: 'Return to List',
confirmButtonColor: '#fa0031',
}).then((result) => {
if (result.value) {
let url = "{{route('fw.index')}}";
document.location.href=url;
}
});
}
}
});
}
else
{
}
});
$(this).prop('disabled',true);
});
First of all check id=submit_fw is only one time used in your blade file.
Then you simply set addEventListener to the id.
var submitButton = document.getElementById('submit_fw');
var submitUrl = "{{route('fw.submitfw')}}";
submitButton.addEventListener('click', function (e) {
e.preventDefault();
$('#sp_submit').removeClass('d-none');
$('#icon_submit').addClass('d-none');
submitButton.disabled = true;
Swal.fire({
title: 'Proceed PR?',
text: 'Are you sure you want to submit this PR to Department Head?',
icon:'question',
confirmButtonText: 'YES',
confirmButtonColor: '#fa0031',
cancelButtonColor: '#fa0031',
showCancelButton:'true',
cancelButtonText:'NO',
}).then((result) => {
if (result.value) {
$.ajax({
url: submitUrl,
type:"post",
data:{
fw_number:$('#fw_number').val(),
},
success: function(result){
if(result == "submitted") {
$('#sp_submit').addClass('d-none');
$('#icon_submit').removeClass('d-none');
submitButton.disabled = false;
Swal.fire({
title: 'Success',
text: 'Your PR has been submitted to your Department Head',
icon: 'success',
confirmButtonText: 'Return to List',
confirmButtonColor: '#fa0031',
}).then((result) => {
if (result.value) {
let url = "{{route('fw.index')}}";
document.location.href=url;
}
});
} else {
Swal.fire({
text: 'Somthing went wrong, please try agian!',
icon: "error",
confirmButtonText: "Ok, got it!",
confirmButtonColor: '#fa0031',
});
$('#sp_submit').addClass('d-none');
$('#icon_submit').removeClass('d-none');
submitButton.disabled = false;
}
},
error: function (jqXHR, textStatus, errorThrown) {
$('#sp_submit').addClass('d-none');
$('#icon_submit').removeClass('d-none');
submitButton.disabled = false;
}
});
} else {
$('#sp_submit').addClass('d-none');
$('#icon_submit').removeClass('d-none');
submitButton.disabled = false;
}
});
});
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
I use sweetalert to get confirm for delete rows from user, the code for confirmation is
$('.delete').click(function(){
var formClass = $(this).attr('id');
$("form."+ formClass).submit(function( event ){
event.preventDefault();
swal({
title: "Do you want delete this item?",
text: "",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'yes!',
cancelButtonText: "No",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
swal({
title: 'Deleted!',
text: 'the item is deleted!',
type: 'success'
}, function() {
form.submit();
});
} else {
swal("Cansel", "Not deleted :)", "error");
}
});
});
});
and this code for use pjax to have an ajax request in laravel
$(document).on('pjax:send', function() {
$('#loading').show();
$("#pjax-container").css({"opacity": "0.3"});
})
$(document).on('pjax:complete', function() {
$('#loading').hide();
$("#pjax-container").css({"opacity": "1"});
})
$(document).on('submit', 'form[form-pjax]', function(event) {
$.pjax.submit(event, '#pjax-container')
});
And the html form is:
<form action="{{ route('admin.comments.destroy',[$comment->id]) }}" class="inline-div comment-{{ $comment->id }}" method="post" form-pjax>
{{ method_field('DELETE') }}
{{ csrf_field() }}
<button type="submit" class="btn btn-sm btn-danger btn-opt delete" id="comment-{{ $comment->id }}"><span class="glyphicon glyphicon-trash"></span></button>
By this code i haven't an ajax request.
Instead of "form.submit();" What to write?
From what I can see, you don't need to use pjax for this at all. You can delete a record from database asynchronously, simply using an ajax request. Here is how I would go about doing this:
In the code below, when the user clicks on the delete link, an alert would be presented to him. If he confirms the delete action, then the function deleteFromDB would be called which is responsible for sending an ajax request to the server.
$('.delete').click(function(){
var formClass = $(this).attr('id');
event.preventDefault();
swal({
title: "Do you want delete this item?",
text: "",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes!',
cancelButtonText: "No",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
deleteFromDB(formClass);
} else {
swal("Cancel", "Not deleted", "error");
}
});
});
The mentioned function is defined as below:
function deleteFromDB(formClass) {
var url = "http://example.com/delete/this/record";
var form = $("form."+ formClass);
var formData = new FormData();
form.find("input[name]").each(function(index, input) {
formData.append(input.name, input.value);
});
$.post(url, formData).done(function(data) {
swal({
title: 'Deleted!',
text: 'the item is deleted!',
type: 'success'
});
});
}
It finds all the inputs that have a name attribute and appends each to a FormData object. Then a post ajax request is sent to the server and when the request is done, another alert showing the success of deletion shows up.
Pay attention here not to show the success alert before deleting the record (as you were doing in the above code), because then if something goes wrong during the request, i.e. the record could not be deleted for some reason, you would be able to show that error to the user.