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
Related
I have buttons to execute scripts in my Sheets Addon
<button class="button-68" role="button" onclick="morphf3994()">Unir columnas con el mismo encabezado</button>
<script>
function morphf3994() {
swaload()
google.script.run
.withSuccessHandler(swalsuccess)
.withFailureHandler(swalerror)
.merge_Columns();
}
</script>
And SweetAlert shows a Executing... alert while the script is making its function.
<script>
function swaload() {
Swal.fire({
titleText: "Ejecutando...",
text: 'Por favor, no toques ni cierres el documento.',
icon: 'warning',
allowOutsideClick: false,
preConfirm: Swal.showLoading(),
showLoaderOnConfirm: true,
showConfirmButton: false,
showCancelButton: true,
})
}
</script>
The Alert has just a Cancel button, but I don't know how to implement the CancelButton to stop the button function before finishing (in this case the .merge_Columns() function. Right now the Cancel Button just close the loading window.
Thanks!
Use then function of swal in your code. Reference
<script>
function swaload() {
Swal.fire({
titleText: "Ejecutando...",
text: 'Por favor, no toques ni cierres el documento.',
icon: 'warning',
allowOutsideClick: false,
preConfirm: Swal.showLoading(),
showLoaderOnConfirm: true,
showConfirmButton: false,
showCancelButton: true,
}).then((result) => {
if (result.isConfirmed) {
return true;
} else if (result.isDenied) {
return false;
}
})
}
</script>
apply condition in morphf3994 function
<script>
function morphf3994() {
if(swaload()){
google.script.run
.withSuccessHandler(swalsuccess)
.withFailureHandler(swalerror)
.merge_Columns();
}
}
</script>
Well, with this edit the function is running, but what i need is the code to STOP the .merge_Columns from executing. The function is already running when the Cancel button appears but I don't know the apps script code to stop the function.
<script>
function morphf9566() {
if(swaload()){
}
else {
google.script.run
.withSuccessHandler(swalsuccess2)
.withFailureHandler(swalerror)
.merge_Columns();
}
}
</script>
Thanks
I want to show a custom confirmation message in my ASP.NET MVC application.
After some search, I found SweetAlert which is a very nice tool.
https://sweetalert2.github.io/
I want to define a javascript method in a js file which calls the sweetalert to show a dialog.
But the document doesn't wait for the respons of the client.
To demonstrate what I mean, I added the code below.
The code alert("Doesn't wait"); executes before sweetalert shows its message.
My objectif is to add a custom javascript file and define a simble function to call and return true or false to avoid typing all the code below in every confirmation case.
As it doesn't wait the client interaction, I don't know if it is possible.
Any idea ?
<html>
<head>
<script src="SweetAlert.js"></script>
</head>
<body>
<button onclick="customConfirm();">Confirm</button>
</body>
</html>
<script type="text/javascript">
function customConfirm(){
Swal.fire({
title: 'myTitle',
text: 'my Question',
type: 'question',
showCancelButton: true,
confirmButtonColor: 'rgb(181, 212, 83)',
cancelButtonColor: '#d33',
confirmButtonText: 'YES'
}).then((result) => {
if (result.value) {
return true;
}
else {
return false;
}
});
alert("doesn't wait.");
}
</script>
You should perform all checks in the callback.
function customConfirm(callback){
Swal.fire({
title: 'myTitle',
text: 'my Question',
type: 'question',
showCancelButton: true,
confirmButtonColor: 'rgb(181, 212, 83)',
cancelButtonColor: '#d33',
confirmButtonText: 'YES'
}).then((result) => {
// Do some stuff and call the callback
callback();
if (result.value) {
return true;
}
else {
return false;
}
});
In another file:
customConfirm(function() {
// Put some stuff you want to do
});
Or:
function callbackDoSomething() {}
customConfirm(callbackDoSomething);
I am very new to PHP and javascript, so my question is fairly simple... I have this JavaScript code (Sweetalert2 text field) And I want to get the information that people type into a separate PHP file using ajax. I am struggling for days now with this problem, would be super grateful if someone showed me how to do it correctly
This is my code
<button type="button" id="new-btn" class="btn btn-primary" onclick="post();">Beitrag Erstellen</button>
<script>
$(document).ready(function () {
$('#new-btn').click(function () {
swal({
title: "Add Note",
input: "textarea",
showCancelButton: true,
confirmButtonColor: "#1FAB45",
confirmButtonText: "Save",
cancelButtonText: "Cancel",
buttonsStyling: true
}).then(function () {
swal(
"Sccess!",
"Your note has been saved!",
"success"
)
})
});
})
</script>
when you run your code, you will get the below error
{
"message": "Uncaught ReferenceError: $ is not defined",
"filename": "https://stacksnippets.net/js",
"lineno": 15,
"colno": 9
}
"Uncaught ReferenceError: $ is not defined", means that you have used $ symbol syntax, (that is jquery), but you have not imported it properly and defined it. For this purpose, you can add the below lines at the top of your code. Then it should work as expected.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
And then, to use swal() in your code, you have to have sweethart script imported which can be done by adding the below one also at the top of your file
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
Finally, your working code file shold be someting like this--->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<button type="button" id="new-btn" class="btn btn-primary" onclick="post();">Beitrag Erstellen</button>
<script>
$(document).ready(function () {
$('#new-btn').click(function () {
swal({
title: "Add Note",
input: "textarea",
showCancelButton: true,
confirmButtonColor: "#1FAB45",
confirmButtonText: "Save",
cancelButtonText: "Cancel",
buttonsStyling: true
}).then(function () {
swal(
"Sccess!",
"Your note has been saved!",
"success"
)
})
});
})
</script>
</body>
</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>
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>