3. Push <templates> from different html page.

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.

Push <templates> from different html page.

  • C

    So, I have two HTML page or I might have more.

    index1.html && index2.html
    0_1555415365011_Screen Shot 2019-04-16 at 9.47.18 PM.png
    0_1555415371517_Screen Shot 2019-04-16 at 9.47.32 PM.png

    How do I use push functionality to go to another template which is located in another HTML?
    In this scenario, I want to go to <template id =guide.html > in index2.html from <template id =“Library.html”> in index1 as soon as you hit the <ons-card>. Also, will I be able to go back if I click the <ons-back-button>? Are they doable?

    index1.html

    <!DOCTYPE html>
<html>
<head>
      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

        <ons-navigator id="appNavigator" page="Library.html" swipeable swipe-target-width="80px">

</ons-navigator>
</head>
    
<body>


<template id="Library.html">
  <ons-page> 
     <div style="background-color: white">
  
<!--  -->
    <ons-card onclick="fn.pushPage({'id': 'guide.html', 'title': 'CE_sub'})" style="height: 500px;">
      
      <div id="card1"></div>
     <br>
     <div class="title" style="font-weight: 500">Go to guide.html</div>
      <div class="content" style="font-family: sans-serif; font-size: 18px; font-weight: 100;" >Can you answer my question</div>
    <br>
        

    </ons-card>
      </div>
    </ons-page>
    </template>
    
    <template id="guide.html">
  <ons-page> 
     <div style="background-color: white">
  
<!--  -->
    <ons-card>
      <ons-back-button>index1.html</ons-back-button>
      <div id="card1"></div>
     <br>
     <div class="title" style="font-weight: 500">Hello world</div>
      
    <br>
        <div style="color: gray">Read more...</div>

    </ons-card>
      </div>
    </ons-page>
    </template>
</body>
    
    <script>
        window.fn = {};

window.fn.toggleMenu = function () {
  document.getElementById('appSplitter').right.toggle();
};

window.fn.loadView = function (index) {
  document.getElementById('appTabbar').setActiveTab(index);
  document.getElementById('sidemenu').close();
};

window.fn.loadLink = function (url) {
  window.open(url, '_blank');
};

window.fn.pushPage = function (page, anim) {
  if (anim) {
    document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title }, animation: anim });
  } else {
    document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title } });
  }
};
    </script>
</html>

    it is supposed to look like this
    0_1555415285668_Screen Shot 2019-04-16 at 9.47.18 PM.png

    index2.html

    <!DOCTYPE html>
<html>
<head>
    
      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body> 
 <template id="guide.html">
  <ons-page> 
     <div style="background-color: white">
  
<!--  -->
    <ons-card>
      <ons-back-button>index1.html</ons-back-button>
      <div id="card1"></div>
     <br>
     <div class="title" style="font-weight: 500">Hello world</div>
      
    <br>
        <div style="color: gray">Read more...</div>

    </ons-card>
      </div>
    </ons-page>
    </template>
    

</body>
   
</html> 

It is supposed to look like this :
![0_1555415325063_Screen Shot 2019-04-16 at 9.47.32 PM.png](https://i.imgur.com/pJw4FmO.png)
    0
  • E
    administrators

    There are only two ways of defining pages for ons-navigator:

    1. Define a template within the same file as the navigator
    2. Define a page in its own file (not in a template). There can only be one page per file.

    The problem you have here is that you are trying to define a template within a file, but it’s not the same file as the one ons-navigator is defined in. It is not possible to have this work with ons-navigator.

    Instead what you should do is move each template in index2.html to its own separate file. Then you will be able to push to ons-navigator by passing the name of the file.

    0