I want to reload inside the OnsenUI Navigator pushpage.

Thank you for your continuous support.

As stated in the title, is it possible to reload the inside of the pushpage after moving to pushpage with navigator?
This is because I want to reload the page in the event of a network error when extracting information from an external DB through pushpage.

I would appreciate it if someone could let me know.
Thank you for your cooperation.

monaca onsen-ui

2022-09-29 22:57

1 Answers

How about replacePage() by specifying animation: 'none'?

correct
If you call replacePage() in animation: none; below the second tier, the animation will disappear even during popPage, and you will need to reset the animation after the reload.

If you do not want to use <ons-back-button>, popPage() is OK with animation: 'default' as shown below without resetting.

$scope.nav.popPage({animation:'default'});

ons.bootstrap()
.controller('IndexController', function($scope){
  function resetAnimation() {
    var options=$scope.nav.getCurrentPage().options;
    options.animation='default';
    options.animator=$scope.nav._getAnimatorOption(options);
  }
  $scope.count = 0;
  $scope.reload=function(){
    $scope.nav.replacePage('page2.html', {animation:'none', onTransitionEnd:resetAnimation});
  };
});

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsen-css-components.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsenui.css"rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/onsenui.min.js"></script>

<ons-navigator var="nav" page="page1.html">
  
</ons-navigator>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
    </ons-toolbar>
  <ons-buttoning-click="nav.pushPage('page2.html')">Push</ons-button>
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-pageing-controller="IndexController">
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
    </ons-toolbar>
    <p>Count: {{count}}</p>
    <ons-buttoning-click="count=count+1">Count up</ons-button><br>br>br>br>
    <ons-buttoning-click="reload()">Reload</ons-button>
  </ons-page>
</ons-template>

2022-09-29 22:57

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656