3. multiple navigator with tabbar not working in newer version of onsen

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

multiple navigator with tabbar not working in newer version of onsen

  • G

    this is my code it was working fine in older onsen version before ons-card and toast were released

    here’s my index.html

    <html>
<head>
  <link rel="stylesheet" href="components/loader.css"/>
  
    <script src="components/loader.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body >
 <ons-modal id="modalId" animation="fade">
  <ons-icon size="20px" style="color:#e6ccb3" icon="ion-load-c" spin="true">
  </ons-icon>
  Loading ...
  
  
  </ons-modal >
 
<ons-page>
<ons-tabbar >
  <ons-tab page="promotion.html" label="Promotion" icon="ion-ios-pricetag" active="true"></ons-tab>
  <ons-tab page="directory.html" label="Directory" icon="ion-chatbox-working"></ons-tab>
  <ons-tab page="movie.html" label="Movie" icon="ion-ios-pricetag"></ons-tab>
  <ons-tab page="ifc.html" label="My Fortune" icon="ion-ios-cog"></ons-tab>
</ons-tabbar>
</ons-page>


</body>
</html>
    0
  • G

    directory.html

     <ons-navigator  id="screenNavigatorId" var="mainScreenNavigator" >
<ons-page ng-controller="directoryController">
  <ons-toolbar>
			<div class="div_exp3 " id="div2"  >
				<b style="float:right;"><i class="fa fa-home" aria-hidden="true" style="font-size:22px;color:#696969;margin-top:-50px;" ></i></b>   
			</div>
           
			<img src="images/fnnl.png" width="100%" height="235%;"> 
	</ons-toolbar>
   <div class="tab-bar tab-bar--top tab-bar--top-border" style="background-color: white;">
  <label class="tab-bar__item tab-bar--top-border__item">
    <input type="radio" name="top-tab-bar-b" checked="checked">
    <button class="tab-bar__button tab-bar--top-border__button">

    <i class="fa fa-shopping-cart" aria-hidden="true" style="color:black;" ></i> <b style="color:gray;"> Directory</b>
    </button>
  </label>	
  </div>

      <ons-list>
      
<div class="tab-bar tab-bar--top tab-bar--top-border" style="background-color: #DCDCDC;">
<table style="width:100%;">
		<tr>
			<td align="center">
				<label ng-click="byDirectoryChange(0)" class="tab-bar__item tab-bar--top-border__item"  style="color:red";>
				<input type="radio" name="top-tab-bar-b" checked>
				<button  class="tab-bar__button tab-bar--top-border__button" id="ifcMallId" onclick="toggleFunction()">
				BY CATEGORY
				</button>
				</label>
			</td>
			<td>
				   
				<label style="width: 1px;background-color: gray;border: 1px ridge silver ;
							border-radius: 1px;float:center;height:100px;"></label>
			</td>
			<td align="center">
			
				<label ng-click="byDirectoryChange(1)" class="tab-bar__item tab-bar--top-border__item">
				<input type="radio" name="top-tab-bar-b">
				<button  class="tab-bar__button tab-bar--top-border__button" onclick="myFunction();">
				BY LEVEL
				</button>
				</label>	
		</td>
		</tr>
	 </table>
</div>

<div id="byCategoryId" ng-repeat="tag in tagmaster" ng-if="tagmaster">
  
  

        <ons-list-item tappable modifier="chevron" ng-click="mainScreenNavigator.pushPage('storelist.html', {data: {id: tag.tagid}});"> 
		
         <img id="{{'showImageId_'+$index}}" ng-click="displayImage($index);mainScreenNavigator.pushPage('storelist.html', {data: {title: 'Page 2'}});" class="list__item__thumbnail list__item--material__thumbnail" ng-src="{{tag.storephoto}}">
        <div  style="margin-left:20px;">{{tag.tagname}}</div>
		
		</ons-list-item>
		<div style="display:none;margin-left:100px;margin-top:0.1%;" id="{{'shopCategoryDetailsId_'+$index}}">
		
		</div>
</div>

