I set custom functions for the back button of the device, but I can't reset the back button to its default purpose : going back. Whenever I set a custom function, I can't unsubscribe it, it keeps the custom function...
Basically I have 2 pages, Home and Quizz, in the quizz page I set a custom function to the back button so it opens a modal used as a confirmation popup
quizz-page.ts
//import
#Component({
selector: 'app-quizz',
templateUrl: './quizz.page.html',
styleUrls: ['./quizz.page.scss'],
})
export class QuizzPage implements OnInit {
private subscriptionBack: Subscription;
async leaveQuizz(){
console.log("leave quizz request");
if(await this.statsService.checkSoundState()){
this.nav_fx_sound.play();
}
this.subscriptionBack = this.platform.backButton.subscribeWithPriority(9999, () => {
console.log('Setting back button to close confirmation popup!');
this.modalController.dismiss();
console.log("SUBSCRIPTION TO CLOSE POPUP WITH BACK : ");
console.log(this.subscriptionBack);
});
const modal = await this.modalController.create({
component: ConfirmationPopupPage,
cssClass: 'modalCss2'
});
modal.onDidDismiss().then(value => {
this.subscriptionBack = this.platform.backButton.subscribeWithPriority(9999, () => {
console.log('Setting back button to leave quizz!');
this.leaveQuizz();
console.log("SUBSCRIPTION TO QUIT QUIZZ WITH BACK : ");
console.log(this.subscriptionBack);
});
})
return await modal.present();
}
ionViewWillEnter(){
this.ngOnInit();
this.subscriptionBack = this.platform.backButton.subscribeWithPriority(9999, () => {
console.log('Setting back button to leave quizz!');
this.leaveQuizz();
console.log("SUBSCRIPTION TO QUIT QUIZZ WITH BACK : ");
console.log(this.subscriptionBack);
});
}
ionViewWillLeave(){
this.subscriptionBack.unsubscribe();
console.log("unsubscribing");
console.log("UNSUBSCRIPTION TO QUIT QUIZZ WITH BACK : ");
console.log(this.subscriptionBack);
}
}
But when I go back to home page and click on the physical back button, it either does nothing or it opens the confirmation popup
I can share the logs, this might help :
When I navigate to the Quizz page and click for the first time on the back button (it opens the confirmation popup) :
http://localhost/src_app_quizz_quizz_module_ts.js - Line 199 - Msg: Setting back button to leave quizz!
http://localhost/src_app_quizz_quizz_module_ts.js - Line 162 - Msg: leave quizz request
http://localhost/src_app_quizz_quizz_module_ts.js - Line 201 - Msg: SUBSCRIPTION TO QUIT QUIZZ WITH BACK :
Then the 2nd time I click (it closes the confirmation popup) :
http://localhost/src_app_quizz_quizz_module_ts.js - Line 167 - Msg: Setting back button to close confirmation popup!
http://localhost/src_app_quizz_quizz_module_ts.js - Line 169 - Msg: SUBSCRIPTION TO CLOSE POPUP WITH BACK :
Finally I leave the quizz page :
http://localhost/src_app_quizz_quizz_module_ts.js - Line 207 - Msg: unsubscribing
http://localhost/src_app_quizz_quizz_module_ts.js - Line 208 - Msg: UNSUBSCRIPTION TO QUIT QUIZZ WITH BACK :
But when I click on the back button again in the home page, I get :
http://localhost/src_app_quizz_quizz_module_ts.js - Line 167 - Msg: Setting back button to close confirmation popup!
http://localhost/src_app_quizz_quizz_module_ts.js - Line 169 - Msg: SUBSCRIPTION TO CLOSE POPUP WITH BACK :
http://localhost/vendor.js - Line 46075 - Msg: ERROR
So despite the 3rd step saying that it got unsubscribed, the last step shows otherwise...
So I can't go back with the back button after this step
And what is even weird is that if I go back to the quizz page and come back to home page again, then the physical back button opens the confirmation popup (inside the home page) and a 2nd click closes it.
I'm really confused
Related
I have a bootbox confirm dialog box. In that, I have some form validation.Validation working fine and as long as validation fails confirm dialog box still opens. But when I click on the cancel button, still it is asking for validation.
bootbox.confirm({
closeButton: true,
message: valid_result,
size: 'large',
title: 'Fill fields with related values',
buttons : {
confirm : { label: '<i class="fa fa-check"></i> Validate'}
},
callback: function () {
var res = getLinkupInformation(ids_string)
if(res == true) {
return true;
} else {
return false;
}
}
});
The validation part is working and if validation passed then only modal was closing. But when user click on the cancel button or close icon still it is asking validation. When I remove return false in call back function in else part then the validation button is not working and when I click on the validate button confirmation dialog box was closing.
Please guide me how to solve this issue?
The callback expects you to supply an argument, like so:
callback: function (result) {
}
If the user cancelled the dialog, either by clicking Cancel or the close (x) button, then result (or whatever you called your argument) will be the value false. You would use that value like this:
callback: function (result) {
if(result) {
/* your code here */
}
}
This is more or less covered in the documentation.
Currently I am having an ion-button with click event which calls a method.
<ion-button expand="full" color="primary" (click)="sendMsg()">Tap</ion-button>
sendMsg method contains the statements to push the objects to an array and opens modal on some condition.
sendMsg = () =>{
// statements to push an objects to an array(this is an array displays on chat page);
this.openModal();
}
async openModal() {
const myModal = await this.modalController.create({
component: ModalPage,
componentProps: {
firstAction: this.firstAction,
secondAction: this.secondAction,
thirdAction: this.thirdAction
},
cssClass: 'modal-css',
backdropDismiss: false
});
It's a chat page where we get the messages on click of TAP button and while tapping in between we show an ion modal . The issue here is when we tap super fast and modal comes up in one of the click event and since we are clicking fast I could see the messages displaying which are suppose to display after the modal comes up..
To avoid this , I thought of adding debounceTime which can have some time delay and considers the latest click event and this was working in normal angular world.
I have followed https://coryrylan.com/blog/creating-a-custom-debounce-click-directive-in-angular but it didn't work under ionic..
Any thoughts are really appreciated..
use a subject as event emitting source and control the click rate from there
const openModalAction=new Subject()
sendMsg = () =>{
// statements to push an objects to an array(this is an array displays on chat page);
openModalAction.next()
}
const openModal=defer(()=>from(this.modalController.create({
component: ModalPage,
componentProps: {
firstAction: this.firstAction,
secondAction: this.secondAction,
thirdAction: this.thirdAction
},
cssClass: 'modal-css',
backdropDismiss: false
})))
const openModalAction.pipe(dounceTime(1000),switchMap(_=>openModal)
I have a button in my ionic application to open a article from the homepage. I want to enable my users to exit the app by pressing the device back button. But when they are at the article page I want it to just go back to the homepage when pressing the back button.
I created a custom backbutton event to handle the function of exiting the app. It can exit the app from the homepage. However when pressing the back button on the article page, it does not navigate back to the homepage and nothing happens. How can I make it goes back to the homepage from the article page when pressing the back button?
In app.component.ts
this.platform.backButton.subscribeWithPriority(99, async () => {
if (this.routerOutlet && this.routerOutlet.canGoBack()) {
this.routerOutlet.pop();
} else if (this.router.url === '/home') {
navigator['app'].exitApp();
}
});
I noticed that this.routerOutlet.canGoBack returns false when firing the event from the article page, so the routerOutlet.pop() is not fired. Not sure if this is to do with how I open the article page?
This is how i open the article page
viewArticle(articleId) {
let navigationExtras: NavigationExtras = {
state: {
articleId: articleId
}
};
this.navController.navigateForward(['/article'], navigationExtras);
}
What should happen when users click over back button of phone? In case when modal opens.
Registered a back button:
// To prevent interference with ionic's own backbutton handling
// you can subscribe with a low priority instead
this.platform.backButton.subscribe(() => {
// code that is executed when the user pressed the back button
// and ionic doesn't already know what to do (close modals etc...)
self.modalController.dismiss();
});
The problem with the code:
It closes/dismiss modal is fine!
But it also pushed back the page from where the modal is opened. Means it pop the page behind modal.
This should not happen the page should not pop - only modal should close.
Check the image gif added ->
Click here to see the problem
You may consider using platform.backButton.subscribeWithPriority() with a high priority (ex: 9999).
Then checking if there is a opened modal with modalController.getTop().
constructor(private modalCtrl: ModalController, private nav: NavController) {
}
ngOnInit() {
this.platform.backButton.subscribeWithPriority(9999, () => {
this.closeModalOrPage();
});
}
async closeModalOrPage(){
let modal = await this.modalCtrl.getTop();
if (modal){
modal.dismiss();
} else {
this.nav.pop();
}
}
I am using the app creator and trying to react to close tab window event using the code below.
I then preview the app in a separate window, but when I close the tab I don't get the confirmation pop up.
When I inject this code in the js console it works as expected.
Doesn't cloudfare app support such functionality?
window.onbeforeunload = function (e) {
// Your logic to prepare for 'Stay on this Page' goes here
return "Please click 'Stay on this Page' and we will give you candy";
};
I tested this and was able to see the pop up when after clicking to close the tab. Are you certain that this assignment is happening? In the previewed window, what is the output of window.onbeforeunload?
You also need to make sure to set the returnValueof e to something other than null e.g. :
function sendAlert() {
window.onbeforeunload = (e) => {
const dialogText = 'Random Text';
e.returnValue = dialogText;
return dialogText; }
}