this is Ionic version 1 question:
i have 4 tabs, each of the tab have it's content, one of them have a list inside it...
so if we have a list inside 3rd tab, then we choose the list and go to single page with back button...
after i tab the back button, it back to 1st tab, not to 3rd tab...
it seems that it cannot remember the position by default, i have tried some workaround like this...
i set the tab just before it enter the previous page:
$scope.$on("$ionicView.beforeEnter", function (event, data) {
$ionicTabsDelegate.select($scope.maintabindex);
});
with this on-select on each tab:
<ion-tab title="Forum" icon-on="ion-tab-fa-headphones" icon-off="ion-tab-fa-headphones" on-select="tabSelected()" href="#/app/home">
and then i have this function:
$scope.tabSelected = function () {
$scope.maintabindex = $ionicTabsDelegate.selectedIndex();
};
the problem is, the on-select method executed after i back to the parent page (*with tab page), so it cannot working well, because $ionicTabsDelegate.selectedIndex() on-select always give 0 index after i back from the single page to the tabbed page
any idea?
The ionic go back button should work in those scenarios, be sure that the child's view route is using the same ui-view as the parent tab. If that is the case and it is still not working, it's better for you to override the backbutton on the childs view to go to the parent.
Like this:
<ion-nav-bar ng-controller="MyCtrl">
<ion-nav-back-button class="button-clear"
ng-click="myGoBack()">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
function MyCtrl($scope, $ionicHistory) {
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
}
You can even replace the myGoBack() function with $state.go('parent-tab-view')
Related
Pages structure is: Tabs(page1,page2,page3).
When I click a button within in page1, I want to go to page4,
but now we still can see tab, how to make page4 displays as a normal page and can back to tabbed page.
In page1, I use below line to go to page4
this.navCtrl.push(page4);
I think you could first try the following, which is for test only to understand
that this is achievable:
pass params to the ion-tabs like this:
<ion-tabs>
<ion-tab [root]="tabMap" [rootParams]="tabParams" tabIcon="map"></ion-tab>
<ion-tab [root]="tabList" [rootParams]="tabParams" tabIcon="list"></ion-tab>
</ion-tabs>
Prepare the params in the tabs.ts like this:
ionViewWillEnter() {
this.tabParams.parentNav = this.navCtrl;
}
So in the inner page (page1, 2, 3) you can retrieve it, place it in a variable e.g. parentNav, and when you want to navigate out of the tabs page to do a this.parentNav.push(page4).
The proper way I think is to use events events: ionic forum
So in the tabs.ts page you could have this piece of code:
events.subscribe('tabs:newPage', (page) => {
this.navCtrl.push(page);
});
And in each page, or in a service you could have:
newPage(page) {
console.log('navigate to a new page, not a tab')
this.events.publish('tabs:newPage', page);
}
What ionic is ?
If lazy loading,maybe ionic 3 , hod did you declare page4?
You have to push it like this : this.navCtr.push('page4');
If is all ok try this (it 's extracted form an app example) :
static get parameters() {
return [[IonicApp], [NavController], [ConferenceData], [UserData]];
}
constructor(app, nav, ...) {
// all of the constructor code
}
tourFunction() {
let nav = this.app.getComponent('nav');
nav.push('page4');
}
Ref
I am working on a SAP Fiori app and I am stuck in this problem for about 2 weeks with no result. I have a "create" fragment which is attached to "Detail" view.
When I open the "create" fragment and want to go back to the main detail view, the back button doesn't work therefore I have to refresh the app.
I guess the back button doesn't work the same way between views & between fragments.
Here's my back button function :
cancel: function() {
var oHistory = sap.ui.core.routing.History.getInstance(),
sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
// The history contains a previous entry
history.go(-1);
}
},
Here when I display sPreviousHash, it's undefined. Why?
Where is the back button that you are referring to?
I would expect that the fragment is a dialog and therefore that there is no back button. A close button is needed which will result in the fragment being closed. Depending on the requirements, the back navigation could then be done from the controller where the fragment was created.
Fragments are a technique to reuse UI parts, but are not part of the MVC concept. You cannot navigate directly to/from a fragement and this has to be done using views. Therefore the history is not available in a fragment. The BROWSER back button will take you to the previous screen in the BROWSER history.
Controller of the view in which the fragment as a dialog is opened.
_initializeReviewDialog: function() { this._oReviewDialog = sap.ui.xmlfragment(this.getView().getId(), "ReviewDialog", this);
this.attachControl(this._oReviewDialog);
},
Event in View that triggers the dialog opening
onEditReviewPressed: function(oEvent) {
if (!this._oReviewDialog) {
this._initializeReviewDialog(); }
}
this._oReviewDialog.open();
},
onReviewDialogOKPressed: function(oEvent) {
this._oReviewDialog.close();
},
Add fragment as a Dependent, so that models and events from owning view/controller are know
attachControl: function(oControl) {
var sCompactCozyClass = this.getOwnerComponent().getContentDensityClass();
jQuery.sap.syncStyleClass(sCompactCozyClass, this.getView(), oControl);
this.getView().addDependent(oControl);
},
FragmentDefinition
<core:FragmentDefinition id="ReviewDialogFragment" xmlns="sap.m" xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core">
<Dialog id="reviewDialog" >
<content>
... </content>
<beginButton>
<Button id="btnOK" text="{i18n>xbut.ok}" press="onReviewDialogOKPressed"/>
</beginButton> </Dialog>
</core:FragmentDefinition>
I have 2 views as follows
.state('tab.matches', {
url: '/matches',
views: {
'tab-matches': {
templateUrl: 'templates/bant-tab-matches.html',
controller: 'MatchesCtrl'
}
}
})
.state('tab.matches-detail', {
url: '/matches/:matchId/:userId/:userName',
views: {
'tab-matches': {
templateUrl: 'templates/bant-tab-matches-detail.html',
controller: 'MatchesDetailCtrl'
}
}
})
I have a button on a different view which on click calls a function in the controller as follows:
$scope.messageUser = function (postInfo) {
$state.go('tab.matches-detail', { matchId: var1, userId: var2, userName: var3 });
}
This redirects to the tab.matches-detail view as expected but a back button is not present. I would like the back button to redirect back to the parent view being tab.matches, or the view I originally redirected from. If I navigate from tab.matches to tab.matches-detail (when I have not redirected by $state.go) the back button is present. I however am going direct to tab.matches-detail when $state.go is called. As such I can no longer access tab.matches as if I click on another tab and then return to tab.matches it displays tab.matches-detail with no way to access the parent state of tab.matches. I can't figure out how to get the back button to display. I need this to be controlled from the controller rather than a href in the view as I need to call similar functionality from an Actionsheet where the logic is all controller side.
Apologies for the rather verbose explanation but I want to be clear on the issue.
Thanks in advance for your help.
Anthony
To resolve this issue I set the back button in the view as not visible by setting hide-back-button="true" in the <ion-view> tag, then added a button for the header as follows:
<ion-nav-buttons side="left" class="button-clear customButton">
<div class = "buttonMatchesInner" ng-click="matchesGoBack()">
<i class="ion-chevron-left matchLeftIcon"></i>
</div>
</ion-nav-buttons>
With the click event calling:
$scope.matchesGoBack = function() {
$state.go('tab.matches');
}
I need to hide dockbar for non logged in guests. I did that by creating custom theme that uses welcome-theme as a parent, and the following snippet:
#if($is_signed_in)
#dockbar()
#end
in theme's templates\portal_normal.vm.
This presents another problem - when page reorders to fit a mobile screen, menu collapses to a button in the dockbar which is hidden. I would love to have it collapse somewhere else, just that it isn't hidden - for example next to the small logo / site title, or as a first breadcrumbs item.
How to do it, or where to begin. I appreciate any help.
Menu collapses by default for phone and tablet viewports. You can create your own button to open/close collapsed menu in phone/tablet viewport. Check following simplified example:
Theme velocity template:
#if(!$is_signed_in)
<div id="mainNavigationToggle" class="btn btn-secondary">
<i class="icon-reorder"></i>
</div>
#end
Theme main.js:
AUI().ready(function (A) {
var navigationToggleBtn = A.one('#mainNavigationToggle'); // get our toggle button
var navigationUl = A.one(Liferay.Data.NAV_SELECTOR); // get default navigation ul element
if (navigationToggleBtn && navigationUl) { // do nothing when toggle button not present (user not signed in) or if navigation is not present
navigationToggleBtn.on( // otherwise assign simple function that'll toggle 'open' menu class on default navigation which will cause it to open, same for menu toggle button
'click',
function (event) {
navigationToggleBtn.toggleClass('open');
navigationUl.toggleClass('open');
}
);
}
}
);
Theme custom.css:
#mainNavigationToggle {
display: none; /* hide by default */
#include respond-to(phone, tablet) {
display: block; /* show only for phone and tablet viewports */
}
}
I am trying to get jQuery tabs to behave like IE and Firefox. I have a few tabs with an "addtab" at the end. When this tab is clicked a new tab is added, this is fine. But i want to select the second last tab. This is proving to be quite difficult.
my init code is
$tabs =$("#tabs").tabs({
add: function(event, ui) {
$tabs.tabs('select', $tabs.tabs( 'length' ) -2);
alert ("after setting tab");
}
});
my add tab code is
$("#addtab").click(function(){
showcal();
// The first thing to do is to deselect all the other selections
$("#tabs .ui-corner-top").each (function () {
$(this).removeClass ("ui-tabs-selected ui-state-active").addClass ("ui-state-default");
});
$tabs.tabs('add','#extra','Generate Report', ($tabs.tabs('length')-1));
tabContainerTabCount++;
});
however in the add callback the following line is resetting the selected tab
self._trigger('select', null, self._ui(this, $show[0])) === false)
If anyone has any solution or reason why this is done, can you let me know
Thanks
John
I was pointed to the answer at the following web page
http://forum.jquery.com/topic/ui-tabs-unable-to-set-index-after-add#14737000000698077
thanks tsukasa1989