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.
-
So, I have two HTML page or I might have more.
index1.html && index2.html
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
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 : 
-
There are only two ways of defining pages for ons-navigator:
- Define a template within the same file as the navigator
- 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.