I need to disable the confirm button when the user hasn't changed any value in the text box inside the sweet alert and enable it only when the value in the text box has changed but I can't seem to find a way for this. here's my code:
swal({
title: 'Please Enter Page Name',
input: 'text',
inputValue: PageName,
confirmButtonText: 'Save',
onOpen: function (){
swal.disableConfirmButton(); //this disables the button
}
preConfirm: function (Name) {
return new Promise(function (resolve, reject) {
resolve();
})
},
allowOutsideClick: false
})
I used onOpen to fire the swal.disableConfirmButton(); method but I don't know where to use swal.enableConfirmButton();. is there any function like onInput or something similar? If yes how to use that to achieve the desired result?
here's a codepen of what I have achieved so far.
https://codepen.io/zeeshanadilbutt/pen/NLvmZz?editors=0010
Since there is no onInput or something similar for input: text, you can use getInput inside onOpen and add an event listener to that to enable or disable your button accordingly.
Check the working snippet.
swal({
input: 'text',
onOpen: function () {
swal.disableConfirmButton();
swal.getInput().addEventListener('keyup', function(e) {
if(e.target.value === '') {
swal.disableConfirmButton();
} else {
swal.enableConfirmButton();
}
})
}
});
<script src="https://unpkg.com/sweetalert2"></script>
Related
I use Electron v13.0.1 from this repo
Need close confirmation, use this implementation:
win.on('close', function (e) {
require('electron').dialog.showMessageBox(this, {
type: 'question',
buttons: ['Yes', 'No'],
title: 'Confirm',
message: 'Are you sure you want to quit?'
}).then(function (data) {
if (data.response === 0) {
e.preventDefault();
}
});
});
But when I click on the close button dialog appeared on second and the application close without any confirmation or rejection. In other words, the dialog does not create conjunction for close.
What is the problem with my solution?
The problem is that you are calling an asynchronous method and the event function continues execution and eventually returns, before any user input is given.
One way to solve this is to use the showMessageBoxSync function for synchronous operation. This will wait until user selects an option before continuing execution. Like below:
const { dialog } = require('electron');
win.on('close', function (e) {
let response = dialog.showMessageBoxSync(this, {
type: 'question',
buttons: ['Yes', 'No'],
title: 'Confirm',
message: 'Are you sure you want to quit?'
});
if(response == 1) e.preventDefault();
});
I'm trying to create an Swal alert that must contain an input field with a continue and cancel button in ReactJs. This is my code right now:
swal({
icon: "warning",
text: 'Are you sure you want to continue? This operation is not reversible',
content: {
element: "input",
attributes: {
placeholder: title + " reason",
},
},
}).then(comment => {
if (comment === null || comment === ''){
swal({icon: 'error', text: 'You need to type the cancellation reason'});
return false
}
})
This code only creates an 'OK' button and I get the input from the user in the comment variable, but I need to add a 'Continue' button and a 'Cancel' button to leave the alert. I've tried adding the button parameter in the swal options and this creates the buttons but I'm not able to get the input from the user.
I also have tried to add raw html in the content and get the input with a handle method but so far I haven't been able to do this.
Maybe the solution for this is easy but I am not able to get it. Thank a lot for the help
I found out a way to solve this in case anyone have to do something similar. I just created the input by doing document.createElement('input') and then I got the value depending on the user clicked on Continue or Cancel:
const cancellation_reason = document.createElement('input');
swal({
icon: "warning",
text: 'Are you sure you want to continue? This operation is not reversible',
content: {
element: cancellation_input,
attributes: {
placeholder: title + " reason",
},
},
buttons: {
continue: 'continue',
cancel: 'cancel'
}
}).then(option => {
switch (option){
case 'continue':
if (cancellation_input.value === null || cancellation_input.value === ''){
swal({icon: 'error', text: 'You need to type the cancellation reason'});
return false
}
prop(runID, null, path, cancellation_input.value).then(showMesagge);
break;
case 'cancel':
break;
}
})
I have a button here with a simple CSS. what I want is, when I hit on that button to reset my style. I use it, I need to add a sweet alert before pressing the button.
<button class="reset-option">Reset Options</button>
document.querySelector(".reset-option").onclick = function () {
localStorage.clear();
window.location.reload();
};
What I want is, add this alert to handle it with javascript.
swal({
title: "OOPS !",
text: "You Want To Resat Your Style!",
icon: "warning",
});
I tried to do this but it didn't work.
let resetOption = document.querySelector(".reset-option");
resetOption.onclick = function () {
if (resetOption.window === reload()) {
swal({
title: "OOPS !",
text: "You Want To Resat Your Style!",
icon: "warning",
});
}
}
You can have only one onclick handler per element. So here, the second overwrites the first.
Also, Swal returns a promise to handle the result. What is below is real close to the example found here.
I suggest:
document.querySelector(".reset-option").onclick = function () {
swal.fire({
title: "OOPS !",
text: "You Want To Resat Your Style!",
icon: "warning",
showCancelButton: true
}).then((result) => {
if (result.isConfirmed) {
console.log("confirmed");
//localStorage.clear();
//window.location.reload();
}else{
console.log("canceled")
}
})
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.12.5/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.12.5/sweetalert2.min.js"></script>
<button class="reset-option">Reset Options</button>
if you want to show an alert to user before hit the button, you can add mouse hover event to your button.
var event = new MouseEvent('mouseover', {
'view': window,
'bubbles': true,
'cancelable': true
});
document.querySelector(".reset-option").onclick = function () {
localStorage.clear();
window.location.reload();
};
var cc=document.querySelector(".reset-option")
cc.addEventListener('mouseover', function() {
//your alert code here
alert('Before hit button');
});
I'm using sweetalert to ask user for an input to rename a tag. And then I make an ajax call to change the tag on server. If succeeded, I call a small callback function(postAction) which will update the UI and renamed the tag on UI. It works fine as long as little call back function has a statement "swal("done!");", so user clicks on this little confirmation message box, and sweetalert message box is released. I'm trying to see if there is a function I can call to release the input sweetalert pop up without the additional "swal("done")" statement, so user will have 1 less click. Is there an easy way to do this?
All I can find now is to add a timer in the second pop up. swal("Done!", {timer: 500}); It's OK but not ideal.
renameTag = function(tagId)
{
swal({
title: "Rename Gallery Tag",
text: 'Please provide a new tag name',
content: "input",
button: {
text: "OK",
closeModal: false,
},
})
.then(name => {
var tagName = name.trim();
if (tagName.length == 0)
{
swal({
title: "Rename Gallery Tag Failed",
text: "Tag name cannot be empty",
icon: "error",
button: "OK",
});
return;
}
else
{
ajaxAction("POST"
, "/User/RenameGalleryTag"
, { 'index': tagId, 'name': tagName }
, "rename gallery tag"
, {
'reload': false
, postAction: function () {
$(".selected-tag").text(tagName);
swal("done!");
}
});
}
})
}
You should be able to close it like this
swal.close()
I am creating dinamically a message box (Ext.window.MessageBox)
var msgBox = Ext.create('Ext.window.MessageBox', {
title: '',
//message in window
msg: 'message text',
icon: 'WARNING',
//buttons
buttons: 'OKCANCEL',
//onclick funciton
fn: myfunc
});
I am adding OK and Cancel buttons. Is it possible to add click listener on the OK button so that I can do my stuff only when this OK button is pressed?
Also is it possible to add specific ids to the OK and Cancel buttons so that I can distinguish them more easily, instad of using the pregenrated ids from ExtJS?
You may use the following construction instead:
Ext.MessageBox.show({
title: "",
msg: "message text",
icon: Ext.MessageBox.WARNING,
buttons: Ext.MessageBox.OKCANCEL,
fn: function(buttonId) {
if (buttonId === "ok") {
// do on OK pressed
}
}
});
Here the first argument in the fn handler is a string value of pressed button.
DEMO: http://jsfiddle.net/xj9qY/