A
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
