I'm trying to preventDefault a form made with Laravel Collective. The funny thing is that it works once and then it stops working. I'm working my js with Laravel Mix.
Here's my code:
// Here's the form in my blade
{!! Form::open(['class' => 'confirm-delete','method' => 'DELETE', 'route' => ['users.destroy', $user->id], 'data-title' => __('Delete User') ]) !!}
<button type="submit" class="dropdown-item" href="#" style="cursor: pointer"><i class="fas fa-trash-alt"></i> {{ __('Delete') }}</button>
{!! Form::close() !!}
// Here's my code in my js
$(".confirm-delete").submit(function (e) {
alert("It doesn't alert this D:");
var form = this;
e.preventDefault();
swal({
title: form.data("title"),
icon: "warning",
buttons: [
'No, cancel it!',
'Yes, I am sure!'
],
dangerMode: true,
}).then(function (isConfirm) {
if (isConfirm) {
form.submit();
}
});
});
I have tried with these links but none have worked:
https://stackoverflow.com/a/54062772/3675186
https://laracasts.com/discuss/channels/laravel/how-to-continue-to-submit-a-form-after-preventing-it-with-jquery
Using JQuery - preventing form from submitting
I'm working with Laravel 5.6.
Finally got it. The problem was how I was getting the data attributes.
Here's the correct code:
$(".confirm-delete").on('submit', function (e) {
var form = this;
e.preventDefault();
swal({
title: $(this).attr("data-title"),
text: "You will not be able to recover this imaginary file!",
icon: "warning",
buttons: [
'No, cancel it!',
'Yes, I am sure!'
],
dangerMode: true,
}).then(function (isConfirm) {
if (isConfirm) {
form.submit();
}
});
});
Hope it helps someone :)
Related
Am I missing to add some script or what? I am getting error from title. How can I solve this, if you can help me, I would be grateful. I tried adding different scripts, but I amgetting the same error.
<a onclick="buyNft({{$nft->id}})">{{trans('nft.buy')}}</a>
#push('scripts')
<script>
function buyNft(nftid) {
swal({
title: "Are You Sure?",
text: "Do you want to buy this nft?",
type: 'warning',
showCancelButton: true,
showConfirmButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
}).then((result) => {
if (result) {
axios.post("/buythisnft/" + nftid).then(response => {
window.location.reload();
});
}
});
}
</script>
#endpush
Your buyNft-function needs to be declared BEFORE you echo out any element with "onclick=buyNft()":
#push('scripts')
<script>
function buyNft(nftid) {
// ...
}
</script>
#endpush
<a onclick="buyNft({{$nft->id}})">{{trans('nft.buy')}}</a>
UPDATE: This is an example using a script at the bottom of the page which creates an eventlistener for click-events:
document.addEventListener("click",e => {
if(e.target.closest(".buyNft")){
e.preventDefault();
alert("You want to buy an NFT.")
//... Replace with your own functions ...
}
})
<a class="buyNft" href="#">Buy that NFT</a>
<br /><br />
Some other link on this page
I add some special functionality in my modal close event with sweetalert2 but I have faced some issues when I close the modal the first time the close event does not show up again when I opened.
Live Example:
https://codepen.io/themes4all/pen/oNWeYzp
Note:
to know exactly what I'm talking about trying to close the modal and
opened and closed again.
jQuery Code:
(function ($) {
"use strict";
$(window).on("load", function () {
if ($(".modal").length) {
$(".modal").modal("show");
$(".modal").on("shown.bs.modal", function (e) {
e.preventDefault();
$(".spinner")
.removeClass("d-none")
.delay(3000)
.fadeOut(500, function () {
$(this).addClass("d-none");
});
});
$(".modal").on("hide.bs.modal", function (e) {
e.preventDefault();
var swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-danger me-3",
},
buttonsStyling: false,
});
swalWithBootstrapButtons
.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
confirmButtonText: "<i class='fas fa-check-circle me-1'></i> Yes, I am!",
cancelButtonText: "<i class='fas fa-times-circle me-1'></i> No, I'm Not",
showCancelButton: true,
reverseButtons: true,
focusConfirm: false,
})
.then((result) => {
if (result.isConfirmed) {
$(this).off("hide.bs.modal").modal("hide");
$(".modal-backdrop").remove();
$("body").removeClass("modal-open").removeAttr("style");
}
});
});
}
});
})(window.jQuery);
Remove the data-bs-dismiss attribute from the close button.
Instead of calling the method on hide, call the sweetalert on the close button click.
And on confirming the sweetalert, just do $(".modal").modal("hide")
This should work.
JSFiddle
I have created an application that will feature a demo login. The Demo login will have a sweet alert pop up to let the user know that the changes they make will not be saved to the database. The problem is that the form doesn't submit after the user presses ok button that will close the sweet alert. What is the proper syntax to submit the form after the ok button has been pressed?
Below is my html:
<form method="post" id="submitForm" name="demoSubmitForm">
<div class="demo-button pt-3">
<button type="button" name="demoEmail" value="DemoEmail" class="au-btn au-btn--block au-btn--blue
m-b-20" onclick="ShowSweetAlert()">
Demo Application
</button>
</div>
</form>
Below is my script:
function ShowSweetAlert() {
Swal.fire({
icon: 'warning',
title: 'You are logging in as a Demo User!',
text: 'Changes you make to the Application will not be saved once you log out.',
onClose: document.getElementById('submitForm').submit() /*document.demoSubmitForm.submit()*/
});
}
At the moment neither do document.demoSubmitForm.submit() nor document.getElementById('submitForm').submit() work in order to submit the form.
Video of the Problem
Add this Script:
$('#submitForm').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'm looking to use sweet alert to confirm when an user click on a checkbox, it displays a message asking for confirmation. but i want to the checkbox go back to the unchecked status (prop("checked", false)) if the user click to cancel the operation.
I tried to create a function inside the swal, and after the if/else function, but I couldn't discover how to make swal return something neither make it execute a function when the button cancel is clicked. I'm facing problems to find the checkbox inside the swal object too.
HTML
<input class="accomplish" id="task-checkbox1" value="1" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-on="Acomplished" data-off="Not Acomplished">
<script>
$("input.accomplish").change(function(){
if ($(this).is(":checked")){
var output = true;
swal({
title: 'Are you Sure?',
icon: 'warning',
buttons:{
cancel: {
visible: true,
text : 'Cancel',
className: 'btn btn-danger'
},
confirm: {
text : 'Accomplish Task',
className : 'btn btn-success'
}
}
}).then((willDelete) => {
if (willDelete) {
swal("Task Accomplished Successfully", {
icon: "success",
timer: 1500,
buttons : {
confirm : {
text: "Finish",
className: 'btn btn-primary'
}
}
});
} else {
output = false;
swal("Ok, we finish this task later", {
icon: "info",
timer: 1500,
buttons : {
confirm : {
text: "Dismiss",
className: 'btn btn-primary'
}
}
});
}
});
} else {
swal({
title: 'Trying to undone this task?',
icon: 'warning',
buttons:{
cancel: {
visible: true,
text : 'calcel',
className: 'btn btn-danger'
},
confirm: {
text : 'Undone Task',
className : 'btn btn-success '
}
}
}).then((willDelete) => {
if (willDelete) {
swal("Task is pending again", {
icon: "success",
//timer: 1500,
buttons : {
confirm : {
text: "Finish",
className: 'btn btn-primary'
}
}
});
} else {
swal("This task keeps accomplished", {
icon: "info",
//timer: 1500,
buttons : {
confirm : {
text: "Dismiss",
className: 'btn btn-primary'
}
}
});
}
});
}
});
</script>
When I try to create a function like
$("#task-checkbox1").prop("checked", false);
inside the swal or inside the if/else it always execute before the button being pressed.
you could try to reference this
$(document).ready(() => {
$("input.accomplish").change(function(){
const that = this // here a is change
and after the cancel button click you unchecked the checkbox
else {
that.checked= false;// here is a change
output = false;
swal("Ok, we finish this task later", {
icon: "info",
timer: 1500,
buttons : {
confirm : {
text: "Dismiss",
className: 'btn btn-primary'
}
}
});
}
You're using swal2 plugin, not original swal
HTML was introduced here before it was in swal and there's a difference in usage. Instead of
text: "",
html: true
you shoud use
html: "",
I want to use sweetalert when delete data in table before it linking my controller. But it only call my controller and don't show any alert.
<a href="Table/Delete/<?php echo ($u->ID) ?>">
<button id="a" type="button" class="btn btn-danger"> <i class="glyphicon glyphicon-trash"></i> Delete </button>
</a>
js
<script>
$('#a').on('click',function(event){
event.preventDefault();
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
})
</script>
don't use <a href="..."> link
HTML should be like ..
<div>
<button id="a"></button>
</div>
js should be like following
<script>
$('#a').on('click',function(event){
event.preventDefault();
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
# delete row
# show swal and redirect to your link
} else {
swal("Your imaginary file is safe!");
}
});
})
</script>