Hi Team ,

first I have page1 , then I have onlick on navi then puspage to page2.
then in page2 I have wanna to go to page3 on click but its not working , even alert function is not working in the onclick.

<ons-page id="single">
  <ons-navigator id="single_navigator"></ons-navigator>

  <script type="text/javascript">
    document.addEventListener('init', function(event) {
      var page = event.target;
      page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
    });

    function goToEventDetailsPage(){
      let single_navigator = document.querySelector('#single_navigator');
        single_navigator.replacePage('event_detials2.html');
        alert("asd");

    }
    $(document).ready(function(){
      
    });
  </script>

  <ons-toolbar>
    <div class="left"><ons-back-button> 返回</ons-back-button></div>
    <div class="center"></div>
  </ons-toolbar>

  <p onclick="goToEventDetailsPage()">This is the second page.</p>
</ons-page>

page2 as above below are screen capture

either alert and replacepage or push page is not working , how can I call this function ?
because this function is not calling I suspect thanks

Hi Team , are there any ways to display Marquee Tag before a ons-tabbar,
I tried but any html elements I put before the ons-tabbar or after ons-tabbar , the contents are NOT displaying. are there any solution ?

<ons-navigator id="navigator">
	<ons-page>

	  <ons-toolbar>
	    <div class="center"> 今日 </div>
	  </ons-toolbar>
	<!--     <ons-tab page="tab1.html"  label="今日" icon="fa-futbol" badge="7" active>
	    </ons-tab> -->

	    <h1>hi </h1>
	  <ons-tabbar swipeable  id="tabbar" >

	    <ons-tab page="today.html" modifier="top-border"   >
		  <input type="radio" style="display: none">
		  <button class="tabbar__button">
		    <div class="tabbar__icon">
		      <ons-icon icon="fa-futbol" spin></ons-icon>
		    </div>
		    <div class="tabbar__label" label="今日" >今日</div>
		    <div class="tabbar__badge notification" id="today_badge"></div>
		  </button>
		</ons-tab>

	    <ons-tab page="early.html" label="早盘"  icon="fa-swimmer" modifier="top-border" >
	    </ons-tab>
	    <ons-tab page="runingball.html" label="滚球"   id="runingball" icon="fa-basketball-ball"  modifier="top-border">
	    </ons-tab>
	    <ons-tab page="outright.html" label="冠军"   icon="fa-trophy" modifier="top-border">
	    </ons-tab>
	  </ons-tabbar>


	</ons-page>
</ons-navigator>

any helps will be appreciated

@emccorson

Hello thanks for the previous advice.
now I decided to get all data when the page is loaded using ajax,

but I was not able select he element that is on page2 , then update using jquery , but I can do it if I am using template.
so my question is now how can I get the element that is on page2

for example below its the jquery I am tring to get the value from P ID with testearly that is on page2

	```

$(document).ready(function(){
getSportsToday();
let myvar = $(“p#testearly”).text() ;
console.log(myvar);
// setInterval(updateSportsToday,10000);

	});

below is HTML for page2 

<ons-page id=“early”>

<script type="text/javascript">
	//ons.notification.alert(" page");
	// console.log("test");
</script>

<p style="text-align: center;" id="testearly">
  This is the early page.
</p>

</ons-page>

the result showing in console.log is empty I believe there is special element I need to use or sytax I need to use when navigate the page2 ???

 btw I am using tabbar to page2

Thanks for reading

Hi All,

I am new here.
I have a tabber located inside index, tabbar goes to page1 , page2, page3 , page4.
I write page2 into the separate file. everything works now , but if I write js code inside the page2 , it will auto execute when I visit index page where it contains the tabbar.

what I want is when user tab page 2 I fire a ajax request to server to get data and display on page2 , so the same as page 3 and page4.

so its there any way I can use seperate ajax call on different page??? or I have call it from index and pass the data to page2 ,page3 … by using the prechange eventlistener ??? I dnt wanna to do the latter, I need to display lots of data and I have to call server maybe every 10 seconds on each page.

below is my index page

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">		
	<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>
	<style type="text/css">
		.ons-tabbar__footer{
			padding-top: 10px;
		}
	</style>
	<script type="text/javascript">
document.addEventListener('prechange', ({ target, tabItem }) => {
		  if (target.matches('#tabbar')) {
		    document.querySelector('ons-toolbar .center').innerHTML = tabItem.getAttribute('label');
		    ons.notification.alert('its ' + tabItem.getAttribute('label') + ' page now');
		  }
		});
</script>
</head>
<body>

<ons-page>
  <ons-toolbar>
    <div class="center">Tab 1</div>
  </ons-toolbar>

  <ons-tabbar swipeable  id="tabbar" >
<!--     <ons-tab page="tab1.html" class="green_badge" label="今日" icon="fa-futbol" badge="7" active>
    </ons-tab> -->
    <ons-tab page="tab1.html" modifier="top-border" >
	  <input type="radio" style="display: none">
	  <button class="tabbar__button">
	    <div class="tabbar__icon">
	      <ons-icon icon="fa-futbol" spin></ons-icon>
	    </div>
	    <div class="tabbar__label" label="今日" >今日</div>
	    <div class="tabbar__badge notification">99</div>
	  </button>
	</ons-tab>
    <ons-tab page="early.html" label="早盘" icon="fa-swimmer" modifier="top-border" >
    </ons-tab>
    <ons-tab page="tab2.html" label="滚球" icon="fa-basketball-ball" badge="7"  modifier="top-border">
    </ons-tab>
    <ons-tab page="tab2.html" label="冠军" icon="fa-trophy" modifier="top-border">
    </ons-tab>
  </ons-tabbar>
</ons-page>

<template id="tab1.html">
  <ons-page id="Tab1">
    <p style="text-align: center;">
      This is the first page.
    </p>
  </ons-page>
</template>

<template id="tab2.html">
  <ons-page id="Tab2">
    <p style="text-align: center;">
      This is the second page.
    </p>
  </ons-page>
</template>

</body>
</html>

as you can see the page 2 i am using here is called early , below its the page
```
<ons-page id=“early”>

<script type=“text/javascript”>
//ons.notification.alert(" page");
console.log(“test”);
</script>

	<p style="text-align: center;">
	  This is the early page.
	</p>
</ons-page>

whatever i do in early page js will do it on the index

thanks 
I understand that because its treat a template here and share a html root. 
not  like normal webpage.
thanks