[SOLVED] V2 Navigation problem

Hello community.

I’m having a problem with the Navigation on my app.
I have the next pages: index(Login) and page1(Expandable-Searchbar, Left Panel, Virtual-List)

For example, when from index I navigate to the page1 it’s everything fine, but when I go back from page1 to index and then navigate again to page1 everything loads just fine, the Virtual-List and Searchbar works fine but the Left Panel stop working. Thanks in advance. I’ll left some code below.

This is main instance:

// Dom7
var $$ = Dom7;

// Framework7 App main instance
var app = new Framework7({
  root: '#app', // App root element
  id: 'com.med.app', // App bundle ID
  name: 'Med', // App name
  theme: 'auto', // Automatic theme detection

  // App routes
  routes: routes,

  panel: {
    swipe: 'left',
  },
  touch: {
    tapHold: true //enable tap hold events
  },
});

// Init/Create main view
var mainView = app.views.create('.view-main', {
  url: '/',
  pushState: true,
});

This is what I’m using to navigate through pages:

  mainView.router.navigate('/page1/', {
    ignoreCache: true,
  });

I tried removing ignoreCache or adding reloadCurrent, but still the same.

And where did you put that code for navigating to page1 from index?

Initially I put it on a “exit” link on the Left-Panel, then I discovered this issue. And now I use the back button on the browser or the phone and have the same issue.

$$(document).on('page:init', '.page[data-name="page1"]', function (e) {
  loadVirtual-List();

  //Botón salir de panel izquierdo
  $$('#exit-button').on('click', function () {
    app.dialog.confirm("¿Seguro quieres salir?", function() {
    //Cerrar la página clínicas.
      mainView.router.back('/index', {
        ignoreCache: true,
        reloadPrevious: true,
      });
    });

  });

And to navigate from Index to page1, I have the next $.get(url) call which I pass a variable and depending on the reseult go to Page1 or not.

  $.get(urlLogin, {
    p0: dni
  })
  .done(function (resultado) {
    if (resultado.trim() == "P") {
      mainView.router.navigate('/page1/', {
        ignoreCache: true,
      });
    }

EDIT:
This is the code of page1.html

<div class="page page-with-subnavbar" data-name="page1">
  <!-- Left panel with cover effect-->
  <div class="panel panel-left panel-cover theme-dark">
    <div class="view">
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">Menú</div>
          </div>
        </div>
        <div class="page-content">
          <!--<div class="block text-align-center no-margin-top"><img src="img/logow.png" alt="logow" width="40%"></div>-->
          <div class="block no-margin-top">Hola, {{name}}</div>
          <!--List-->
          <div class="list media-list">
            <ul>
              <li>
                <a href="#" id="perfil-button" class="item-link item-content">
                  <div class="item-media">
                    <i class="icon f7-icons ios-only">person</i>
                    <i class="icon material-icons md-only">person</i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title">Perfil</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" id="salir-button" class="item-link item-content">
                  <div class="item-media">
                    <i class="icon f7-icons ios-only">logout</i>
                    <i class="icon material-icons md-only">power_settings_new</i>
                  </div>
                  <div class="item-inner">
                    <div class="item-title">Salir</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <!--List-->
        </div>
      </div>
    </div>
  </div>
  <!-- Navbar -->
  <div class="navbar">
    <div class="navbar-inner sliding">
      <!-- Left -->
      <div class="left sliding">
        <a href="#" class="link icon-only panel-open" data-panel="left">
          <i class="icon f7-icons ios-only">menu</i>
          <i class="icon material-icons md-only">menu</i>
        </a>
      </div>
      <!-- Title -->
      <div class="title sliding">Clínicas</div>
      <!-- Right -->
      <div class="right">
        <!-- Link to enable searchbar -->
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar">
          <i class="icon f7-icons ios-only">search_strong</i>
          <i class="icon material-icons md-only">search</i>
        </a>
      </div>
      <!-- Searchbar is a direct child of "navbar-inner" -->
      <form class="searchbar searchbar-expandable searchbar-init"
      data-search-container=".virtual-list" data-search-item="li" data-search-in=".item-title">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <input type="search" placeholder="Buscar clínicas"/>
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          <span class="searchbar-disable-button">Cancelar</span>
        </div>
      </form>
      <!-- Subnavbar -->
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <!-- Subnavbar content, for example tabs buttons -->
          <div class="segmented">
            <a href="#" id="button-turno" class="button">
              <i class="icon f7-icons ios-only">person</i>
              <i class="icon material-icons md-only">person</i></a>
            <a href="#" id="button-sobreturno"  class="button">
              <i class="icon f7-icons ios-only">calendar</i>
              <i class="icon material-icons md-only">date_range</i></a>
            <a href="#" id="button-turnoslibres" class="button">
              <i class="icon f7-icons ios-only">time</i>
              <i class="icon material-icons md-only">access_time</i></a>
            <a href="#" id="button-anular" class="button">
              <i class="icon f7-icons ios-only">world</i>
              <i class="icon material-icons md-only">public</i></a>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Page Content -->
  <div class="page-content hide-navbar-on-scroll">
    <!-- Searchbar backdrop -->
    <div class="searchbar-backdrop"></div>

    <div class="list simple-list searchbar-not-found">
      <ul>
        <li>No se han encontrado resultados.</li>
      </ul>
    </div>

    <!--Virtual List Clinicas-->
    <div class="list virtual-list media-list searchbar-found">
    </div>
    <!--Virtual List Clinicas-->
  </div>

</div>

Issue is that Panel is not supported inside of page. Panels must be in app root element

So, the Panel should be on my app.js for example?

No, it should be in your main app layout.
https://framework7.io/docs/panel.html#examples

<body>
  <div id="app">
    <div class="panel panel-left panel-reveal">
      <div class="block">
        <p>Left Panel content here</p>
      </div>
    </div>
    <div class="panel panel-right panel-cover">
      <div class="block">
        <p>Right Panel content here</p>
      </div>
    </div>
    <div class="view view-main view-init">
      <div class="page">
        <div class="page-content">
          <div class="block">
            <p><a class="panel-open" href="#">Open Left Panel</a></p>
            <p><a class="panel-open" href="#" data-panel="right">Open Right Panel</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
2 Likes

Thanks for replying @pvtallulah and @nolimits4web
Issue solved. Now thing is that panel open on index.html if you swipe left. Is there a way that can only open and or swipe on page1 and other pages?

1 Like

I solved using this on page:init.

app.panel.enableSwipe('left');

And if you exit the page:

app.panel.disableSwipe();

Note: if you call app.panel.disableSwipe(); indicating the side - string like this
app.panel.disableSwipe('left');
like it says on the docs, throws an error and do not works.

Uncaught TypeError: n.forEach is not a function
    at Object.disableSwipe (framework7.js:14811)
    at Object.onClick (app.js:181)
    at HTMLSpanElement.g (framework7.js:10336)
    at HTMLSpanElement.l (framework7.js:1078)
2 Likes