Ionic-tabs content only loading for first tab and dissappears when changing tabs

ionic-v1
1

I have three tabs that contain a Google Map, and two RSS feeds respectively. When the app first loads, the first tab which contains the Google Map loads perfectly but when I change to another tab, the RSS feed does not load. When I change back to the first tab again, the Map does not load.

I am new to Ionic and Angular and am having a problem figuring out where the issue is. It’s as if the javascript only loads for the first tab, and does load for the subsequent tabs. Here is my html:

	<body ng-app="appBody">
	<ion-tabs class="tabs-icon-only">

	  <ion-tab title="Map" icon="ion-map" on-select="drawMap()">
		<header class="bar no-style cyan">
		  <h1 class="title">Map</h1>
		</header>
		<ion-content>
			<h1>Map</h1>
			<div id="map-canvas">Loading map...</div>
			<p id="geolocation">Watching geolocation...</p>
		</ion-content>
	  </ion-tab>

	  <ion-tab title="News" icon="ion-information-circled" >
		<header class="bar no-style cyan">
		  <h1 class="title">News</h1>
		</header>
		<ion-content>
		  <h1>News</h1>
		  <p>This is a news feed</p>
		  <div id="rss-news-feed"></div>
		</ion-content>
	  </ion-tab>

	  <ion-tab title="Events" icon="ion-calendar" >
		<header class="bar no-style cyan">
		  <h1 class="title">Events</h1>
		</header>
		<ion-content>
		  <h1>Events</h1>
		  <p>This is what's on</p>
		  <div id="rss-events-feed"></div>
		</ion-content>
	  </ion-tab>
	  
	</ion-tabs>
</body>

And the only Ionic javascript I have (I’ve left out the code for the Map):

angular.module('appBody', ['ionic']);

Is there a way to fire the relevant code each time a tab is selected? I’ve tried using the on-select attribute but it didn’t seem to work.

Thanks for your help.

2

What you could do is separate each all the logic that fetches the data into a factory. This way it will always be available to you.

3

Hi
I also face the same problem. i access data from database in controller and display it in ionic tab view using ng-repeat but when I navigate to tab data is not loaded and when i click that tab again then data displays. So I have to double click on tab to display data. So please tell me how to load data in single click on tab. I am new to ionic so please help me.

4

@mjhr786, Im also having the same issue here, In my case also tabs doesn’t load at the first click, If I click again it loads. Im on version 1.4.5

Have you found a solutions ?! . If so could u please share it,

thanks

cheers

Sam

5

I’m having the same issue.
Views inside tabs are loaded, but when you navigate away from them and then go back it doesn’t load anything, not even the controller.
Is there any particular thing about controllers asyn logic I’m missing?

6

I’m having the same issue.
First tab views does not show data until I trigger another tab and go back or touch the screen somewhere or trigger a select UI …etc.

7

@mjhr786 how do I double click the first tab to solve this same problem temporarily?

here is my code to try double click but not work:

export class FirstTabPage {

selectTab(index: number) {
var t: Tabs = this.navCtrl.parent;
t.select(index);
}

ionViewDidLoad() {
this.selectTab(0);
}

}