Tab Content Cant load dynamically.This is tabs inside a page. Where have i gone wrong?


#1
  1. <div class="views tabs ios-edges">
    
  2.   <!-- Tabbar for switching views-tabs -->
    
  3.   <div class="toolbar tabbar-labels toolbar-tob-md">
    
  4.     <div class="toolbar-inner">
    
  5.       <a href="#view-home" class="tab-link tab-link-active">
    
  6.         <i class="icon f7-icons ios-only">home</i>
    
  7.         <i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>
    
  8.         <i class="icon material-icons md-only">home</i>
    
  9.         <span class="tabbar-label">Home</span>
    
  10.       </a>
    
  11.       <a href="#view-catalog" class="tab-link">
    
  12.         <i class="icon f7-icons ios-only">list</i>
    
  13.         <i class="icon f7-icons ios-only icon-ios-fill">list_fill</i>
    
  14.         <i class="icon material-icons md-only">view_list</i>
    
  15.         <span class="tabbar-label">Catalog</span>
    
  16.       </a>
    
  17.       <a href="#view-settings" class="tab-link">
    
  18.         <i class="icon f7-icons ios-only">settings</i>
    
  19.         <i class="icon f7-icons ios-only icon-ios-fill">settings_fill</i>
    
  20.         <i class="icon material-icons md-only">settings</i>
    
  21.         <span class="tabbar-label">Settings</span>
    
  22.       </a>
    
  23.     </div>
    
  24.   </div>
    
  25.   <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
    
  26.   <div id="view-home" class="view view-main tab tab-active">
    
  27.     <!-- Page, data-name contains page name which can be used in page callbacks -->
    
  28.     <div class="page" data-name="home">
    
  29.       <!-- Top Navbar -->
    
  30.       <!-- Scrollable page content-->
    
  31.       <div class="page-content">
    
  32.         <div class="block block-strong">
    
  33.           <p>Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.</p>
    
  34.         </div>
    
  35.         <div class="list">
    
  36.           <ul>
    
  37.             <li>
    
  38.               <a href="/about/" class="item-content item-link">
    
  39.                 <div class="item-inner">
    
  40.                   <div class="item-title">About</div>
    
  41.                 </div>
    
  42.               </a>
    
  43.             </li>
    
  44.           </ul>
    
  45.         </div>
    
  46.         <div class="block-title">Modals</div>
    
  47.         <div class="block block-strong">
    
  48.           <div class="row">
    
  49.             <div class="col-50">
    
  50.               <a href="#" class="button button-raised button-fill popup-open" data-popup="#my-popup">Popup</a>
    
  51.             </div>
    
  52.             <div class="col-50">
    
  53.               <a href="#" class="button button-raised button-fill login-screen-open" data-login-screen="#my-login-screen">Login Screen</a>
    
  54.             </div>
    
  55.           </div>
    
  56.         </div>
    
  57.       </div>
    
  58.     </div>
    
  59.   </div>
    
  60.   <!-- Catalog View -->
    
  61.   <div id="view-catalog" class="view tab">
    
  62.     <!-- Catalog page will be loaded here dynamically from /catalog/ route -->
    
  63.   </div>
    
  64.   <!-- Settings View -->
    
  65.   <div id="view-settings" class="view tab">
    
  66.     <!-- Settings page will be loaded here dynamically from /settings/ route -->
    
  67.   </div>
    
  68. </div>
    
  69. <!-- Popup -->
    
  70. <!-- Login Screen -->
    
  71. <div class="login-screen" id="my-login-screen">
    
  72.   <div class="view">
    
  73.     <div class="page">
    
  74.       <div class="page-content login-screen-content">
    
  75.         <div class="login-screen-title">Login</div>
    
  76.         <div class="list">
    
  77.           <ul>
    
  78.             <li class="item-content item-input">
    
  79.               <div class="item-inner">
    
  80.                 <div class="item-title item-label">Username</div>
    
  81.                 <div class="item-input-wrap">
    
  82.                   <input type="text" name="username" placeholder="Your username">
    
  83.                 </div>
    
  84.               </div>
    
  85.             </li>
    
  86.             <li class="item-content item-input">
    
  87.               <div class="item-inner">
    
  88.                 <div class="item-title item-label">Password</div>
    
  89.                 <div class="item-input-wrap">
    
  90.                   <input type="password" name="password" placeholder="Your password">
    
  91.                 </div>
    
  92.               </div>
    
  93.             </li>
    
  94.           </ul>
    
  95.         </div>
    
  96.         <div class="list">
    
  97.           <ul>
    
  98.             <li>
    
  99.               <a href="#" class="item-link list-button login-button">Sign In</a>
    
  100.             </li>
    
  101.           </ul>
    
  102.           <div class="block-footer">Some text about login information.<br>Click "Sign In" to close Login Screen</div>
    
  103.         </div>
    
  104.       </div>
    
  105.     </div>
    
  106.   </div>
    
  107. </div>
    
  • `
  • Preformatted text

  • `


  • #2

    Looks like it is default template? Where is your script, etc, provide more details