Load pages from server in tab layout?


#1

Im trying to update an existing app to v2 and I can´t even load the pages from my server in my separate views haha! :joy:
It´s a 5 tabbar layout.

So I have this now in my index.html page:

   <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
  <div id="view-1" class="view tab tab-active">
       
   		<div data-name="index-1" class="page no-swipeback">
                <div class="navbar">
                <div class="navbar-inner notranslate">
                  <div class="center notranslate">SKOLAPPEN</div>
                </div>
                </div>
        </div>
   
  </div>
   <!-- nyheter view -->
  <div id="view-2" class="view tab">
       
   		<div data-name="index-2" class="page no-swipeback">
                <div class="navbar">
                <div class="navbar-inner notranslate">
                  <div class="center notranslate">NYHETER</div>
                </div>
                </div>
        </div>
   
  </div>
  <!-- schema view -->
  <div id="view-3" class="view tab">
       
   		<div data-name="index-3" class="page no-swipeback">
                <div class="navbar">
                <div class="navbar-inner notranslate">
                  <div class="center notranslate">SCHEMA</div>
                </div>
                </div>
        </div>
   
  </div>
  <!-- lunch meny view -->
  <div id="view-4" class="view tab">
       
   		<div data-name="index-4" class="page no-swipeback">
                <div class="navbar">
                <div class="navbar-inner notranslate">
                  <div class="center notranslate">LUNCH MENY</div>
                </div>
                </div>
        </div>
   
  </div>
  <!-- mer view -->
  <div id="view-5" class="view view-main tab">
       
   		<div data-name="index-5" class="page no-swipeback">
                <div class="navbar">
                <div class="navbar-inner notranslate">
                  <div class="center notranslate">MER</div>
                </div>
                </div>
        </div>
   
  </div>

And my js file looks like this.

// Initialize your app
// Dom7
var $$ = Dom7;

// Init App
var app = new Framework7({
// App root element
root: ‘#app’,
// App Name
name: ‘Skolappen’,
// App id
id: ‘com.myapp.skolappen’,
theme: ‘auto’,
// Add default routes

// … other parameters
});

// Init/Create views
var view1 = app.views.create(’#view-1’, {
url: ‘https://www.manmade.se/iphone/skolappen/hem.asp
});

var view2 = app.views.create(’#view-2’, {
url: ‘https://www.manmade.se/iphone/skolappen/nyheter.asp
});

var view3 = app.views.create(’#view-3’, {
url: ‘https://www.manmade.se/iphone/skolappen/schema/schema.asp
});

var view4 = app.views.create(’#view-4’, {
url: ‘https://www.manmade.se/iphone/skolappen/lunch/menyiframe.asp
});

var mainView = app.views.create(’.view-main’, {
url: ‘https://www.manmade.se/iphone/skolappen/mer.asp’,
domCache:true
});

So what Im I doing wrong??
Any input really appreciated, thanks! Nikolay :wink:

And I get this error with the above.

TypeError: undefined is not an object (evaluating ‘$el[0].f7View = view’)


#2

Try add it:

<body>
<div id="app">
<div class="view view-tab tab-active">

.....

</div>
</div>
</body>

Suggestion:
Sem título


#3

Ok, so with this it finally loads the pages in the right view.

But now the tabbar is not showing at all??

routes: [
{
name: ‘hem’,
path: ‘/hem/’,
url: ‘https://www.manmade.se/iphone/skolappen/hem.asp
},
{
name: ‘nyheter’,
path: ‘/nyheter/’,
url: ‘https://www.manmade.se/iphone/skolappen/nyheter.asp
},
{
name: ‘schema’,
path: ‘/schema/’,
url: ‘https://www.manmade.se/iphone/skolappen/schema/schema.asp
},
{
name: ‘lunch’,
path: ‘/lunch/’,
url: ‘https://www.manmade.se/iphone/skolappen/lunch/menyiframe.asp
},
{
name: ‘mer’,
path: ‘/mer/’,
url: ‘https://www.manmade.se/iphone/skolappen/mer.asp
},

]
// … other parameters
});

