Call page from another page

Ahmed Elshorbagy

I created different pages and I want to load them from my index page using tabs but I cannot. I tried different examples but all are not working. I used iframe to load my pages but I know this is not the best solution.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/jquery-3.1.0.min.js" language="javascript" type="text/javascript"></script>  
  <script src="lib/bootstrap-3.3.7.min.js" language="javascript" type="text/javascript"></script>
    
  <link rel="stylesheet" href="css/bootstrap.min.css">  
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">  
  <script>
    
    ons.ready(function() {
      });

      function change_frame(url)
      {
        document.getElementById("pages").src=url;
      }

    window.fn = {};
    window.fn.open = function() {
      var menu = document.getElementById('menu');
      menu.open();
    };
    window.fn.load = function(page) {
      var content = document.getElementById('content');
      var menu = document.getElementById('menu');
      content
        .load(page)
        .then(menu.close.bind(menu));
    };
  
  </script>
</head>
<body>
  <ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-item onclick="fn.load('home.html')" tappable >
            <img src="images/JTV.png" />
          </ons-list-item>
          <ons-list-item onclick="fn.load('tabs.html')" tappable>
            Settings
          </ons-list-item>
          <ons-list-item onclick="fn.load('about.html')" tappable>
            About
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
  </ons-splitter>
  <ons-template id="home.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Player          
        </div>
      </ons-toolbar>
<div class="tab-bar tab-bar--top tab-bar--material">
  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" name="tab-bar-material-a" checked="checked">
    <button class="tab-bar__button tab-bar--material__button">
      All
    </button>
  </label>
  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" id="rdcountry" name="tab-bar-material-a" onclick="change_frame('html/countries.html')">
    <button class="tab-bar__button tab-bar--material__button">
      Countries
    </button>
  </label>
  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" name="tab-bar-material-a">
    <button class="tab-bar__button tab-bar--material__button">
      Favorites
    </button>
  </label>  
</div>

<!--     -->
<br />
<iframe src="" id="pages" width="99%" height="100%" frameborder="0" />
    </ons-page>
  </ons-template>

  <ons-template id="tabs.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>            
        </ons-toolbar-button>
      </div>
      <div class="center">
        Setting
      </div>
    </ons-toolbar>
  </ons-page>
  </ons-template>

  <ons-template id="about.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        About
      </div>
      
    </ons-toolbar>  
    
  </ons-page>
  </ons-template>
</body>
</html>

Fran Diox

@Ahmed-Elshorbagy Why don’t you just use ons-tabbar component?

Ahmed Elshorbagy

Because the tabs are always at the bottom. Is it possible to change their position?

Fran Diox

@Ahmed-Elshorbagy Perhaps you are looking for position attribute.

Ahmed Elshorbagy

I modified the position,thank you But I sell cannot call page2.html from page1.html, I don’t want to put the who;e application in one page

munsterlander

@Ahmed-Elshorbagy You wouldn’t use an iframe to call additional pages. The example here:

http://tutorial.onsen.io/?framework=vanilla&category=Reference&module=navigator

Shows navigation and the templates are in one page. If you do not want that, just create individual files and do not use the template tag. A good example of that is in this eBook template example I made for people.

https://github.com/munsterlander/Onsen-Examples/tree/master/eBook-Template

Ahmed Elshorbagy

I downloaded the example but it did not work, it displayed an empty page.

munsterlander

@Ahmed-Elshorbagy The tutorial?

Ahmed Elshorbagy

Yes

munsterlander

@Ahmed-Elshorbagy Copy all of this to the index.html page and give it a try:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
    <title>Onsen UI Forum Help by Munsterlander</title>

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
    <script src="https://unpkg.com/onsenui"></script>
<script>
document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'page1') {
    page.querySelector('#push-button').onclick = function() {
      document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    };
  } else if (page.id === 'page2') {
    page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
  }
});
</script>
  </head>
  <body>
<ons-navigator id="myNavigator" page="page1.html"></ons-navigator>

<ons-template id="page1.html">
  <ons-page id="page1">
    <ons-toolbar>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <p>This is the first page.</p>

    <ons-button id="push-button">Push page</ons-button>
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center"></div>
    </ons-toolbar>

    <p>This is the second page.</p>
  </ons-page>
</ons-template>
</body>
</html>

Ahmed Elshorbagy

it is working now

munsterlander

@Ahmed-Elshorbagy Glad it worked! Upvote arrows for the solution are on the bottom right of each post. Thanks!

CodeyMonk

@munsterlander But it does not make sense since you were trying to load the html page from different files. The update you made was still put two templates in a same file?

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.

Call page from another page