3. js in separate page will auto executed

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.

js in separate page will auto executed

  • 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
    0
  • E
    administrators

    Each tab is loaded when the tabbar is loaded, not when the tab is shown, which is why your script is running as soon as you open the app.

    The best way to do the call is with the prechange event as you mentioned. You can check the tab that is being shown so you only do the AJAX call for the tab that is going to be shown.

    The other option is to use ons-navigator instead of ons-tabbar, since ons-navigator loads pages only when they are shown.

    0
    A
     1 Reply
  • A

    @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
    0