// Init/Create views
var view1 = app.views.create(’#view-1’, {
url: ‘/hem/’
});
var view2 = app.views.create(’#view-2’, {
url: ‘/nyheter/’
});
var view3 = app.views.create(’#view-3’, {
url: ‘/schema/’
});
var view4 = app.views.create(’#view-4’, {
url: ‘/lunch/’
});
var mainView = app.views.create(’.view-main’, {
url: ‘/mer/’,
domCache:true
});


#4

Any sense to have empty initial pages with Navbar only? If you want to it to be loaded on app init, then view MUST be empty


#5

Thanks Vladimir.

I now have this and it loads the pages, is this the right way to do it?

index.html

<!-- Views/Tabs container -->
      <!-- Bottom Toolbar-->
  <div class="toolbar tabbar tabbar-labels">
    <div class="toolbar-inner">
        <a href="#view-1" class="tab-link active">
        <i class="icon tabbar-demo-icon-1"></i>
        <span class="tabbar-label">HEM</span>
        </a>
        <a href="#view-2" class="tab-link">
        <i class="icon tabbar-demo-icon-2"></i>
        <span class="tabbar-label">NYHETER</span>
        </a>
        <a href="#view-3" class="tab-link">
        <i class="icon tabbar-demo-icon-3"></i>    
       <span class="tabbar-label">SCHEMA</span>
        </a>
        <a href="#view-4" class="tab-link">
        <i class="icon tabbar-demo-icon-4"></i>
       <span class="tabbar-label">LUNCH MENY</span>
        </a>
        <a href="#view-5" class="tab-link">
        <i class="icon tabbar-demo-icon-5"></i>
        <span class="tabbar-label">MER</span>
        </a>
    </div>
  </div>
  <!--end toolbar-->
  
   <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
  <div id="view-1" class="view tab tab-active"></div>
   <!-- nyheter view -->
  <div id="view-2" class="view tab"></div>
  <!-- schema view -->
  <div id="view-3" class="view tab"></div>
  <!-- lunch meny view -->
  <div id="view-4" class="view tab"></div>
  <!-- mer view -->
  <div id="view-5" class="view view-main tab"></div>

And my js file:

var $$ = Dom7;

// Init App
var app = new Framework7({
// App root element
root: ‘#app’,
// App Name
name: ‘Skolappen’,
// App id
id: ‘com.myapp.skolappen’,
theme: ‘auto’,
// Add default routes
routes: [
{
name: ‘hem’,
path: ‘/hem/’,
url: ‘https://www.manmade.se/iphone/skolappenv2/hem.asp
},
{
name: ‘nyheter’,
path: ‘/nyheter/’,
url: ‘https://www.manmade.se/iphone/skolappenv2/nyheter.asp
},
{
name: ‘schema’,
path: ‘/schema/’,
url: ‘https://www.manmade.se/iphone/skolappenv2/schema/schema.asp
},
{
name: ‘lunch’,
path: ‘/lunch/’,
url: ‘https://www.manmade.se/iphone/skolappenv2/lunch/menyiframe.asp
},
{
name: ‘mer’,
path: ‘/mer/’,
url: ‘https://www.manmade.se/iphone/skolappenv2/mer.asp
},

]
// … other parameters
});

// Init/Create views
var view1 = app.views.create(’#view-1’, {
url: ‘/hem/’
});
var view2 = app.views.create(’#view-2’, {
url: ‘/nyheter/’
});
var view3 = app.views.create(’#view-3’, {
url: ‘/schema/’
});
var view4 = app.views.create(’#view-4’, {
url: ‘/lunch/’
});
var mainView = app.views.create(’.view-main’, {
url: ‘/mer/’,
domCache:true
});

Thanks Vladimir :slight_smile:


Init page on multi view layout
#6

Is this the right way to do it?


#7

Yes this is the right way


#8

Ok, thanks Vladimir. Just wanted to be sure it is right with the basics.