<div id="byCategoryId" ng-repeat="mall in malllevelmaster" ng-if="malllevelmaster">
  
        <ons-list-item tappable modifier="chevron" ng-click="mainScreenNavigator.pushPage('storelist.html', {data: {id: tag.tagid}});"> <!-- showShopDetails(mall.malllevel,$index);-->
         <img class="list__item__thumbnail list__item--material__thumbnail" ng-src="{{mall.storephoto}}">
        <div  style="margin-left:20px;">{{mall.malllevel}}</div></br></br>
	
		</ons-list-item>
		<div style="display:none;margin-left:100px;margin-top:0.1%;" id="{{'shopDetailsId_'+$index}}">
		
		</div>
		
</div>


      </ons-list>
 </ons-page>
</ons-navigator>
    0
  • G

    here’s my movie.html

    <ons-navigator   var="movieNavigator" >
<ons-page>
  <ons-toolbar>
			<div class="div_exp3 " id="div2"  >
				<b style="float:right;"><i class="fa fa-home" aria-hidden="true" style="font-size:22px;color:#696969;margin-top:-50px;" ></i></b>   
			</div>
          <img src="images/fnnl.png" width="100%" height="235%;"> 
	</ons-toolbar>
  <div class="tab-bar tab-bar--top tab-bar--top-border" style="background-color: white;">

  <label class="tab-bar__item tab-bar--top-border__item">
    <input type="radio" name="top-tab-bar-b" checked="checked">
    <button class="tab-bar__button tab-bar--top-border__button">

    <i class="fa fa-cloud" aria-hidden="true" style="color:black;" ></i>  <b style="color:gray;">Movies</b>
    </button>
  </label>
  </div>
 <!-- <div class="center"><i class="fa fa-cloud" aria-hidden="true" style="color:black;" ></i>  <span style="color:black;">Booking</span>
  </div>-->
  
  
      
 <div class="tab-bar tab-bar--top tab-bar--top-border" style="background-color: #DCDCDC;">
 <table style="width:100%;">
	<tr>
		<td align="center">
		
			<label class="tab-bar__item tab-bar--top-border__item">
			<input type="radio" name="top-tab-bar-b" checked="checked">
			<button class="tab-bar__button tab-bar--top-border__button">
				Now Showing
			</button>
			</label>
		</td>
		<td align="center">
			<label style="width: 1px;background-color: gray;border: 1px ridge silver ;
							border-radius: 1px;float:center;height:100px;"></label>
		</td>
		<td align="center">

				<label class="tab-bar__item tab-bar--top-border__item">
				<input type="radio" name="top-tab-bar-b">
				<button class="tab-bar__button tab-bar--top-border__button">
				Coming Soon
				</button>
				</label>
		</td>
	</tr>
</table>
</div>
<ons-list class="timeline" modifier="inset">
<ons-list-item ng-click="movieNavigator.pushPage('moviestyle.html')" class="timeline-li" modifier="tappable" >
<ons-row style="margin-top:0px;">
<ons-col width="50px">
 <img src="images/mall.jpg" class="timeline-image" style="height:150px; width:120px; ">
</ons-col>
         <ons-col style="margin-left:80px;">
           
           <div >
             <p font="verdana"><b>The Dark Tower</b> </p>
            <i class="fa fa-thumbs-up" aria-hidden="true" style="color:green"></i><b style="margin-left:5px;">96%</b> 1375 Votes
            <p font="verdana">  Priynaka Chopra Shivani Satpute</p> 
            <span class="notification" style="background-color:#e0e0e0; color:black; margin-top:-10px;">Adventure </span><span class="notification" style=" margin-top:-10px; background-color:#e0e0e0; color:black; margin-left:10px;">Mystery </span>
           </div>

         
     </ons-list-item>
   </ons-list>
   
   
<ons-list class="timeline" modifier="inset">
<ons-list-item onclick="window.location.href='moviedetail.html'" class="timeline-li" modifier="tappable" >
<ons-row style="margin-top:0px;">
<ons-col width="50px">
 <img src="images/mall.jpg" class="timeline-image" style="height:150px; width:120px; ">
</ons-col>
         <ons-col style="margin-left:80px;">
           
           <div >
             <p font="verdana"><b>The Dark Tower</b> </p>
            <i class="fa fa-thumbs-up" aria-hidden="true" style="color:green"></i><b style="margin-left:5px;">96%</b> 1375 Votes
            <p font="verdana">  Priynaka Chopra Shivani Satpute</p> 
            <span class="notification" style="background-color:#e0e0e0; color:black; margin-top:-10px;">Adventure </span><span class="notification" style=" margin-top:-10px; background-color:#e0e0e0; color:black; margin-left:10px;">Mystery </span>
           </div>

         
     </ons-list-item>
   </ons-list>
      
