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>
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 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'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 :)
I'm trying to use SweetAlert with the clipboard.js library.
I have tried simulating a click on a HTML button when the user confirm on SweetAlert, but it didn't work.
Here is what I've tried to do:
My HTML:
<button class="btn btn-primary" id="copyBtn" data-clipboard-target="#info_block" onclick="copyText();">
Copy Text!
</button>
<div id="info_block" name="info_block">
Some example text.
</div>
My JavaScript function:
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
And the structure of my SweetAlert:
swal({
title: "Copy the text?",
text: "Are you sure you want to copy it to clipboard?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, copy it!",
closeOnConfirm: false
},
function(){
$("#copyBtn").click(); // simulates click on html button.
swal("Copied!", "The text has been copied.", "success");
});
It works fine without sweet alert, but it won't work simulating a click on the copy button, and I can't figure out a way to get it working.
With this variant, the newer SweetAlert2.js can be used.
function copyText(){
var copy = $('.copy_text').val();
$('.copy_text').select();
document.execCommand('copy');
Swal.fire({
icon: 'success',
title: 'Text copied to clipboard',
text: copy,
showConfirmButton: false,
timer: 3000
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#9"></script>
<input type="text" class="copy_text" value="Hello World!">
<button onclick="copyText()">Copy to clipboard</button>
Your sweet alert was calling $("#copyBtn").click(); which I am not sure is necessary.
In any case, you have set onclick="copyText();" in this button but never defined a copyText function.
Either define the function or remove the onclick attribute.
Here's working code with an empty copyText function defined.
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log('Copied text: ' + e.text);
});
clipboard.on('error', function(e) {
console.log(e);
});
function copyText() {
}
swal({
title: "Copy the text?",
text: "Are you sure you want to copy it to clipboard?",
//type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, copy it!",
closeOnConfirm: false
},
function(){
$("#copyBtn").click(); // simulates click on html button.
swal("Copied!", "The text has been copied.", "success");
}
);
/*fit into snippet window*/
.sweet-alert { margin: auto; transform: scale(.75); }
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard#1/dist/clipboard.min.js"></script>
<button class="btn btn-primary" id="copyBtn" data-clipboard-target="#info_block" onclick="copyText();">
Copy Text!
</button>
<div id="info_block" name="info_block">
Some example text
</div>
If you want to fire the alert on the button click then put the swal function inside of the function you defined in onclick:
Your sweet alert was calling $("#copyBtn").click(); which I am not sure is necessary.
In any case, you have set onclick="copyText();" in this button but never defined a copyText function.
Either define the function or remove the onclick attribute.
Here's working code with an empty copyText function defined.
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log('Copied text: ' + e.text);
});
clipboard.on('error', function(e) {
console.log(e);
});
function copyText()
{
swal({
title: "Copy the text?",
text: "Are you sure you want to copy it to clipboard?",
//type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, copy it!",
closeOnConfirm: false
},
function() {
swal("Copied!", "The text has been copied.", "success");
});
}
/*fit into snippet window*/
.sweet-alert {
margin: auto;
transform: scale(.75);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard#1/dist/clipboard.min.js"></script>
<button class="btn btn-primary" id="copyBtn" data-clipboard-target="#info_block" onclick="copyText();">
Copy Text!
</button>
<div id="info_block" name="info_block">
Some example text
</div>