Push Page into external .html files not within index.html

sinki

Hi,

First of all, I’m very new to app development. I want to Push Page into external .html files not within index.html with javascript Jquery. I have seen if I use the fn.load function I can load external pages but I read in other forums that animations are not possible. I have to use a navigator and need to pushpage for animation. How with push page I can load an external html file. I have tried different possibilities but unsuccessfull. Maybe it’s a stupid question but I’m not getting a clear idea.

If a little example is provided it will be a real help.

sinki

Sorry, i have realized that the push page function is working but the onclick event is not happening in the phonegap desktop/android emulator. I have the latest version of Onsenui. Can you please suggest.

sinki

<html>

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.min.css">
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<title>Horoscope</title>

</head>

<body>
<ons-splitter>
<ons-splitter-side id=“appSplitter” side=“left” width=“220px” collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick=“fn.load(‘home.html’)” tappable>
Home
</ons-list-item>
<ons-list-item onclick=“fn.load(‘pages/test.html’);” tappable>
<i class=“fa fa-address-card-o” aria-hidden=“true”></i> Test
</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>

<template id=“home.html”>
<ons-page>
<ons-navigator swipeable id=“myNavigator” ></ons-navigator>
<ons-toolbar>
<div class=“left”>
<ons-toolbar-button onclick=“fn.open()”>
<ons-icon icon=“md-menu”></ons-icon>
</ons-toolbar-button>
</div>
<div class=“center”>
Home
</div>
</ons-toolbar>
<p class=“intro”>
This is a kitchen sink example that shows off the components of Onsen UI.<br><br>
</p>

<ons-card onclick="fn.pushPage({'id': './pages/test.html', 'title': 'Test'})" tappable>
  <div class="title">Test</div>
  <div class="content">Simple push to test page    

  </div>
</ons-card>
<script>
$(function(){
// Initialization code
$('ons-button').on('click', function(e) {
  alert('hi');
  fn.pushPage({'id': './pages/test.html', 'title': 'Test'})
})
});
</script>
<ons-button>Click me!</ons-button>

<style>
  .intro {
    text-align: center;
    padding: 0 20px;
    margin-top: 40px;
  }

  ons-card {
    cursor: pointer;
    color: #333;
  }

  .card__title,
  .card--material__title {
    font-size: 20px;
  }
</style>

</ons-page>
</template>

<script type="text/javascript" src="cordova.js"></script>

this is just a test code can anyone tell me what can be the problem. it looks like this in the emulator. Even the menu comes out and shows but from the home page you just click. Even i have put alerts in the function its not happening

0_1552833198915_58091632-e967-4943-a33c-0fa7cecf6805-image.png

emccorson

You’re calling fn.pushPage but it doesn’t look like fn is defined. Where is the definition of fn?

To do a page push with the navigator you need to get the element like this:

document.querySelector('#myNavigator').pushPage

sinki

thanks I have solved it.

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 Page into external .html files not within index.html