2

Im try to create a Phonegap project with using Onsen framework. I'm facing a problem here that I just want to reload/refresh one of the child ons-template like every 20 seconds. Im not sure how the JQuery part can be done here.

I have one ons-page as main page of the apps. User click on 'GO' button will show ons-template page1.html, then go page2.html. Now when user in page1.html, sytem will start timer for 20 seconds and auto refresh the page by calling javascript function loadData() to display message at page2.html until the user is not longer at page2.html timer is off.

Has anyone facing that before? Here my sample code :

<html>
<head>
<meta charset="UTF-8">
<title>App Title</title>

<link rel='stylesheet prefetch' href='css/onsenui.css'>
<link rel='stylesheet prefetch' href='css/onsen-css-components.css'>
<link rel='stylesheet prefetch' href='css/ionicons/css/ionicons.css'>
<link rel='stylesheet prefetch' href='css/ionicons/css/ionicons.min.css'>
<link rel='stylesheet prefetch' href='css/ionicons/fonts/ionicons.svg'>
<link rel='stylesheet prefetch' href='css/font_awesome/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='css/font_awesome/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='css/font_awesome/css/pop.css'>

<script language="javascript" src='js/angular/angular.min.js'></script>
<script language="javascript" src='js/onsenui.min.js'></script>
<script language="javascript" src='js/popover.js'></script>
<script language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" src='js/onsenui.js'></script>


<script language="javascript">
    MAX = 3;

    window.console = window.console || function(t) {};
    window.open = function(){ console.log('window.open is disabled.'); };

    if (false) {
      window.ontouchstart = function(){};
    }

    var module = ons.bootstrap();
    module.controller('AppController', function($scope) {
        $scope.login_name = "";
        $scope.order_list = "";  
        $scope.p = 1;

         ons.ready(function() {

             //new test of popover
            ons.createPopover('popover1.html').then(function(popover) {
            $scope.popover1 = popover;
            });

            ons.createPopover('popover2.html').then(function(popover) {
                $scope.popover2 = popover;
            });  

            $scope.show = function(e) {
                $scope['popover'+$scope.p].show(e);

            };

             //pop up for add table
             $scope.prompt = function() {
                ons.notification.prompt({message: "Please enter Amount",callback: function(tbl_num) {
                    ons.notification.alert({message: 'Amount is ' + parseInt(tbl_num || 0) + ' added.'});
                    }   
                });
            }


         });
    });


/*Features for pop up*/    
function page2()
{
   myNavigator.pushPage('page2.html', { animation : 'slide' } );
}

function page1()
{
   myNavigator.pushPage('page1.html', { animation : 'slide' } );
}

function loadData()
{
    if (MAX == 3){
        angular.element(document.getElementById('AppController')).scope().data_show = "IM NO 3!";
        MAX = 2;
    }
    else if (MAX == 2){
        angular.element(document.getElementById('AppController')).scope().data_show = "IM NO 2!";
        MAX = 1
    }else if (MAX == 1){
        angular.element(document.getElementById('AppController')).scope().data_show = "IM NO 1!";
        MAX = 3
    }
}

</script>

</head>

<body ng-controller="AppController" id="AppController">

<ons-navigator title="Navigator" var="myNavigator">
<ons-page>

      <div>
       <div>
           <ons-button modifier="login_btn" onclick="getPass(9)">9</ons-button>
           <ons-button modifier="login_btn" id="top-right" ng-click="show('#top-right')">0</ons-button>
           <ons-button modifier="login_clr" onclick="page1()" id="but_login">GO!</ons-button>
      </div> 
          <input type="hidden" id="txthidd" maxlength="4" size="30" name="Display"> 
     </div> 

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

 <ons-template id="page1.html" style="display:none;">
    <ons-page>   
      <ons-toolbar>
        <div class="left"><ons-back-button onclick="onLogout()">Page1</ons-back-button></div>
      </ons-toolbar>
      <ons-tabbar>
        <ons-button icon="ion-ios-checkmark" modifier="navi_button" class="chk_green" onclick="page2()">page2</ons-button>
      </ons-tabbar> 
      <ons-scroller class="order_listing"> <!--load all the list -->  
          {{data_show}}
        <div class="lower-left-button"><span style="color:white;font-size:28px;">17:15</span></div>
        </ons-scroller>
    </ons-page>

  </ons-template> 

  <ons-template id="page2.html" style="display:none;">
    <ons-page>   
      <ons-toolbar>
        <div class="left"><ons-back-button onclick="">Back</ons-back-button></div>
      </ons-toolbar>
      <ons-scroller class="order_listing"> <!--load all the order list -->          
        <div class="lower-left-button"><span style="color:white;font-size:28px;">17:15</span></div>
        </ons-scroller>
    </ons-page>

  </ons-template>     

<!--Pop up menu  -->
<script type="text/ons-template" id="popover1.html">
  <ons-popover direction="up down" cancelable>
    <div style="text-align: center; opacity: 0.5;">
      <p>Popover <strong>1</strong></p>
      <p><small>Click the background to remove the popover.</small></p>
    </div>
  </ons-popover>
</script>

<script type="text/ons-template" id="popover2.html">
  <ons-popover direction="up down" cancelable>
    <div style="text-align: center; opacity: 0.5;">
      <p>Popover <strong>2</strong></p>
      <p><small>Click the background to remove the popover.</small></p>
    </div>
  </ons-popover>
</script>



</body> 
</html>
D_9268
  • 1,039
  • 2
  • 9
  • 17

0 Answers0