<ons-list class="timeline" modifier="inset">
<ons-list-item class="timeline-li" modifier="tappable" >
<ons-row style="margin-top:0px;">
<ons-col width="50px">
 <img src="images/mall.jpg" class="timeline-image" style="height:150px; width:120px; ">
</ons-col>
         <ons-col style="margin-left:80px;">
           
           <div >
             <p font="verdana"><b>The Dark Tower</b> </p>
            <i class="fa fa-thumbs-up" aria-hidden="true" style="color:green"></i><b style="margin-left:5px;">96%</b> 1375 Votes
            <p font="verdana">  Priynaka Chopra Shivani Satpute</p> 
            <span class="notification" style="background-color:#e0e0e0; color:black; margin-top:-10px;">Adventure </span><span class="notification" style=" margin-top:-10px; background-color:#e0e0e0; color:black; margin-left:10px;">Mystery </span>
           </div>

         
     </ons-list-item>
   </ons-list>
</ons-page>
</ons-navigator>
 <!--<ons-row style="width:100%; height:auto;">
<div class="div_exp1" style="width:100%;  id="div2">
           
          
<ons-button 
style="margin-top:154px; border:black; width:36%; height:46px;background:transparent;color:white;">
 <div class="timeline-from">
                  <span class="timeline-name">Fortune Mall 1</span>
                  
                </div></ons-button> 
   
   
  </div>
    
   <img src="images/about-2.jpeg" style="height:200px; width:100%;">  
    
    
</ons-row>
  <ons-row style="width:100%; height:auto; margin-top:10px;">

      
 
          <div class="div_exp1" style="width:100%;  id="div2">
           
          
<ons-button 
style="margin-top:154px; border:black; width:36%; height:46px;background:transparent;color:white;">
 <div class="timeline-from">
                  <span class="timeline-name">Fortune Mall 1</span>
                  
                </div></ons-button> 
   
   
  </div>
    
   <img src="images/about-2.jpeg" style="height:200px; width:100%;">  
    
    
</ons-row>
 <ons-row style="width:100%; height:auto;  margin-top:10px; ">
 
      
 
          <div class="div_exp1" style="width:100%;  id="div2">
           
          
<ons-button 
style="margin-top:154px; border:black; width:36%; height:46px;background:transparent;color:white;">
 <div class="timeline-from">
                  <span class="timeline-name">Fortune Mall 3</span>
				  
                  
                </div></ons-button>  
   
   
  </div>
    
   <img src="images/mall.jpg" style="height:200px;" width="100%";>  
    
    
</ons-row>
</ons-page> -->
    0
  • G

    after clicking on tabbar which has navigator and again click to other tab I am getting error as
    Invalid state: page element must be a “ons-page” element. but I want navigator too

    0 1 Reply
  • Onsen UI

    @Gaurav Tabbar, Navigator and Splitter can only load ons-page elements inside. Simply wrap your inner ons-navigator inside an ons-page and it should work.

    For the next issue report, please remove the irrelevant parts of your code that are not necessary to show the issue (like lists, page content etc).

    0
  • Onsen UI

    This post is deleted!
    0
  • G

    ok I will try and let you know

    0
  • G

    @misterjunio @Fran-Diox it is working but now back button not working after pushPage

    0
  • G

    here’s my storelist.html which I have called in directory.html

     <ons-page id="storeListId" ng-controller="storeListController">
     <ons-toolbar style="background-color:white;">
		<div class="left"><ons-back-button style="color:black">back</ons-back-button></div>
		<div class="center" style="color:black;">FORTUNE ICON</div>
		<div class="right"> <i class="fa fa-home" aria-hidden="true" style="font-size:22px;color:#696969;margin-top:-50px;" ></i></div>
	
	</ons-toolbar>
	 <div class="tab-bar tab-bar--top tab-bar--top-border" style="background-color: white;">
  <label ng-click="checkData()" class="tab-bar__item tab-bar--top-border__item">
    <input type="radio" name="top-tab-bar-b" checked="checked">
    <button class="tab-bar__button tab-bar--top-border__button">

     <b style="color:gray;" > Directory</b>
    </button>
  </label>	
  </div>
  
