Hi, i’m using popups to show simple progress with a spinner icon, i tough it would have something like close method to close the popup, but it seems to not work or not exist, nor in the return value, nor in the success value nor in the popup component itself.
How are we supposed to close popups from code?
whats the code you used to open the popup?
I tried to close it with the popup component, with the return value of the popup function and with the success value of the .then() method.
showAlert(args) {
// this.popup && this.popup.close();
args.title = args.title || 'Error obteniendo datos';
args.subTitle = args.subTitle || '';
args.template = args.template || '';
this.popup.alert({
title: args.title,
subTitle: args.subTitle,
okText: args.template,
okText: 'Cerrar',
okType: 'primary'
})
.then((success) => {
console.log('ShowAlert success: ', success);
}, (err) => {
console.log('Fail to instance popup progress: ', err);
});
}
Digging in the code of popup i’m afraid i will have to require the PopupCmp component and then call close() on it or something like that, still analizing the code.
i think it is the same way you can do it with ionic1:
http://ionicframework.com/docs/api/service/$ionicPopup/
this.popup.alert(...)
should return an instance of the component --> there should be a close function on it
I though so, tried and failed, it seems it returns nothing:
showAlert(args) {
this.dialog && this.dialog.close();
// this.popup && this.popup.close();
args.title = args.title || 'Error obteniendo datos';
args.subTitle = args.subTitle || '';
args.template = args.template || '';
this.dialog = this.popup.alert({
title: args.title,
subTitle: args.subTitle,
okText: args.template,
okText: 'Cerrar',
okType: 'primary'
})
.then((success) => {
console.log('ShowAlert success: ', success);
}, (err) => {
console.log('Fail to instance popup progress: ', err);
});
}
showProgress(args) {
this.dialog && this.dialog.close();
args.title = args.title || 'Descargando dias visita...';
args.subTitle = args.subTitle || '';
args.template = args.template || '<i class="fa fa-refresh fa-spin fa-3x"></i>';
this.dialog = this.popup.alert({
title: args.title,
subTitle: args.subTitle,
template: args.template,
okText: '',
okType: 'primary'
});
}
And error:
EXCEPTION: TypeError: this.dialog.close is not a function
Sorry, it returns a Promise, so i can’t reach a close method, tried with debugger but doesn’t seem to have that method close.
seems like there is a close function used … i think this is this one:
https://github.com/driftyco/ionic2/blob/4995d80bc9cb60827ed137ac9adda93d865681f0/ionic/components/overlay/overlay-controller.ts
the close function of the overlay.controller.
i saw the possibility to get a ionic component by id, but i think this will not work in this case.
But you can see --> if you open a popup it is pushed to the nav-stack --> so you can try to simply pop the last entry on the nav stack and remove the dom-entry or something dirty like that.
I do not tested these things… but maybe it points you in a correct direction
Or you simple trigger a click on a popup button?
I tried importing PopupCmp to try and call close func, but didn’t work, seems it isn’t exported in the popup.ts file:
import {Page, NavController, Popup, PopupCmp} from ‘ionic/ionic’; // Error can’t find PopupCmp
Also tried with pop but didn’t work, analizing the file i think it’s not the app nav-stack but the overlay nav-stack, tried getting the nav component and calling pop(), no error but no result either, how do i reach it? anyway, should i fill an issue for this?
For the time being i will have to hack/cry with triggering the click event over the button and give it opacity 0 to avoid user clicking when he shouldn’t.
do no know, but maybe the navigation component has a “goBack” functionality?.. by default the popup is pushed to the nav stack --> if you go back it should close the popup
Doesn’t have any goBack function, and the pop from NavController does not work, it just lacks a way to close it from code.
Similar to modal you can close it like this:
this.popup.get().close();
Example:
this.popup.alert({
title: "Oops",
template: "That session has been favorited already.",
});
setTimeout(() => {
this.popup.get().close();
}, 6000);
or pass a handle in and close the popup by the specific handle:
https://github.com/driftyco/ionic2/blob/master/ionic/components/popup/popup.ts#L258-L263
Modals:
https://github.com/driftyco/ionic2/blob/master/ionic/components/modal/test/basic/index.ts#L182-L188
OMG it freaking works!! well, almost, i have to use timeout 200 to leave the popup exist before trying to close it.
Now how the &%$? was i supossed to know that i should get().close()? that should be in the docs.
Please keep in mind it is still in Alpha. We are working on improving the documentation at the same time we are updating the code, but there are still many things not documented, especially in the API section. When we have it documented it will be here: http://ionicframework.com/docs/v2/api/components/popup/Popup/
I’ve filling a few issues this week, btw that thing about needing to timeout before closing because the close function gets called before the popup gets instantiated in dom, is expected behavior? is there a fix to that?
@brandyshea
nice thing!.. i do not have the time to dig deeper in ionic2. but i saw it anywhere, how you can get the instance. but i did not remember it.
i bow down for you, my lady ^^
Is the need for timeout an expected behavior? since i’m using the popup to show a progress spiner icon for a http request and sometimes the response is so fast that the this.popup.get().close(); has to be wrapped in a timeout of at least 200 ms to work?
Also will sometime the popup component close a previous popup if exists?
Hi, i’m having an issue with the close function, i show the modal (or at least try to) before a http call, i got the response too fast and then i call again the showAlert function, which should call get and close before showing the popup, but depending on the timeout time, either it try to close before the first one exist thus not closing the first and showing both, one over the other, or it closes after the second one instantiates and closes both.
With this close approach this behavior will fluctuate accordingly with the performance of the app:
closeDialog() {
var this_ref = this;
if (this.dialog)
{
setTimeout(() => {
var dialog = this_ref.popup.get();
dialog.close && dialog.close();
this_ref.dialog = null;
}, 200);
};
}
showProgress(args) {
this.closeDialog();
args.title = args.title || 'Descargando...';
args.subTitle = args.subTitle || '';
args.template = args.template || '<i class="fa fa-refresh fa-spin fa-3x"></i>';
this.dialog = true;
return this.popup.alert({
title: args.title,
subTitle: args.subTitle,
template: args.template,
cssClass: 'progress',
okText: '',
okType: 'primary'
});
}
showAlert(args) {
this.closeDialog();
args.title = args.title || 'Error obteniendo datos';
args.subTitle = args.subTitle || '';
args.template = args.template || '';
this.dialog = true;
return this.popup.alert({
title: args.title,
subTitle: args.subTitle,
template: args.template,
cssClass: 'alert',
okText: 'Cerrar',
okType: 'primary'
});
}
In code i call showProgress() before the http call and on error or success i call showAlert which should close the first one even if it’s still not in the DOM, and then show it’s own popup, but the need for that timeout is messing the flow of this popups.
If you want to create an issue we can look into it, or you can use a handle to make sure the correct one closes:
this.modal.open(ContactUs, null, {
handle: 'my-awesome-modal'
});
this.modal.get('my-awesome-modal').close();
Popups aren’t really designed to be displayed and closed immediately, you would probably be better using a busy indicator, but we haven’t implemented one yet.
Still the animation and style of the popup fits as a glove to my improvised busy indicator, as far as i have seen, modals animation are like sliding in and popups like drop over, if possible i would like to use modals with popup style and animation.