3. Reload page when using splitter menu

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.

Reload page when using splitter menu

  • N

    I’m trying to upgrade my mobile app from JQuery Mobile to OnsenUI 2. Using a splitter menu, it appears that the pages are not reloaded (refreshed) on click. Is this the expected behavior? The content of my pages can change and I would like to fetch a fresh not cached page on each click. I may not understand the OnsenUI concept.

    Am I supposed to fetch the dynamic content on page show event instead?

    I’m using Rhomobile which uses the MVC concept with a Ruby VM server.

    0
  • E
    administrators

    You should get a new version of a page every time you navigate to it. When you navigate to a page using the splitter menu, the old page is removed from the DOM and the new page is added to the DOM, so each time the page gets reloaded from its template and any dynamic changes you had previously made will not be shown.

    I’m not sure if this answers your question. What kind of dynamic content do you mean?

    0
  • N

    The problem I have is that when I navigate back to the page there is no hit on the localhost server to load the page. It just shows me the cached content from the initial load. I use Rhomobile for my app development and it runs a localhost webserver to serve the pages.

    Here is the code from the first page shown on app load with the splitter (index.html):

    <!DOCTYPE html>

<head>

<title>My App</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=contain"/>

<link rel="stylesheet" href="/public/onsenui/css/onsenui.css">
<link rel="stylesheet" href="/public/onsenui/css/onsen-css-components.min.css">
<script src="/public/onsenui/js/onsenui.min.js"></script>

<script src="/public/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>

</head>

<body data-platform="<%= System::get_property('platform') %>">

<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('<%= url_for(:controller => :Startup, :action => :home) %>')" tappable>
          Home
        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html')" tappable>
          Settings
        </ons-list-item>
        <ons-list-item onclick="fn.load('about.html')" tappable>
          About
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="<%= url_for(:controller => :Startup, :action => :home) %>"></ons-splitter-content>
</ons-splitter>

<template id="settings.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Settings
      </div>
    </ons-toolbar>
  </ons-page>
</template>

<template id="about.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        About
      </div>
    </ons-toolbar>
  </ons-page>
</template>

</body>

</html>

    home.html:

    <ons-page>
  <ons-toolbar>
    <div class="left">
      <ons-toolbar-button onclick="fn.open()">
        <ons-icon icon="md-menu"></ons-icon>
      </ons-toolbar-button>
    </div>
    <div class="center">
      Main
    </div>
  </ons-toolbar>
  <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
    Swipe right to open the menu!
  </p>
  <p>
    Random: <%= Random.new_seed.to_s %>
  </p>
</ons-page>

    javascript code that handles the page changes of the splitter menu:

    window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page)
    .then(menu.close.bind(menu));
};

    I added a random generator to see if the page changes when I navigate away from it and back to it. OnsenUI is not loading a new one from the server. I’m on OnsenUI 2.10.1. I’m testing in iOS Simulator 11.3.

    0
  • N

    I’m able to fixe the problem by adding a cache busting parameter to the content.load call:

    content.load(page + '?cache_rnd=' + Math.random().toString())

    The HTML headers used by the local webserver are:

    Date: Mon, 18 Jun 2018 11:54:29 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 445
Connection: close
Pragma: no-cache
Cache-Control: must-revalidate
Cache-Control: no-cache
Cache-Control: no-store
Expires: 0

    I’m not sure if this issue is with OnsenUI or with Rhomobile’s local webserver.

    0