Develop Reference

handling Multiple buttons in $ionicPopup prompt

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.

return true for click event and continue

Hi I have a popup window control what I'm trying todo is get it to continue the click event if the user chooses the yes button. How do you continue the click event for the 'yes' button, I'm trying to make it return true but it doesn't continue for the click it just return false.
<script type="text/javascript">
$(document).ready(function() {
$('.delete-question').click(function(e) {
ret = false;
_this = this;
$('#pop-up-1').popUpWindow({
modal: true,
blurClass: '.main-container',
action: "open",
buttons: [{
text: "Yes",
click: function () {
this.close();
ret = true;
}
}, {
text: "No",
click: function () {
this.close();
}
}]
});
return ret;
})
});
</script>

You can't do it directly, but you can emit the click event once it is needed, e.g. something like this (not tested):
<script type="text/javascript">
// global flag to track the popup state
var popupReturn = false;
$(document).ready(function() {
$('.delete-question').click(function(e) {
// when true (after Yes click only) go on returning true
if (popupReturn) {
popupReturn = false;
return true;
}
else {
_this = this;
$('#pop-up-1').popUpWindow({
modal: true,
blurClass: '.main-container',
action: "open",
buttons: [{
text: "Yes",
click: function () {
// set global flag to true
popupReturn = true;
// emit click event where it knows that popupReturn is true
$(_this).click();
this.close();
}
}, {
text: "No",
click: function () {
this.close();
}
}]
});
return false;
}
})
});
</script>

You can't return from asynchronous event like in your case, because your "modal" is not really modal in sense that it doesn't pause code execution until use clicks a button.
This is where callback come handy. I would wrap the modal code into helper plugin and use it like this:
$.fn.confirmable = function(options) {
options = $.extend({
close: $.noop,
dismiss: $.noop
}, options);
this.each(function() {
$(this).popUpWindow({
modal: true,
blurClass: '.main-container',
action: "open",
buttons: [{
text: "Yes",
click: function() {
this.close();
options.close();
}
}, {
text: "No",
click: function() {
this.close();
options.dismiss();
}
}]
});
});
};
$('.delete-question').confirmable({
close: function() {
// ok pressed do something
},
dismiss: function() {
// cancel pressed
}
});
It means that your workflow needs to transform to asynchronous callback/promise-based.

Bootbox: Callback function after dismissing the dialog / Clicking on the 'X' button

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

How do I return true or false using jQuery noty plugin?

I have the following jQuery using the noty plugin and plum shopping cart jQuery. The first block of code correctly alerts a yes / no and empties the cart correctly.
The second block of code shows the yes / no message correctly using noty BUT it does not return the true / false so the cart isnt emptied.
Im really new to jQuery so I'm probably missing something obvious ! Any help would be appreciated:
//This works..
emptycart: function () {
if (!confirm('Are you sure you want to empty your cart?')) {
return false;
}
},
//This doesnt work..
emptycart: function () {
confirm.call(this, noty({
text: 'Are you sure you want to empty the cart ?',
buttons: [
{type: 'button green', text: 'Ok', click: function() { return false; } },
{type: 'button pink', text: 'Cancel', click: function() { return true; } }
],
closable: false,
timeout: false
}),
true
);
return false;
},

Well, the plugin is receiving callbacks, so when you use callbacks you must think in a asynchronous way.
/**
* #param {function} onConfirm : Receives true or false as argument, depending on the user choice
*/
emptycart: function (onConfirm) {
confirm.call(this, noty({
text: 'Are you sure you want to empty the cart ?',
buttons: [
{
type: 'button green',
text: 'Ok',
click: function() {
//Do other stuff if you want...
onConfirm(true);
}
},
{
type: 'button pink',
text: 'Cancel',
click: function() {
//Do other stuff if you want...
onConfirm(false);
}
}
],
closable: false,
timeout: false
}), true);
}
Above, you will send a callbackfunction "onConfirm" which will be called when the user clicks on either buttons. The function will receive one boolean argument telling if was a click on Ok or Cancel.

jquery editable extra button/link

I am using jquery's editable and with submit and cancel I also want to 1 extra button for other functionality... can anyone help?

you have to extend the plugin... do the following changes in the source
onEdit: null,
onSubmit: null,
onPopup: null, //function to be called when you click your custom popup button
onCancel: null,
editClass: null,
submit: null,
popup: null, //your custom popup button
popupBy: 'blur', //blur, change, dbclick, click
cancel: null,
type: 'text',
after that you'll have to define the options like
// popup event
if (opts.popup) {
$('<button/>').appendTo($this)
.html(opts.popup)
.one('mouseup', function () { opts.toNonEditable($(this).parent(), true) });
} else
$this.one(opts.popupBy, function () { opts.toNonEditable($(this), true) })
.children()
.one(opts.popupBy, function () { opts.toNonEditable($(this).parent(), true) });
finally add the following to the source to call user defined functions
// Call User Function
var func = null;
if ($.isFunction(opts.onSubmit) && change == true)
func = opts.onSubmit;
else if ($.isFunction(opts.onCancel) && change == false)
func = opts.onCancel;
else if ($.isFunction(opts.onPopup) && change == true)
func = opts.onPopup;
if everything go fine you can use it as
$('selector').editable({
type: 'select',
options: { 'value1': 'Item 1', 2: 'Item 2', 'Item 3': 'Item 3' },
submit: 'save',
popup:'click to open popup',
cancel: 'cancel',
editClass: 'colored',
onEdit: editFuncion,
onPopup:popupFunction,
onSubmit: submitFuncion
});
function popupFunction() {
// your logic to open popup
}
Disclaimer
i have not tested it so i cannot confirm whether it'll work or not but you'll get the idea