I am using SweetAlert and I have custom buttons like this example:
swal("A wild Pikachu appeared! What do you want to do?", {
buttons: {
cancel: "Run away!",
catch: {
text: "Throw Pokéball!",
value: "catch",
},
defeat: true,
},
onOpen: function() { console.log("Test") } // this doesn't work
})
.then((value) => { ... });
However, on initial opening, it's focusing to the last button. Is there a way to cancel this auto-focus completely so on initial opening, it doesn't focus on any button?
As already suggested in comments, SweetAlert2 is more flexible solution, I recommend using it.
With onOpen parameter and getConfirmButton() method you can achieve the desired behavior:
Swal.fire({
input: 'text',
inputPlaceholder: 'I will not be autofocuses',
onOpen: () => Swal.getConfirmButton().focus()
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#9"></script>
Related
this.platform.backButton.subscribe(()=> {
const alert = await this.alertController.create({
header: 'Confirm!',
message: 'Do you want to go back!!!',
buttons: [
{
text: 'Yes',
handler: () => {
// Previous page loaded
}
}, {
text: 'No',
handler: () => {
//Page should not go back.
//This is where i want to write code,if the user clicks
No and the back button function should be disabled.
//Only when the user presses Yes,the page will go to
previous.
}
}
]
});
})
I dont know how to handle when the user presses no,i.e.Disable the back button function or event.
Finally i solved the issue.As the event emitted from the backButton is an promise.If I dont need to go back,i just reject that promise.
this.platform.backButton.subscribe(()=> {
const alert = await this.alertController.create({
header: 'Confirm!',
message: 'Do you want to go back!!!',
buttons: [
{
text: 'Yes',
handler: () => {
// Previous page loaded
}
}, {
text: 'No',
handler: () => {
reject()
}
}
]
});
})
Try this way to prevent the back button
this.platform.backButton.subscribeWithPriority(9999, () => {
this.dismiss();
});
The documentation says:
Show a simple prompt popup, which has an input, OK button, and Cancel
button. Resolves the promise with the value of the input if the user
presses OK, and with undefined if the user presses Cancel.
I was doing:
$ionicPopup.prompt({
//options
}).then(function (userinput) {
//get userinput and send to server
});
I need to add a third button, but can't get the text of the input, how can I resolve the promise on the onTap event of the button to get the input?
$ionicPopup.prompt({
title: '¿Are you sure?',
inputType: 'text',
buttons: [
{ text: 'Cancel'
//close popup and do nothing
},
{
text: 'NO',
type: 'button-assertive',
onTap: function(e) {
//send to server response NO
}
},
{
text: 'YES',
type: 'button-energized',
onTap: function(e) {
//get user input and send to server
}
}]
See this demo i made with your code: http://play.ionic.io/app/ac79490c8914
prompt() is not meant to add more than two buttons,show() is used to make complex pop ups, Please see show() method in same documentation. As written in documentation, i am quoting:
Show a complex popup. This is the master show function
for all popups.
A complex popup has a buttons array, with each button having a text
and type field, in addition to an onTap function.
Your code will be like:
$scope.showPop = function(){
$scope.data = {};
var myPopup = $ionicPopup.show({
template: '<input type="text" ng-model="data.myData">',
title: '¿Are you sure?',
scope: $scope,
buttons: [
{ text: 'Cancel'
//close popup and do nothing
},
{
text: 'NO',
type: 'button-assertive',
onTap: function(e) {
return null;
}
},
{
text: 'YES',
type: 'button-energized',
onTap: function(e) {
return $scope.data.myData;
}
}]
});
myPopup.then(function(userinput) {
if(userinput){
console.log('returned data'+ userinput)
}
});
}
Simple thing about above code is that you have bind input with $scope (<input type="text" ng-model="data.myData">) so you can access it in any manner.
The following snippet allows me to perform stuff in a callback function for the buttons that are clicked. However, how can I get a callback function, or a similar workaround such that I can perform some code when a user clicks on the 'X' button/dismisses the dialog?
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
callback(){//stuff that happens when they click Ok.}
I do not want to disable/hide the close button with
closeButton: false,
There is onEscape function for this.
bootbox.dialog({
message: 'the msg',
title: "Title",
onEscape: function() {
// you can do anything here you want when the user dismisses dialog
}
});
You can use a variable to check if the modal was hidden after a click on OK or x button / escape key
var status = false;
$('.btn').on('click', function () {
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess: {
label: "Ok",
callback: function () {
status = true;
}
}
},
onEscape: function () {
$('.bootbox.modal').modal('hide');
}
});
});
$(document).on("hidden.bs.modal", ".bootbox.modal", function (e) {
callback();
});
function callback() {
if (!status) {
onClose();
} else {
onOK();
status = false;
}
}
function onClose() {
$('p.alert span').removeClass().addClass('text-danger').text("Dismissed");
}
function onOK() {
$('p.alert span').removeClass().addClass('text-success').text("Sucess");
}
Fiddle demo
Some people might see this as a bit of a hack-around. Although it suits me fine as all I wanted to acknowledge as a developer that someone accepted the message, which triggered the next event.
Using Bootbox.js' native confirm() method which does supply a callback action. I added an additional class as an option to the confirm button (which must be supplied on a confirm() call) with the hidden classname (E.g. Bootstap has a helper class for display:none called hidden.
This hides the confirm button, thus the Modal appears as a normal Alert box.
bootbox.confirm({
message: "Some Button Text",
buttons: {
"cancel": {
label: "<i class='fa fa-check'></i> OK - I understand",
className: "btn btn-primary"
},
//Hide the required confirm button.
"confirm": { label: "", className: "hidden" }
},
callback: function(){
//Begin Callback
alert( "Finished" );
}
});
JsFiddle Example
I'm able to get the dialog to appear when I click "Reject Request", but the dialog won't close and I see an error in the console when I click Cancel or OK. "Uncaught TypeError: Cannot read property 'apply' of undefined"
HTML:
<button id="btn-reject" class="btn btn-danger" type="submit" style="float: right;">Reject Request</button>
<div id='reject-dialog' title='Confirmation Required'>Reject Request?</div>
JQuery:
<script type="text/javascript">
$(document).ready(function () {
$("#reject-dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": {
text: "OK",
id: "confirm-reject"
},
"Cancel": {
text: "Cancel",
id: "cancel-reject"
}
}
});
$("#btn-reject").click(function (e) {
e.preventDefault();
$("#reject-dialog").dialog('open');
});
$('#cancel-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
$('#confirm-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('reject');
});
}); //dom
</script>
JQuery versions:
you are binding to buttons that don't exist yet on document.ready.
instead you can tell the dialog what callback to trigger while creating the buttons.
Update:
according to the Jquery-ui documentation, dialog buttons options are accepted in one of the two following formats:
1) Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.
2) Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.
i updated the code to reflect that.
code
<script type="text/javascript">
$(document).ready(function () {
var dialogDiv = $("#reject-dialog");
dialogDiv.dialog({
autoOpen: false,
modal: true,
buttons: [
{
text: "OK",
id: "confirm-reject",
click: function() {
dialogDiv.dialog("close");
console.log('confirm');
}
},
{
text: "Cancel",
id: "cancel-reject",
click: function(){
dialogDiv.dialog("close");
console.log('reject');
}
}
]
});
$("#btn-reject").click(function (e) {
e.preventDefault();
dialogDiv.dialog('open');
});
}); //dom
</script>
You need to use .on()'s event delegation since the buttons don't exist when the code is executed.
For example, change:
$('#cancel-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
to:
$(document).on('click','#cancel-reject', function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
jsFiddle example
Ideally you want to bind to an element that already exists on the page that's closer than document for better performance.
You need to inform a click function, even you need to bind a click handler after the create the dialog. I think this happens because Jquery tries to execute the attribute click through apply native js function and, if you don't define it, js try to execute apply in a undefined.
So, I suggest that you define an empty function (or jQuery.noop):
"Confirm": {
text: "OK",
id: "confirm-reject",
click: function(){} // or jQuery.noop()
}
I have the following simple dialog:
function confirmDialog(message, title) {
var returnvalue;
if ($("#confirmDialog").length == 0)
$('body').append('<div id="confirmDialog"></div>');
var dlg = $("#confirmDialog")
.html(message)
.dialog({
autoOpen: false,
minHeight: 50,
title: title,
show: {
effect: "explode",
duration: 250
},
hide: {
effect: "explode",
duration: 250
},
buttons: {
"OK": {
text: "OK",
class: "",
click: function () { returnvalue = true; $("#confirmDialog").dialog("close"); }
},
"Cancel": {
text: "Cancel",
class: "",
click: function () { returnvalue = false; $("#confirmDialog").dialog("close"); }
}
},
modal: true
});
$('#confirmDialog').dialog("open");
return returnvalue;
}
very simple implementation. My problem is that when I run through the script, at the end, when it returns the variable returnvalue is undefined, meaning, it did not set it to either true or false depending on which button was clicked.
I have tried setting it to var returnvalue = false; but it never gets a different value no matter which button I click.
Any help is appreciated!! Thank you!
EDIT:
I believe I noticed why the variable doesn't get set. I am calling this dialog from the click event from another dialog, after the user clicks on the "Save" button of the parent dialog, this one pops up. Now, since it is contained in a function, it does not wait for my input, meaning, it doesn't "see" that I clicked either "OK" or "Cancel". How can I fix this?
jQuery dialogs do not block execution like the built in javascript confirm() function. I can suggest two possible solutions:
Pass "ok" and "cancel" callbacks into your confirmDialog function.
Have your confirmDialog function return a promise object that you resolve after a button is clicked and have the calling function wait for that to resolve.
I prefer option 2.
I would have the button clicks trigger an event before they close the dialog, then I would listen for that event to happen in the parent process.
parent dialog opens
user clicks save
opens confirmation dialog
user closes confirmation dialog
confirmation dialog triggers "ok" or "canceled" event depending
parent dialog is listening for "ok" or "canceled" event
parent dialog reacts accordingly
confirmation dialog buttons
buttons: {
"OK": {
text: "OK",
class: "",
click: function () { $(this).trigger("ok"); $("#confirmDialog").dialog("close"); }
},
"Cancel": {
text: "Cancel",
class: "",
click: function () { $(this).trigger("cancel"); $("#confirmDialog").dialog("close"); }
}
}
parent dialog, or document.ready()
$("#confirmDialog").on({
"ok":function(event,ui){
//save work
},
"cancel":function(event,ui){
// cancel work
}
},null,null);