<div class="tab-bar tab-bar--top tab-bar--top-border" style="background-color: #DCDCDC;">
<table style="width:100%;">
		<tr>
			<td align="center">
				<label ng-click="byDirectoryChange(0)" class="tab-bar__item tab-bar--top-border__item"  style="color:red";>
				<input type="radio" name="top-tab-bar-b" checked>
				<button  class="tab-bar__button tab-bar--top-border__button" id="ifcMallId" onclick="toggleFunction()">
				BY LIST
				</button>
				</label>
			</td>
			<td >
				   
				<label style="width: 1px;background-color: gray;border: 1px ridge silver ;
							border-radius: 1px;float:center;height:100px;"></label>
			</td>
			<td align="center">
			
				<label ng-click="byDirectoryChange(1)" class="tab-bar__item tab-bar--top-border__item">
				<input type="radio" name="top-tab-bar-b">
				<button  class="tab-bar__button tab-bar--top-border__button" onclick="myFunction();">
				FLOORPLAN
				</button>
				</label>	
		</td>
		</tr>
	 </table>
</div>
  <div align="center" style="border: 1px solid #A0A0A0;background-color:#A0A0A0">
	 <p style="text-align: center;">
    <input type="text" name="search" ng-model="search" style=" width: 130px;box-sizing: border-box;
    border: 2px solid #ccc;border-radius: 10px;font-size: 16px;background-color: white;
    background-image: url('images/search.png');background-position: 0px 0px; background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;width:100%;">
  </p>
  	
  </div>
  <div style="background-color:#e6ccb3">
	<span style="margin-left:20px;">A</span>
  </div>
   <ons-list-item tappable class="timeline-li"  ng-click="mainScreenNavigator.pushPage('storedetails.html', {data: {shopdetail: shop}})" id="myIfcId" ng-repeat="shop in shopdetails| filter : search" style="">
            <ons-row class="ifcmall">
              <ons-col width="50px">
                <img ng-src="{{shop.storephoto}}" class="timeline-image" style="height:130px; width:80px">
              </ons-col>

              <ons-col style="margin-left:50px;">
                
                <div class="timeline-from">
                  <span class="timeline-name" style="color:brown;"><strong>{{shop.storename}}</strong></span>
                 <!-- <span class="timeline-id">@daveg</span>-->
                </div>
				<br>
                <div class="timeline-message">
                 <i class="fa fa-map-marker" aria-hidden="true" style="color:#e6ccb3"></i>&nbsp;&nbsp;{{shop.storeaddress}}
                </div>
				<br>
                
				<ons-button modifier="large"  style="background-color:gray">Show in Floorplan > </ons-button>
              </ons-col> 
            </ons-row>
	
          </ons-list-item>

  </ons-page>
    0 1 Reply
  • Onsen UI

    @Gaurav change all your classes with tab-bar to tabbar.

    0
  • G

    @misterjunio I have changed class to tabbar as you said but I am talking about back-button which is not working after pushPage method of navigator and according to onsen docs ons-page is called inside ons-navigator

    0
  • G

    even I have changed my code and wrapped page inside navigator back button still doesn’t work and some code runs in older onsen version

    0
  • G

    @Fran-Diox actually I wanted to use ons-card and ons-toast that’s why I changed onsen version
    can I use this components in same version

    0 1 Reply
  • Onsen UI

    @Gaurav like @Fran-Diox said it’s too hard to analyze the whole code, please try to produce a minimal example that shows the problem. You cannot use those components on a version prior to 2.3.0.

    0
  • G

    ok this is my movie.html code

    <ons-page>
<ons-navigator   var="movieNavigator" >

<ons-button  ng-click="movieNavigator.pushPage('moviestyle.html')"></ons-button>
 </ons-navigator>

</ons-page>
    0
  • G

    This post is deleted!
    0
  • G

    ok this is my navigator page

    <ons-page>
<ons-navigator   var="movieNavigator" id="movieId">
<ons-button ng-click="movieNavigator.pushPage('moviestyle.html')">
PushPage
</ons-button>
    0
  • G

    this is moviestyle.html

     <ons-page>
 <ons-button modifier="light" onclick="movieId.popPage()">
        Pop  Page
      </ons-button>
</ons-page>
    0
  • G

    when I click the button I am getting the error as
    ons-navigator’s page stack is empty.

    0
  • G

    This post is deleted!
    0