I have a login page where I disable the sidemenu with:
ionViewWillEnter() {
this.menuCtrl.enable(false);
}
ionViewDidLeave() {
this.menuCtrl.enable(true);
}
After logging in, I navigate to / which goes to /welcome:
this.router.navigate(['/']);
In /welcome, I have the menu turned on:
ionViewWillEnter() {
this.menuCtrl.enable(true);
}
Using Edge/Chrome, when I try to use the side-menu after logging in, it instead tries to "Go Back" to the login page:
Added: If I refresh the page after on /welcome, it reloads the page and fixes the sidemenu. So whatever is happening it seems like it must be left over from the login screen's functionality. Also, I thought adding ion-header fixed it, worked for about 2 logins then suddenly went back to it's previous behavior.
I've also noticed that if I sign out, the Angular authguard sends it back to /login, but if I try to swipe while on the login page, it tries to take me back to the app as though I was authenticated.. Then when I click on a link the Auth guard does it's job and sends be back to login again.
This time, I can still swipe left but a blank page tries to appear from the left instead - and this happens in desktop mode too.
Can anyone help me with this please?
I thought adding ion-header fixed it, it did at first, then suddenly started doing it again.
I finally ended up disabling Swipe within Ionic with:
IonicModule.forRoot({ swipeBackEnabled: false})
If anyone has any info it'd be appreciated.
Related
I am using JDK 1.8_202, appium 2.0.0-beta.46, node v18.12.0
There is a programmer developed back button (<--) whose className as "android.widget.Button" whose className as "android.widget.Button", but when I try to verify it using search option, I am getting this pop up.
Programmatically nothing is happening, even though as a CucumberBDD step, it is showing as executed.
I am executing on locally connected physical device 'Samsung galaxy note 8'
Why back button tap/click action is not working even when it is executed??
I open my flutter mobile app. I am at landing page
Do some navigation forward. Comeback to a dashboard page
From dashboard page to get back to landing page, there is a back button like (<--), which I manual tap and can get back to landing page, with no problem.
Programmatically nothing is happening, even though as a CucumberBDD step, it is showing as executed.
From Appium Inspector I see it's className as "android.widget.Button", but when I try to verify it using search option, I am getting this pop up.
The same button with the same click() method is working fine in another scenario.
I am using JDK 1.8_202, appium 2.0.0-beta.46, node v18.12.0
Does the previous navigation affects the functioning of the button click() action ? It should not be logically.
Why back button tap/click action is not working even when it is executed??
As part of the functionality of the app we are developing, when an android alarm is fired, a dialog box is to appear with an "Accept" or "Reject" button. Selecting reject does nothing, but selecting "Accept" triggers a callback from the plugin, which I have passed a function into. This function causes the ionic app to navigate to the root page of the app.
The issue I am having is, when I then navigate to another page after that where the user selects a value, and this value is displayed back to them and a button is enabled, the value display is not updating, and the button is not becoming enabled. Nothing seems to be updating.
What I have found is that pressing the back button on my android device will cause the page to update, which is not ideal.
This functionality works without the callback from the plugin.
What is happening here? And how do I fix it?
Passing the function into the plugin.
alarms_plugin.onAlarmRecieved = (alarmId) =>{
this.events.publish('alarmRecieved', alarmId);
}
Plugin-side functions
alarmRecieved: function(alarmId){
alarms_plugin.onAlarmRecieved(alarmId);
}
onAlarmRecieved: null
Navigating to root page on alarmRecieved
this.events.subscribe('alarmRecieved', (alarmId) =>{
if(alarmId != 'TIMEOUT')
this.nav.setRoot(HomePage);
});
Fix found by surrounding the this.nav.setRoot(HomePage) in this.zone.run(..).
Supposedly calling navigation within a subscription event causes issues like I was having.
I am creating an App with Ionic2 and the requirement is -
- the app when first loaded will show a Log In page and when logged in
- will have a Side-Menu enabled pages
The starter project shows that the Side Menu as the root of the app and loads first before any other page is open - then it loads the other related pages.
How can I build an app that Loads Log In page first and then set the Side Menu as the main navigation and never shows up the Log In screen??
I did this with ionic 1 but not being able to figure out with ionic2
Please help.
One solution would be to disable menu on Login screen and then to enable it after login.
You can disable menu by injecting MenuController and then use:
import {NavController, MenuController} from 'ionic-angular';
ionViewDidEnter() {
//to disable menu, or
this.menu.enable(false);
}
ionViewWillLeave() {
// to enable menu.
this.menu.enable(true);
}
#Digital IQ, you have to set your login page as the rootPage in your existing app.ts file and use MenuController in login page to make menu enable onPageDidLeave.
The example for this is available in ionic conference app where they have tutorial page before getting in to the actual application. Refer this for menu control and this (line 50) to set the initial page.
The above problem must have occurred because the user had surely logged in, but the changes i.e. setting it as the current user didn't take place in side menu page.
For that you can use Events API
Events is a publish-subscribe style event system for sending and responding to application-level events across your app.
For reference, go through the following answer-
Ionic 3 refresh side menu after login
kind Attn [vahid najafi & Aish123]
I tried something more easy and I found it working.
I set the LogIn page as the root when the app first loaded - and I removed 'menuToggle' button from this template.
Then I imported the Component I want to redirect on Log in
I created a singIn function in LogInPage class as follows:
signIn (){
let navRef = this.app.getComponent('nav');
navRef.setRoot(HelloIonicPage);
}
and it worked like a charm
I have this flow in my ionic app... login.html page(which is a "ion-view")->side-menu page(side-menu from ionic framework)->page2.html page(which is a "ion-view"). Now i want to implement "ion-nav-bar" with "ion-nav-back-button" in it. Normally when i want to go back from page2.html the app should sent me to side-menu page....instead, my app, sent me to login page. Seems like side-menu does not have "ion-view" in it and it is not recorded in app flow. Any suggestion how can i solve that ? thank you
There is no a state for side menu, you can not 'go back' to open side menu.
In the normal, for the login view, you should disable the state temporally. Then the app will not 'go back' to login view. You can do it like this:
$scope.doLogin = function () {
Auth.login($scope.loginData, function () {
console.log('login success');
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('home');
});
};
And you can also clear the view history of ionic to avoid going back with:
$ionicHistory.clearHistory();
$state.go('user.home');
How FB refreshes the page without reloading it (xmlHttpRequest) but Back/Forward Buttons still work as usual?
It's not about using history.pushState() methods. PushState() only changes URL-string but does nothing to get previous looking page after you click Back Button. So it's smth different.
Here's my code and example.
I have such site (look at the pic below). Header-div and Content-div. At the begining when you first time open it, the URL is mysite.com/page1.php. I want to change content in Content-div without reloading page. Just new info should appear in Content-div. And the URL should change to mysite.com/page2.php.
Here's HTML-code.
<div id="content"></div>
Reload Content
Here's JS-code to it.
document.getElementById("relaodLink").onclick = function() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "page2.php", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("content").innerHTML = xmlHttp.responseText;
}
}
return false;
}
So Header should not reload after pressing relaodLink, just content in Content-div changes. And most important: URL should change like page was really reloaded. Back Button allows to go to mysite.com/page1.php and then Forward Button allows to go back to mysite.com/page2.php again. With history.pushState() methods it doesn't work. But in FB Back and Forward Buttons work fine. How to make it?
(source: ljplus.ru)
This is an excellent question. If you observe, you can notice that the back buttons and forward buttons will work in gmail also though it is completely built on Ajax.
The browser back and forward buttons work on storing what is there in the address bar. So in Ajax, if you never change what is there in the address bar, it doesn't go into the history and hence back and forward buttons don't work.
For this to work, you need to append something to the address bar constantly.
For example : In gmail,
When Inbox is clicked - https://mail.google.com/mail/?tab=mm#inbox
When Starred is clicked - https://mail.google.com/mail/?tab=mm#starred
When Sent is clicked - https://mail.google.com/mail/?tab=mm#sent
So in this way, gmail keeps appending to address bar. Hence history is preserved. The same goes with facebook also. Though the page is not refreshed, the location in address bar changed - that's the key here !!
I hope it helps you !