Trying to navigate from the starting page (i'm using a side menu rather than tabs).
The navigation seems to work, but only after pressing the button twice (the old pages does not leave the DOM, but the new pages constructor fires, and replaces the header to the page. I can then press the navigate button again, which re-runs it's page logic and renders the rest of the page. I've attached some screenshots:
This is the main login:
After pressing the button to login, the next pages logic runs, and the header changes. But the old page doesn't leave.
I can press login again, the next pages logic runs again then it renders the page.
Here's the code:
login(){
this.refToProgram.loggedIn = true;
this.nav.push(NearmePage).then(
response => {
console.log('Response ' + response);
},
error => {
console.log('Error: ' + error);
}
).catch(exception => {
console.log('Exception ' + exception);
});
}
The result of this is: 'Response true'
Which means ionic thinks the navigation was successful, what am I missing?
try to navigate with [navPush]= "nearmePage"; Inside the login button
Inside your controller
Insert the nearmePage class and the inside your LoginPage class
declare nearmePage = "NearmePage" so that will take to the respected page form login page
Related
I am new to ionic framework and I am unable to manage hardware back click functionality in Iframe. I am using Iframe to load certain url. While clicking the hardware back button I should be able to navigate back to the browser history page. But whenever I click hardware back its exiting the app.
`<iframe #iframe id="iframe" style="height: 100%;width: 100%;" src="your url"></iframe>`
#ViewChild('iframe') iframe:ElementRef;
constructor(public platform:Platform,public nav:Nav){
platform.registerBackButtonAction(() => {
if(this.nav.canGoBack()){
this.iframe.nativeElement.contentWindow.history().back();
}
});
}
You can use window.history.back():
ionViewDidLoad() {
this.navBar.backButtonClick = (e: UIEvent) => {
window.history.back();
}
this.initializeBackButtonCustomHandler();
}
ionViewWillLeave() {
// Unregister the custom back button action for this page
this.unregisterBackButtonAction && this.unregisterBackButtonAction();
}
initializeBackButtonCustomHandler(): void {
this.unregisterBackButtonAction = this.platform.registerBackButtonAction(function(event){
window.history.back();
}, 101); // Priority 101 will override back button handling (we set in app.component.ts) as it is bigger then priority 100 configured in app.component.ts file */
}
More info about this method can be found here.
I am using Ionic 2 and angular 2 for application development . I created popup using ionic-angular modal.I need navigation from popup to other page using ionic navigation( push ) method. But 'its not working on my end. The next page is loading in same component.
My code
For opening popup
openModal() {
let myModal = this.modalCtrl.create(CreateModal);
myModal.present();
}
this function will open the popup. In popup html i have on click function.
<h2 (click)="goTonext()" data-dismiss="create-modal" >Next page</h2>
The click function
goTonext() {
this.viewCtrl.dismiss();
this.navctrl.push(NextPage
, {
id: res.status
}
);
}
this function will close the popup and loading the next page in same page.
It's not loading next page separately.
Please help!!!
When you are calling this.view.dismiss() it is closing the modal.
If you want to do some action after dismiss, you can do it in onDidDismiss() of the modal.
In your original component,
openModal() {
let myModal = this.modalCtrl.create(CreateModal);
myModal.onDidDismiss(data=>{
if(data){
this.navctrl.push(NextPage
, {
id: data.status
}
}
);
});
myModal.present();
}
Send the res in dismiss function call.
this.viewCtrl.dismiss(res);
I am new to EmberJS and have existing code.
I have a login form which should be posted on hitting enter button.
First time everything goes smooth and working as expected, once I log out- it clears the session and redirects me to login view and then the problem starts as that.get("controller") is undefined this time.
My Login view is having below code
didInsertElement: function () {
var that = this;
Ember.$(document).keyup(function (e) {
if (e.which == 13) {
that.get("controller").send("login");
// **As that.get("controller") is undefined I want to set that**
//that.set("controller"); //- **CAN I DO THIS?**
}
});
}
My problem is - that.get("controller") is undefined.
When I tried that.set("controller"); - it says that
Assertion Failed: calling set on destroyed object
I have written this simple demo component to demonstrate a problem. The component code is below
App.FocusOutComponent = Em.Component.extend({
attributeBindings: ['tabindex'],
tagName: 'focus-out',
setFocus: function() {
console.log('clicked focus-out container');
this.$().find('button').focus();
console.log('focus set to button');
}.on('click'),
focussedOut: function() {
console.log('focussedOut from outer container');
}.on('focusOut'),
});
{{#focus-out id="focus-container" tabindex="-1"}}
<button id="text-button">Test Button</button>
{{/focus-out}}
When I run this and click on the focus-out element, this is the order of the logs. Link to demo
clicked focus-out container
focussedOut from outer container
focus set to button
Now when I am trying to write acceptance tests for this with the following code.
test('test visit / and click button', function() {
expect(0);
visit('/').then(function() {
find('focus-out').click();
console.log('after click in test');
});
});
The order of the logs are different. Link to demo.
clicked focus-out container
focus set to button
after click in test
focussedOut from outer container
The focusOut log got printed at the very end instead before the after click log. I was expecting the same order for the logs with just an additional log(after click) in the end.
Im not sure if this is a bug or something wrong with my code.
I also noticed another problem while executing tests. If I have focus on the chrome dev-tools while the tests are running, the focusOut event will not trigger at all.
Some help with this is much appreciated.
the click event doesn't set focus (being a back door route). You'll need to manually set focus then click if you want the same results.
Ember's Click Helper (sends mousedown/mouseup, then click)
function click(app, selector, context) {
var $el = app.testHelpers.findWithAssert(selector, context);
run($el, 'mousedown');
if ($el.is(':input')) {
var type = $el.prop('type');
if (type !== 'checkbox' && type !== 'radio' && type !== 'hidden') {
run($el, function(){
// Firefox does not trigger the `focusin` event if the window
// does not have focus. If the document doesn't have focus just
// use trigger('focusin') instead.
if (!document.hasFocus || document.hasFocus()) {
this.focus();
} else {
this.trigger('focusin');
}
});
}
}
run($el, 'mouseup');
run($el, 'click');
return app.testHelpers.wait();
}
Modified Test
test('test visit / and click button', function() {
expect(0);
visit('/').then(function() {
var el = find('focus-out');
el.focus();
click(el);
console.log('after click in test');
});
});
http://emberjs.jsbin.com/lefazevozi/1/edit?js,console,output
It's also important to note, that tearing down will also call the focus out event. So the main reason you were seeing the focusout at all was because on teardown it was losing focus from the button child.
Maybe focus should be set before mousedown on the click helper in the ember test, though I'm not sure what else that might affect, or if people wouldn't generally be expecting that since jquery doesn't do that.
So I'm adding the 'like' button to my site and I've got it to display "Thank you for liking example.com" and "You seemed to have unliked example.com" using edge.create;
FB.Event.subscribe('edge.create',
function(response) {
document.getElementById("demo").innerHTML=('Thank you for liking example.com');
}
);
FB.Event.subscribe('edge.remove',
function(response) {
document.getElementById("demo").innerHTML=('You seemed to have unliked example.com');
}
);
However this method only works when the button is clicked. If a visitor comes to my site and has already liked example.com I would like to show them a message without them having to click anything.
I know this is possible to do on a facebook page but what about on my own site. Any ideas?
Cheers
Certainly possible using FB.getLoginStatus
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
} else {
// no user session available, someone you dont know
}
});
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
Keep in mind that this refers to a user being logged in to your app and / or Facebook. If someone is not logged in to Facebook, they will of course return FALSE and thus your message should reflect to have them connect OR login.