I have written following code, I want to call a code under "Cancel" button:
vm.saveGroup = function(){
SweetAlert.swal({
title: "Name this Device Group",
text: "Please provide a name that you want your device group to be saved under. Also, make sure that you already specified all needed filters before you save the list.",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
inputPlaceholder: "Device Group name"
},
function(inputValue){
if (inputValue === false) {
return false;
}
if (inputValue === "") {
/*eslint-disable */
swal.showInputError("You need to write something!");
/*eslint-enable */
return false;
}
deviceGroupsFactory.saveGroup(inputValue, vm.filterOutput)
.then(function(response){
if (response.status == 200){
SweetAlert.swal("Device Group saved!", "You should now see your device group on the list.", "success");
$state.go('main.template.devices.groups');
}
else {
SweetAlert.swal("Error!", response.statusText, "error");
console.log('xxx');
}
});
});
}
but I cannot call "cancel clicked". I was looking for in docs but cannot find the solution.
You're passing too many parameters to the swal constructor. It needs only two:
swal(options, callback)
options: Attributes to design the alert
callback: The callback function to manage the events
When you use a simple confirm, the callback receive only one parameter that indicates the user choice:
true: Confirm
false: Cancel
With inputbox you will receive the user's input string as parameter.
When you merge together inputbox and confirm, you could receive:
the input string value: When the user press Confirm
false: When user press Cancel
So, you have to use the Strict Equality Comparison in order to know if user pressed cancel or have inserted the string false in the input box.
Please see the following simple example:
swal({
title: "Are you sure?",
text: "Press CANCEL, please!",
type: "input",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "CONFIRM",
cancelButtonText: "CANCEL",
closeOnConfirm: false,
closeOnCancel: false
},
function(inputValue){
//Use the "Strict Equality Comparison" to accept the user's input "false" as string)
if (inputValue===false) {
swal("Well done!");
console.log("Do here everything you want");
} else {
swal("Oh no...","press CANCEL please!");
console.log("The user says: ", inputValue);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.min.js"></script>
I hope it helps you, bye.
you can also use the implementation of promises using .then
I give you an example, this would be executed just after pressing the button
swal( 'Error!',valido.msj,'error').then((e)=>{
if( valido.msj=="Enlace de botón No Válido" ){
document.getElementById('link_btn_barra').focus();
}
});
Related
I am new in Javascript / jQuery. I want to show some alert message using 'sweetalert' library and based on the user response the function will either return or continue.
Here is my implementation :
jQuery("#some_exchnage_request_form").on( 'submit', function(e){
// some implementation
// Now showing the alert
jQuery.getScript('https://unpkg.com/sweetalert/dist/sweetalert.min.js', function() {
swal({
title: "Do you want Continue ? ",
text: "You need to pay extra amount",
icon: "success",
buttons: true,
confirmButtonColor: '#C64EB2',
})
.then((willSubmit) => {
if (!willSubmit) {
return false;
}
});
});
// rest of the code
});
Here the expectation is if the user select 'cancel' button the function should return false, otherwise on selecting 'ok' button 'rest of the code' portion to be executed.
But here problem is the code doesn't stop for the user input and just continue. The alert box is displayed but it ignore the user selection.
I know implementation is wrong, but not sure what would be the correct way to do this.
Thanks!!
You need to use Swal.fire(); to make it work.
https://sweetalert2.github.io/
jQuery("#some_exchnage_request_form").on( 'submit', function(e){
// some implementation
// Now showing the alert
e.preventDefault();
jQuery.getScript('https://cdn.jsdelivr.net/npm/sweetalert2#11', function() {
Swal.fire({
title: 'Do you want Continue ?',
text: "You need to pay extra amount",
icon: 'success',
showCancelButton: true,
confirmButtonColor: '#C64EB2',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Confirmed!',
'You agreed to pay extra amount.',
'success'
)
} else {
console.log('clicked cancel');
}
})
})
// rest of the code
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="some_exchnage_request_form">
<input type="submit">
</form>
There are similar questions and looks like it is a limitation of 'sweetalert' that execution doesn't stop for user input unlike alert()/confirm() in js.
sweetalert pause execution and return value
How to return the value of SweetAlert2 input?
I have a hyperlink like this:
<a href="{{ route('courseRegistration', $item->cor_id) }}" class="btn btn-info" id="custombtn">
Register
</a>
Then I added this to show a Sweetalert message with Yes and No buttons:
$(document).on('click', '#custombtn', function(e) {
e.preventDefault();
let form = $(this).parents('form');
swal(
{
title: "Alert!",
text: "You have an active Wallet, do you wish to pay the price with the active Wallet?",
type: "warning",
allowEscapeKey: false,
allowOutsideClick: false,
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No",
showLoaderOnConfirm: true,
closeOnConfirm: false
}).then((isConfirm) => {
if (isConfirm.value === true) {
// go to the href route
}
return false;
});
});
As you can see I want to say: if user clicked on the Yes button, goto href route and if not, stays on the page (return false).
So the question is, how can I redirect user to href="{{ route('courseRegistration', $item->cor_id) }}", if he clicks on Yes button?
you can use window.location.href = "YOURLINKHERE" to redirect to another page after checking if isConfirm.value is set (you dont have to check for true, since the cancel Button doesn't return isConfirm.value)
I have a Laravel 5.8 project with using sweetalert.js.
And I have a form like this:
<form id="myForm" action="{{ route('acceptWallet') }}" method="POST">
#csrf
<input type="checkbox" id="btn-submit" name="wallet_checked" onchange="this.form.submit();">
</form>
And then, here is the route acceptWallet:
Route::post('course/accept/wallet','Wallet\WalletController#acceptWallet')->name('acceptWallet');
And at the method acceptWallet of WalletController, I have added this:
public function acceptWallet(Request $request)
{
dd($request->wallet_checked);
}
As you can see I have used onchange="this.form.submit();" to submit the form without using submit button and it works fine.
Then by using this script, I tried showing SweetAlert confirmation message box, containing Yes and No as buttons:
$(document).on('click', '#btn-submit', function(e) {
e.preventDefault();
let form = $(this).parents('form');
swal(
{
title: "Attention!",
text: "Are you sure you want to make this transaction",
type: "warning",
allowEscapeKey: false,
allowOutsideClick: false,
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No",
showLoaderOnConfirm: true,
closeOnConfirm: false
}).then((isConfirm) => {
if (isConfirm) {
form.submit();
return true;
}
return false;
});
});
As you can see I have used form.submit(); if user clicks on Yes button in order to submit the form.
But now the problem is, the form does not submitted and just refreshes the page and not showing dd($request->wallet_checked); as result.
So what's going wrong here? How can I properly submit the form after showing SweetAlert popup message?
I also tried document.forms['myForm'].submit(); instead of form.submit(); but didn't submit the form.
May be your let form = $(this).parents('form'); havent find the form correctly. So just console.log(form) and check is it available.
Also since there is a id for your form you can do something like below.
}).then((isConfirm) => {
if (isConfirm) {
document.getElementById("myForm").submit();
//Or $('#myForm').submit();
return true;
}
return false;
});
Or jest make your variable with jquery via id
let form = $('#myForm')
Sweet-alert not returning the true or false after calling this get_alert() function please suggest some suggestions how could we able to work this
function get_alert() {
$('#removeactive').on('click', function(e) {
e.preventDefault();
var message = $(this).data('confirm');
//pop up
swal({
title: "Are you sure ??",
text: message,
icon: "warning",
buttons: true,
dangerMode: true,
})
.then(function(isConfirm) {
console.log(isConfirm == true);
if (isConfirm == true) {
return true;
} else {
return false;
}
});
});
}
<button id="removeactive" data-confirm="Are you sure?" type="button">Click</button>
You should not need a function to assign an event handler. Also you have not told us when you call get_alert. Calling get_alert will NOT show the alert, only assign the handler
Here I run on load of the page
If the removeactive element is dynamic, you need to change to
$(document).on('click','#removeactive', function(e) {
or better:
$(document).on('click','.removeactive', function(e) {
so any element with that class can call the alert
You also need to remove active where you know the status of the isConfirm
Here is a working example
$(function() { // on page load
$('#removeactive').on('click', function(e) {
e.preventDefault();
var message = $(this).data('confirm');
//pop up
swal({
title: "Are you sure ??",
text: message,
icon: "warning",
buttons: true,
dangerMode: true,
})
.then(function(isConfirm) {
console.log("confirmed?", isConfirm);
if (isConfirm) console.log("deleting"); // here you delete
else console.log("cancelled"); // here you do whatever or nothing
// You cannot return anything
});
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<button id="removeactive" data-confirm="This will remove the active widget from the sprocket" type="button">Click</button>
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);