Go to a specific page in ionic framework - android

Im stuck in a problem that i have to open a specific page in ionic framework using the controller.
I have to go to the following page
#/tab/hotel_details/1
when i click ok button in the ionic popup window
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Click OK for further details',
});
alertPopup.then(function(res) {
//Go to a specific page
});
};
I cant use $state.go("tab.hotel_details"); , because i have to go to hotel_details/1
I have to get rid of the above problem for further development of my app.

You can pass the id in the second parameter of the call to $state.go :
$state.go("tab.hotel_details", { "id": id })
Then, in your controller, you can retrieve the value from $stateParams :
var id = Number($stateParams.id)
Reference: Angular-ui State

You can still use the $location service if you want to navigate to a particular url instead of navigating by a state.
$location.path('/tab/hotel_details/1');

Related

Ionic 4 Delete Page from History (Android)

Android devices has back button on menu toolbar. I want to disable the possibility when i login to my app and click on that back button to route on login page.
I want if user click on back button after login then i close the app.
Here is my initial code for routing below.
if (token) {
this.router.navigate(['/main-tabs/tabs/dashboard'])
} else {
this.router.navigate(['/login']).then();
}
I've tried many other answers but none of them really works for me. But this one works :
To disallow the login from going 'back' to the authenticated page after logged out, just do something like this in your app-routing.module.ts :
{
path: 'home',
loadChildren: './home/home.module#HomePageModule',
canActivate: [LoggedAuthGuard]
}
The same for the opposite (to prevent going back into login page with back button) :
{
path: 'login',
loadChildren: './login/login.module#LoginPageModule',
canActivate: [NotLoggedAuthGuard]
}
And both LoggedAuthGuard and NotLoggedAuthGuard must implement CanActivate. Sample code as below (with Promise, but it also works with boolean return) :
import { Injectable } from '#angular/core';
import {CanActivate} from "#angular/router";
import {Storage} from "#ionic/storage";
#Injectable({
providedIn: 'root'
})
export class LoggedAuthGuard implements CanActivate {
constructor(protected storage: Storage) { }
async canActivate() {
return (await !!this.storage.get('access_token'));
}
}
For the NotLoggedAuthGuard you just returns the opposite of LoggedAuthGuard.
async canActivate() {
return (await !this.storage.get('access_token'));
}
Hope this helps.
This answer provides a solution for removing the login page from the browser's history by replacing it with a page, that the user was navigated to after successful login. It might be a good and quick solution to:
I want to disable the possibility when i login to my app and click on
that back button to route on login page.
What I understood from your question is after user login, You don't want to navigate to login page if back button is clicked. If I understood your question correctly you can try below solution.
one approach is changing root page
this.navCtrl.setRoot(HomePage);
or
You can achieve this by removing page from stack after successful transition. Place below code inside Login success method
let currentIndex = this.navCtrl.getActive().index;
this.navCtrl.push(DestinationPage).then(() => {
this.navCtrl.remove(currentIndex);
});
Hope this helps you.
I think you can do like that :
this.platform.backButton.subscribe((()=>{
if(this.router.url == <insertpathhome>)
{
this.platform.exitApp();
}
else{
//go back
}
});

Ionic InAppBrowser on Android doesn't navigate to custom Url Scheme

I am having a setup, where I open a url in the plugin InAppBrowser with target '_blank'. The plugin Deeplinks is also installed and configured.
const browser: InAppBrowserObject = this.iab.create(url, '_blank', <InAppBrowserOptions>{
location: "no",
toolbar: "no",
footer: "no"
});
browser.on('loadstart').subscribe((event: InAppBrowserEvent) => {
console.log(event);
if (event.url.indexOf('wflwr://payment/success') > -1) {
browser.close();
}
if (event.url.indexOf('wflwr://payment/cancel') > -1) {
browser.close();
}
if (event.url.indexOf('wflwr://payment/error') > -1) {
browser.close();
}
});
I shortened it to show just the important parts. The url which is opened is https://www.voan.ch/wfl/ (it is just a Mock before the real implementation)
The expected behaviour is, that on a click on each of the links on the url, the browser instance inside the app should close. This works as intended on iOS, but not on Android. The event is just not triggered. If I change one of the urls to e.g. CANCEL, then the Event gets triggered.
the support for this was added in latest pr
to use it you will need 2 things:
for example to allow whatsapp custom scheme and twitter
add new config.xml preference with the custom schemes you want to support:
<preference name="AllowedSchemes" value="whatsapp,twitter" />`
add event listeners customscheme:
inAppBrowserRef.addEventListener('customscheme', function (event) {
//do whatever you want here like:
window.open(event.url, "_system");
});

Titanium Alloy change url of webview, undefined

TL;DR I need to change the URL of a WebView I previously created in alloy.js inside a new controller but the URL is not changing no matter what I do. How do I do this?
====================================
I've been having problems left and right with Titanium's webview... Require serious assistance ASAP.
I'm using Alloy. What I'm trying to do is to change the URL of a webview that I've previously created in alloy.js.
My alloy.js file first creates a webview:
Alloy.Globals.webview = Titanium.UI.createWebView();
Alloy.Globals.setUserAgent(); //function that just sets the user agent
Alloy.Globals.webview.url = "http://www.google.ca";
Then on index.js, I have a button where when clicked, it creates and opens a new controller (the controller that contains the webview:
var win = $.index;
...
button.addEventListener('click',function(e)
{
var theTest = Alloy.createController('web').getView();
theTest.open();
win.close();
});
On web.js, I add the WebView (from alloy.js) to a view:
$.view_webview.add(Alloy.Globals.webview);
Still on web.js, I have another view (acts as a button) where when I click on it, it tries to change the url of this the webview I made in alloy.js:
view_getpoints.addEventListener('click', function(e){
$.Alloy.Globals.webview.url = "http://www.youtube.com";
$.Alloy.Globals.webview.reload();
});
This did not work, the url did not change. It was still on google.
I also tried setUrl("http://youtube.com"); instead of just url, nothing.
I then figured it might be because I'm trying to change just the variable, where when I really should be directly changing the element object I added to my $.view_webview view. So I tried that:
view_getpoints.addEventListener('click', function(e){
$.view_webview.getChildren(0).url = "http://www.youtube.com";
}
Aw man, "url" is undefined? Maybe I'm getting the child wrong. Let's output $.view_webview.getChildren(0) and see what we get:
view_getpoints.addEventListener('click', function(e){
Ti.API.info("child: " + $.view_webview.getChildren(0));
}
I was expecting this to output "child: undefined" but no...it isn't undefined..It outputs: "child: [object WebView]".
Whoa whoa whoa, hold on back up. It knows it's a WebView object? But...shouldn't I be able to access the url and setUrl() fields from this object then as stated by the docs?
http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.WebView-property-url
Why can't I change it directly?
I'm out of options.
TL;DR I need to change the URL of a WebView I previously created in alloy.js inside a new controller. How do I do this?

Update one page with jQuery, in single html file

I've got a single html with 5 pages + navbar. To force a refresh of one page I use this:
$("#page3").on("pagecreate", function(e) {});
It works the first time, but I want it to update every time I visit the page. I know there is .trigger("create"), and "refresh", but I can't get it to work properly...
jQuery Mobile 1.4.0
You need to listen to pageContainer event in order to determine which page is active and accordingly run the functions you want.
The new events can't be attached to a specific page, unlike successor versions of jQuery Mobile. Once an event is occurred, retrieve ActivePage's ID.
$(document).on("pagecontainerbeforeshow", function (e, ui) {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
if(activePage == "page3") {
doSomething();
}
});
Demo

Titanium device back button not closes my application properly

I am working Android mobile application using Titanium studio.I have developed small application.After logging into application will display two tabs on my new window; after clicking any other tab it opens correct window.But when I click device back button (back button on my android phone simulator) it not closes my application. it render one blank window and if I again click back button it closes my application
after log in successful I used window-name.close(); so that it not render again sign in form. But I am using .close() for only sign in window so that after clicking back it will not show sign in page again.
var user1 = Ti.UI.createWindow
({
navBarHidden : false,
url:'main.js',
});user1.open();
w.close();
home.close();
========== main=============
var mainTabGroup = Titanium.UI.createTabGroup();
var feedWin = Titanium.UI.createWindow({
url:'home/feed.js'
});
var feedTab = Titanium.UI.createTab({
title:'Feed',
window:feedWin
});
var listWin = Titanium.UI.createWindow({
url:'home/list.js'
});
var listTab = Titanium.UI.createTab({
title:'List',
window:listWin
});
mainTabGroup.addTab(feedTab);
mainTabGroup.addTab(listTab);
mainTabGroup.open();
you need to set
exitOnClose:true
on whichever window you want to trigger the closing of the app when that window is closed
From the appcelerator documentation, Titanium.UI.Window
(Android only.) Boolean indicates if the application should exit when
the Android back button is pressed while the window is being shown.
You can only set this as a createWindow({...}) option. Setting it
after window creation will no effect.

Categories

Resources