I want to open ionic modal whenever the user presses the Yes button, but close ionic popup whenever the user presses the No button. How can I do this?
At the moment, ionic popup opens up in each case. Here is my code so far:
services.js
function PopupService($ionicPopup) {
function acceptAppointmentPopup(scope) {
return $ionicPopup.show({
title: 'Are you sure you want to accept this appointment?',
scope: scope,
buttons: [{
text: '<b>Yes</b>',
type: 'button-positive',
onTap: function(e) {}
}, {
text: 'No',
onTap: function(e) {}
}, ]
})
}
return {
acceptAppointmentPopup: acceptAppointmentPopup
};
}
controller.js
function BusinessPendingAcceptanceCtrl($scope, PopupService, ModalService) {
$scope.newMessageModal = function() {
ModalService.show('templates/modals/new-message.html', 'ConsumerNotificationsCtrl as vm');
}
$scope.showAcceptAppointmentPopup = function() {
$scope.data = {}
var myPopup = PopupService.acceptAppointmentPopup($scope);
myPopup.then(function(res) {
$scope.newMessageModal();
});
};
}
$ionicPopup supports confirm (a YES, NO dialog) which returns a promise and as an argument passes the result. You can use it like this:
$ionicPopup.confirm({ // example taken from official documentation
title: 'Consume Ice Cream',
template: 'Are you sure you want to eat this ice cream?'
}).then(function (result) {
if (result) {
// At this point user confirmed that they want to eat the ice cream,
// so lets open a modal to visually show the user how the ice cream is being consumed
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
// This is where the user starts drooling :P
});
} else {
// This user apparently hates ice cream, which is ridiculous...
}
});
You can get more info on the official documentation page.
Integrating my example into your code:
services.js
function PopupService($ionicPopup) {
function acceptAppointmentPopup(scope) {
return $ionicPopup.show({
title: 'Are you sure you want to accept this appointment?',
scope: scope,
buttons: [{
text: '<b>Yes</b>',
type: 'button-positive',
onTap: function(e) {
return true;
}
}, {
text: 'No',
onTap: function(e) {
return false;
}
}]
})
}
return {
acceptAppointmentPopup: acceptAppointmentPopup
};
}
controller.js
function BusinessPendingAcceptanceCtrl($scope, PopupService, ModalService) {
$scope.newMessageModal = function() {
ModalService.show('templates/modals/new-message.html', 'ConsumerNotificationsCtrl as vm');
}
$scope.showAcceptAppointmentPopup = function() {
$scope.data = {}
var myPopup = PopupService.acceptAppointmentPopup($scope);
myPopup.then(function(res) {
if (res) { // Here we check if user pressed Yes - Yes button returns true
$scope.newMessageModal();
}
});
};
}
Related
Below is my code snippet and I wish to call a function "insertBarchart()" on loading the ionic popup. However I am not able to call without the use of "onTap" (which requires clicking the 'Show' button).
Note: The barchart is shown at the place of "container" which is defined inside popup so function call must be made within the scope.
$ionicPopup = Apperyio.get("$ionicPopup");
var alertPopup = $ionicPopup.show({
scope: $scope,
template: '<div id="container" style="min-width: 200px; height: 200px; margin: 0 auto" ></div>',
buttons: [{
text : 'OK',
type: 'button-positive'
},
{
text : 'Show',
type: 'button-positive',
onTap : function(e) {
$scope.insertBarchart();
e.preventDefault();
}
}]
});
In the same situation I tried in other way please check this code once
angular.module('ionic.example', ['ionic'])
.controller('PopupCtrl', function($scope, $timeout, $q, $ionicPopup) {
$scope.cmnt={};
$scope.showToast=function (message) {
if (window.plugins && window.plugins.toast) {
window.plugins.toast.showLongCenter(message);
}
else $ionicLoading.show({ template: message, noBackdrop: true, duration: 2000 });
}
$scope.showPopup = function () {
$scope.data = {};
var pop=$ionicPopup.show({
template: '<div class="list" dir="rtl"><label class="item item-input"><input ng-model="cmnt.name" type="text" placeholder="name"></label><label class="item item-input"><textarea ng-model="cmnt.body" rows="4" placeholder=" comment..."></textarea></label></div>',
title: 'write your comment',
subTitle: '',
scope: $scope,
buttons: [
{
text: 'cancel',
type: 'button-small'
},
{
text: '<b>save</b>',
type: 'button-energized',
onTap: function (e) {
return $scope.cmnt;
}
}
]
}).then(function (res) {
$scope.showToast(res.name);
});
}
});
Instead of $ionicPopup you can create a modal page in Appery that will have its own init() function and can be customized more easily
i want modification the base_calendar.js with new custom function like below
CalendarNotification = require('base_calendar.base_calendar');
console.log("Masuk sini bawah");
CalendarNotification.include({
'click .link2showed': function() {
console.log("ndak yo mlebu kene to");
var action = {
type: 'ir.actions.act_window',
res_model: 'crm.lead',
view_mode: 'form',
view_type: 'form',
views: [[false, 'form']],
res_id: 16644
};
this.do_action(action);
},
});
and this a base_calendar.js odoo addons
var Notification = require('web.notification').Notification;
var CalendarNotification = Notification.extend({
template: "CalendarNotification",
init: function(parent, title, text, eid) {
this._super(parent, title, text, true);
this.eid = eid;
this.events = _.extend(this.events || {}, {
'click .link2event': function() {
var self = this;
this.rpc("/web/action/load", {
action_id: "calendar.action_calendar_event_notify",
}).then(function(r) {
r.res_id = self.eid;
return self.do_action(r);
});
},
'click .link2recall': function() {
this.destroy(true);
},
'click .link2showed2': function() {
this.destroy(true);
this.rpc("/calendar/notify_ack");
},
});
},
});
How do I fix that and what causes it? I've been several times custom function JS like that and it worked well.
Thank in advance for any pointers.
Below is a sample from the Durandal starter kit which is returning a singleton. I’m curious what the simplest way possible is to convert it to an instance, preferably without completely changing the syntax.
define(['plugins/http', 'durandal/app', 'knockout', 'lodash'], function (http, app, ko, _) {
var displayName = 'Flickr',
images = ko.observableArray([]),
activate = function () {
//the router's activator calls this function and waits for it to complete before proceeding
if (this.images().length > 0) {
return;
}
var that = this;
return http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne', { tags: 'mount ranier', tagmode: 'any', format: 'json' }, 'jsoncallback').then(function(response) {
that.images(response.items);
});
},
select = function(item) {
//the app model allows easy display of modal dialogs by passing a view model
//views are usually located by convention, but you an specify it as well with viewUrl
item.viewUrl = 'views/detail';
app.showDialog(item);
},
somePrivate = function() { return ‘blah’; },
canDeactivate = function () {
//the router's activator calls this function to see if it can leave the screen
return app.showMessage('Are you sure you want to leave this page?', 'Navigate', ['Yes', 'No']);
};
return {
displayName: displayName,
images: images,
activate: activate,
select: select,
canDeactivate: canDeactivate
};
});
This works but is a pain to add “this.” Everywhere and I also lose the public/private distinction from above:
define(['plugins/http', 'durandal/app', 'knockout', 'lodash'], function (http, app, ko, _) {
var ctor = function() {
this.displayName = 'Flickr';
this.images = ko.observableArray([]);
this.activate = function () {
//the router's activator calls this function and waits for it to complete before proceeding
if (this.images().length > 0) {
return;
}
var that = this;
return http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne', { tags: 'mount ranier', tagmode: 'any', format: 'json' }, 'jsoncallback').then(function(response) {
that.images(response.items);
});
};
this.select = function(item) {
//the app model allows easy display of modal dialogs by passing a view model
//views are usually located by convention, but you an specify it as well with viewUrl
item.viewUrl = 'views/detail';
app.showDialog(item);
};
this.canDeactivate = function () {
//the router's activator calls this function to see if it can leave the screen
return app.showMessage('Are you sure you want to leave this page?', 'Navigate', ['Yes', 'No']);
};
};
return ctor;
});
I would like something like the below to work– any tips?
define(['plugins/http', 'durandal/app', 'knockout', 'lodash'], function (http, app, ko, _) {
var ctor = function() {
var displayName = 'Flickr',
images = ko.observableArray([]),
activate = function () {
//the router's activator calls this function and waits for it to complete before proceeding
if (this.images().length > 0) {
return;
}
var that = this;
return http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne', { tags: 'mount ranier', tagmode: 'any', format: 'json' }, 'jsoncallback').then(function(response) {
that.images(response.items);
});
},
select = function(item) {
//the app model allows easy display of modal dialogs by passing a view model
//views are usually located by convention, but you an specify it as well with viewUrl
item.viewUrl = 'views/detail';
app.showDialog(item);
},
canDeactivate = function () {
//the router's activator calls this function to see if it can leave the screen
return app.showMessage('Are you sure you want to leave this page?', 'Navigate', ['Yes', 'No']);
};
return {
displayName: displayName,
images: images,
activate: activate,
select: select,
canDeactivate: canDeactivate
};
};
return _.bind(ctor, this);
});
I also tried _.bindAll inside the ctor both before and after the vars.
Have you tried making ctor an IIFE? Like so:
define(['plugins/http', 'durandal/app', 'knockout', 'lodash'], function (http, app, ko, _) {
var ctor = (function() {
var displayName = 'Flickr',
images = ko.observableArray([]),
activate = function () {
//the router's activator calls this function and waits for it to complete before proceeding
if (this.images().length > 0) {
return;
}
var that = this;
return http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne', { tags: 'mount ranier', tagmode: 'any', format: 'json' }, 'jsoncallback').then(function(response) {
that.images(response.items);
});
},
select = function(item) {
//the app model allows easy display of modal dialogs by passing a view model
//views are usually located by convention, but you an specify it as well with viewUrl
item.viewUrl = 'views/detail';
app.showDialog(item);
},
canDeactivate = function () {
//the router's activator calls this function to see if it can leave the screen
return app.showMessage('Are you sure you want to leave this page?', 'Navigate', ['Yes', 'No']);
};
return {
displayName: displayName,
images: images,
activate: activate,
select: select,
canDeactivate: canDeactivate
};
}());
return ctor;
});
define(['plugins/http', 'durandal/app', 'knockout', 'lodash'], function (http, app, ko, _) {
var ctor = function() {
var displayName = 'Flickr',
images = ko.observableArray([]),
activate = function () {
//the router's activator calls this function and waits for it to complete before proceeding
if (images().length > 0) {
return;
}
var that = this;
return http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne', { tags: 'mount ranier', tagmode: 'any', format: 'json' }, 'jsoncallback').then(function(response) {
that.images(response.items);
});
},
select = function(item) {
//the app model allows easy display of modal dialogs by passing a view model
//views are usually located by convention, but you an specify it as well with viewUrl
item.viewUrl = 'views/detail';
app.showDialog(item);
},
canDeactivate = function () {
//the router's activator calls this function to see if it can leave the screen
return app.showMessage('Are you sure you want to leave this page?', 'Navigate', ['Yes', 'No']);
};
_.extend(this, {
displayName: displayName,
images: images,
activate: activate,
select: select,
canDeactivate: canDeactivate
});
};
return ctor;
});
This seems to be pretty close to what I'm looking for and is an almost direct translation.
This is my code. when i click it, it show me a popup with its automated generated CSS. I want to make some changes to the CSS by calling some ids and classes. how can i give id or classes to it so that i can make changes in CSS by calling classes or ids.
$scope.showPopup = function() {
$scope.data = {}
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
title: 'Social Media Services',
scope: $scope,
buttons: [
{
type :'ion-social-facebook positive button-large',
onTap: function(e) {
//$cordovaSpinnerDialog.show("aaa", "aaaa");
window.open('https://www.facebook.com/BinDawood.Co', '_system', 'location=yes');
}
},
{ type :'ion-social-twitter calm',
onTap: function(e) {
// $cordovaSpinnerDialog.show("aaa", "aaaa");
window.open('https://twitter.com/BinDawoodco', '_system', 'location=yes');
}
},
{ type :'ion-social-pinterest assertive',
onTap: function(e) {
// $cordovaSpinnerDialog.show("aaa", "aaaa");
window.open('http://pinterest.com/bindawoodco', '_system', 'location=yes');
}
},
]
});
myPopup.then(function(res) {
console.log('Tapped!', res);
});
};
Add the attribute cssClass in the object passed as parameter of $ionicPopup.show.
cssClass: '', // String, The custom CSS class name
I have a generic Javascript function for displaying a jQuery-ui modal dialog with two buttons -- essentially "Continue" and "Cancel", though the text varies. I'm calling it in three places in my application. What's happening is that only the second button, the "Cancel" button is being displayed. Here's the function: (String.Format is an external function I always use since Javascript doesn't have one built-in - I know it isn't the problem.)
function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
//add the dialog div to the page
$('body').append(String.Format("<div id='theDialog' title='{0}'><p>{1}</p></div>", titleText, bodyText));
//create the dialog
$('#theDialog').dialog({
width: 400,
height: "auto",
modal: true,
resizable: false,
draggable: false,
close: function (event, ui) {
$('body').find('#theDialog').remove();
$('body').find('#theDialog').destroy();
},
buttons: [
{
text: continueText,
click: function () {
$(this).dialog('close');
return true;
},
text: cancelText,
click: function () {
$(this).dialog('close');
return false;
}
}]
});
return false;
}
And here's a snippet showing how I'm calling it:
if(CheckFormDataChanged() {
var changeTitle = "Data has been changed";
var changeText = "You have updated information on this form. Are you sure you wish to continue without saving?";
var changeContinue = "Yes, continue without saving";
var changeCancel = "No, let me save";
if (DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel)) {
if (obj) obj.click();
return true;
}
}
What's wrong with my function (or the call)?
UPDATE: Here's what I'm working with now. I realized that on one of the modal dialogs I didn't need a cancel button, just an acknowledge button:
function DisplayModalDialog(titleText, bodyText, continueText, cancelText, suppressCancel) {
var def = new $.Deferred();
//add the dialog div to the page
$('body').append(String.Format("<div id='theDialog' title='{0}'><p>{1}</p></div>", titleText, bodyText));
//create the button array for the dialog
var buttonArray = [];
buttonArray.push({ text: continueText, click: function () { $(this).dialog('close'); def.resolve(); } });
if (!suppressCancel) {
buttonArray.push({ text: cancelText, click: function () { $(this).dialog('close'); def.reject(); } });
}
//create the dialog
$('#theDialog').dialog({
... dialog options ...
close: function (event, ui) { $('body').find('#theDialog').remove(); },
buttons: buttonArray
});
return def.promise();
}
And the usage:
DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel, false)
.done(function () { if (obj) obj.click(); return true; })
.fail(function () { return false; });
Just to give you some context, obj is an ASP.Net Button being passed to the client-side function; if the function returns true, the server-side OnClick event is triggered; if false, it isn't. In this case, the server-side OnClick advances to the next tab in a TabContainer (among other things). What's happening is that it's moving to the next tab anyway, even though I'm returning false in the fail() function.
Your curly braces are off:
[{
text: continueText,
click: function () {
$(this).dialog('close');
return true;
}
}, {
text: cancelText,
click: function () {
$(this).dialog('close');
return false;
}
}]
As you have it, you only have one object in your buttons array.
I can't tell yet why the button doesn't display EDIT, ah, yes I can, there's a missing curly brace.
What I can tell you that your return lines simply won't work.
The dialog box gets displayed, your function returns immediately, and processing continues, so the click callback return values are completely ignored.
What you can do instead is return a promise:
function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
var def = $.Deferred();
...
buttons: [
{
text: continueText,
click: function () {
$(this).dialog('close');
def.resolve();
}
},
{ // ah - here's your button bug - a missing brace
text: cancelText,
click: function () {
$(this).dialog('close');
def.reject();
}
}
...
return def.promise();
}
with usage:
DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel)
.done(function() {
// continue was clicked
}).fail(function() {
// cancel was clicked
});