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>
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>
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 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.
I'm attempting to do a simple (soft) delete on my model from a customized implementation of the frozennode/administrator package. Whenever I hit my route via ajax, the application throws a TokenMismatchException.
I've tried with both cookie and file drivers set in the session config.
I have confirmed the _token is being submitted with the ajax request. Commenting the csrf filter out altogether allows me to successfully delete the record. I'm using the out-of-the-box csrf filter.
I'm also using the excellent Sweet Alert plugin, though that doesn't appear to be related.
routes.php:
//CSRF protection in forms
Route::group(array('before' => 'csrf'), function()
{
//Delete Item
Route::post('{model}/{id}/delete', array(
'as' => 'admin_delete_item',
'uses' => 'Frozennode\Administrator\AdminController#delete'
));
...
Blade template:
<a href="" class="btn btn-danger" id="delete-item-button" data-token="{{ csrf_token()}} ">
<i class="fa fa-trash"></i>
<span>
Delete
</span>
</a>
Javascript:
Excuse my hellishness $.post is what's relevant.
$('#delete-item-button').on('click', function (e) {
e.preventDefault();
var token = $(this).data('token');
swal({
title: "Delete this record?",
text: "There's no undo!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function () {
$.post(
window.location.pathname + "/delete",
{"_token" : token},
function(){
swal({
title: "Deleted!",
text: "The record has been deleted.",
type: "success"
},
function () {
window.location.href = 'http://www.example.com'
})},
"json"
);
});
});
Any help or guidance would be greatly appreciated.
Thanks!