Monaca Onsen UI Discord Chat Github Repo

multiple navigator with tabbar not working in newer version of onsen


  • 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).


  • Onsen UI

    This post is deleted!


  • ok I will try and let you know



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



  • 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>
    

  • Onsen UI

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



  • @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



  • 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



  • @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


  • 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.



  • 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>
    


  • This post is deleted!


  • 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>
    


  • this is moviestyle.html

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


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



  • This post is deleted!


  • hey @Fran-Diox I found this but it is for outside tabbar and I want navigator inside tabbar which is working in older version but getting warning as tried to load angular more than once maybe that’s why it is not working


  • Onsen UI

    @Gaurav There are about 20 posts on this topic, most of them showing a lot of code that is not useful to reproduce the issue that you have. You know, it’s quite hard to follow all of this and try to help you. If you try to provide a small demo in codepen or anywhere else where we can see your issue and debug it, you’ll get help much faster.

    Apart from that, if the back button says that the navigator stack is empty… well, it means that you only have 1 page pushed. If you are sure you have more than 1, perhaps you are popping in the wrong navigator or you are missing some HTML closing tags in some of your pages.

    The fact that it was working in old versions just means that now is a bit more strict about DOM mistakes than before. For example, before it was generating ons-page elements automatically if you forgot them, but now you must provide them manually. All of that is reflected in the changelog.



  • This post is deleted!


  • ok @Fran-Diox I will put my code in codepen And share you A link