Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. anthony
    A
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    anthony

    @anthony

    0
    Reputation
    5
    Posts
    369
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    anthony Follow

    Posts made by anthony

    • js not working or navigation not working in in page2

      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

      0_1581053697237_2-7-2020 1-32-54 PM.png

      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

      posted in Onsen UI
      A
      anthony
    • want to display Marquee Tag before a tabbar

      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>
      

      0_1581048431140_2-7-2020 12-05-14 PM.png

      any helps will be appreciated

      posted in Onsen UI
      A
      anthony
    • RE: js in separate page will auto executed

      @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
      posted in Onsen UI
      A
      anthony
    • js in separate page will auto executed

      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
      posted in Onsen UI
      A
      anthony