Cant load json data from server to my routed tabs


#1

Cant load json data from server to my routed tabs


#2

Ok, provide more details, how, what and where you load?


#3

My route script is here:-
var routes = [
{
path: ‘/’,
url: ‘./index.html’,
},
// About page
{
path: ‘/about/’,
url: ‘./pages/about.html’,
},
{
path: ‘/manage/’,
url: ‘./pages/manageins.html’,
},
{
path: ‘/catalogs/’,
componentUrl: ‘./pages/catalog.html’,
},
{
path: ‘/product/:id/’,
componentUrl: ‘./pages/product.html’,
},
{
path: ‘/settings/’,
url: ‘./pages/settings.html’,
},
{
path: ‘/page-loader-template7/:user/:userId/:posts/:postId/’,
templateUrl: ‘./pages/page-loader-template7.html’,
},
{
path: ‘/page-loader-component/:user/:userId/:posts/:postId/’,
componentUrl: ‘./pages/page-loader-component.html’,
},

// Default route (404 page). MUST BE THE LAST
{
path: ‘(.*)’,
url: ‘./pages/404.html’,
},


#4

My Index File Is Here:-

	<div class="test"></div>
      <div class="list links-list searchbar-hide-on-search">
        <ul>
          <li>
            <a href="/about/">
			<div class="item-media"><i class="f7-icons">paper_plane_fill</i></div>About radio
			<div class="item-after"></div></a>
          </li>
		  <li>
		    <a href="/products/">
			<div class="item-media"><i class="f7-icons">data_fill</i></div>Radio Products  
			<div class="item-after"><span class="badge">5</span><div class="item-after">New</div></div>
			</a>				
          </li>
       
          <li>
            <a href="/manageins/">
			<div class="item-media"><i class="f7-icons">collection_fill</i></div>Manage Radio
			<div class="item-after"><span class="badge">5</span></div></a>
          </li>
		  <li>
		    <a href="/Value/">
			<div class="item-media"><i class="f7-icons">data_fill</i></div>Value radio 
			<div class="item-after"></div>
			</a>				
          </li>
          <li>
            <a href="/covers/">
			<div class="item-media"><i class="f7-icons">world_fill</i></div>Media & Share
			<div class="item-after"></div></a>
          </li>
		  <li>

#5

My manage page that has tabs is Here;-

div class="page">
div id="io.framework7.testapp">
    div class="views tabs ios-edges">
      - Tabbar for switching views-tabs -->
      div class="toolbar tabbar-labels toolbar-tob-md">
        div class="toolbar-inner">
          a href="#view-home" class="tab-link tab-link-active">
           i class="icon f7-icons ios-only">home</i>
           <i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>
            i class="icon material-icons md-only">home</i>
            span class="tabbar-label">Home</span>
          </a>
         a href="#view-catalog" class="tab-link">
            <i class="icon f7-icons ios-only">list</i>
            <i class="icon f7-icons ios-only icon-ios-fill">list_fill</i>
            <i class="icon material-icons md-only">view_list</i>
            span class="tabbar-label">Catalog</span>
          /a>
          a href="#view-settings" class="tab-link">
            i class="icon f7-icons ios-only">settings</i>
            i class="icon f7-icons ios-only icon-ios-fill">settings_fill</i>
            i class="icon material-icons md-only">settings</i>
            span class="tabbar-label">Settings</span>
          /a>
        </div>
      </div>
	 
      <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
      <div id="view-home" class="view view-home tab tab-active">
        <!-- Page, data-name contains page name which can be used in page callbacks -->
        <div class="page" data-name="home">
          <!-- Top Navbar -->
       
 
        </div>
      </div>

      <!-- Catalog View -->
      <div id="view-catalog" class="view view-catalog tab">
        <!-- Catalog page will be loaded here dynamically from /catalog/ route -->
      </div>

      <!-- Settings View -->
      <div id="view-settings" class="view view-settings tab">
        <!-- Settings page will be loaded here dynamically from /settings/ route -->
      </div>
    </div>

    <!-- Popup -->
    

    <!-- Login Screen -->
    <div class="login-screen" id="my-login-screen">
      <div class="view">
        <div class="page">
          <div class="page-content login-screen-content">
            <div class="login-screen-title">Login</div>
            <div class="list">
              <ul>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Username</div>
                    <div class="item-input-wrap">
                      <input type="text" name="username" placeholder="Your username">
                    </div>
                  </div>
                </li>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Password</div>
                    <div class="item-input-wrap">
                      <input type="password" name="password" placeholder="Your password">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list">
              <ul>
                <li>
                  <a href="#" class="item-link list-button login-button">Sign In</a>
                </li>
              </ul>
              <div class="block-footer">Some text about login information.<br>Click "Sign In" to close Login Screen</div>
            </div>
          </div>
        </div>
      </div>
    </div>
	</div>
</div>
  <!-- Cordova -->
  <!--
  <script src="cordova.js"></script>
  -->

  <!-- Framework7 library -->
  <script src="./js/framework7.min.js"></script>

  <!-- App routes -->
  <script src="./js/routes.js"></script>

  <!-- Your custom app scripts -->
  <script src="./js/app.js"></script>

#6

Your topic title is:

Cant load json data from server to my routed tabs

I can’t see anything related to JSON or routed tabs in your code