[SOLVED] V2 Navigation problem


#1

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.


[SOLVED] Questions with routes and back links
#2

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


#3

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>

#4

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


#5

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


#6

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>

#7

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?


#8

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)