App.router.navigate() Not Working

Hello,

Any idea why this app.router.navigate code doesn’t work? I have the same redirection code for another on-click event but that one does. I’m trying to redirect the user to the homepage when he logs out of the app. Here’s my code so far:

var meView = app.views.create('#view-me', {
  url: '/me/',
  name: 'me'
});

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

  //[LOGOUT]
  $$('.logout-btn').on('click', function (e) {
    app.dialog.alert("You are now logged out.","Logged Out");
    app.router.navigate('/');
  });

}); //me

I’m stuck on this one. meView.router.navigate(’/’); doesn’t work, same with app.router.navigate(’./index.html’); Anybody know what’s wrong?

Thanks in advance! :slight_smile:

Do you have route with path: '/'?

Yes.

{
    path: '/',
    url: './index.html',
  },

First of all it must be:

not the app.router…

Second, the / route must be defined on app global routes or on this meView. You can check if it is there by console.log(meView.router.routes)

I changed it back to meView.router.navigate(’/’); and here’s the log: https://pasteboard.co/Hh2RgdC.png.

Unfortunately it’s still not working. :confused:

Do you have live example or something to see the issue live?

Unfortunately, I don’t. It no longer works on browsers because of the Phonegap plugins added. :confused:

Ok, then i can recommend you to debug it deeper, so before you call the meView.router.navigate(’/’);, add the following:

console.log(meView.router.currentRoute);
console.log(meView.router.routes);
console.log(document.location.href);
meView.router.navigate(’/’);

And tell me what you see in console

Hi Vladimir,

Here it is: https://pasteboard.co/Hhpht5o.png. :slight_smile:

What is in your index.html?

Hmmm… Nothing out of the usual. Except maybe the fact that I use CSS to hide the form and show the main content when the user is logged in and vice-versa but that shouldn’t be a problem, right? :confused:

Here’s the content of my page:

<body>
  <div id="app">
    <!-- Status bar overlay for fullscreen mode-->
    <div class="statusbar"></div>
    <!-- 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">Left Panel</div>
            </div>
          </div>
          <div class="page-content">
            <div class="block">Left panel content goes here</div>
            <div class="block" id="stored-username"></div>
            <div class="block" id="stored-email"></div>
            <div class="block" id="stored-userid"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- Right panel with reveal effect-->
    <div class="panel panel-right panel-reveal theme-dark">
      <div class="view">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">Right Panel</div>
            </div>
          </div>
          <div class="page-content">
            <div class="block">Right panel content goes here</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Views/Tabs container -->
    <div class="views tabs ios-edges">
      <!-- Tabbar for switching views-tabs -->
      <div class="toolbar tabbar-labels toolbar-bottom-md">
        <div class="toolbar-inner">
          <a href="#view-home" class="tab-link tab-link-active">
            <i class="icon f7-icons ios-only">home</i>
            <i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>
            <i class="icon material-icons md-only">home</i>
            <span class="tabbar-label">Home</span>
          </a>
          <a href="#view-take-picture" class="tab-link">
            <i class="icon f7-icons ios-only">explore</i>
            <i class="icon f7-icons ios-only icon-ios-fill">explore_fill</i>
            <i class="icon material-icons md-only">explore</i>
            <span class="tabbar-label">Take Picture</span>
          </a>
          <a href="#view-me" class="tab-link">
            <i class="icon f7-icons ios-only">account_circle</i>
            <i class="icon f7-icons ios-only icon-ios-fill">account_circle_fill</i>
            <i class="icon material-icons md-only">account_circle</i>
            <span class="tabbar-label">Me</span>
          </a>
        </div>
      </div>

      <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
      <div id="view-home" class="view view-main tab tab-active">
        <!-- Page, data-name contains page name which can be used in page callbacks -->
        <div class="page" data-name="home">
          <!-- Top Navbar -->
          <div class="navbar">
            <div class="navbar-inner">
              <div class="left">
                <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>
              <div class="title">App Name</div>
            </div>
          </div>


          <div class="main page-content" data-ptr-distance="55">
            <div class="ptr-preloader">
              <div class="preloader"></div>
              <div class="ptr-arrow"></div>
            </div>
            <!--Toggle 1-->
            <div class="login-form">
              <div style="text-align:center;">Welcome to</div>
              <div class="login-screen-title">My App</div>
              <form>
              <div class="list no-hairlines">
                  <ul>
                  <li class="item-content item-input">
                      <div class="item-inner">
                      <div class="item-title item-label">Username</div>
                      <div class="item-input-wrap">
                          <input type="text" name="username" id="username" placeholder="Username">
                          <span class="input-clear-button"></span>
                      </div>
                      </div>
                  </li>
                  <li class="item-content item-input">
                      <div class="item-inner">
                      <div class="item-title item-label">Password</div>
                      <div class="item-input-wrap">
                          <input type="password" name="password" id="password" placeholder="Password">
                          <span class="input-clear-button"></span>
                      </div>
                      </div>
                  </li>
                  </ul>
              </div>
              <div class="list no-hairlines">
                  <ul>
                  <li class="show-btn">
                      <a href="#" class="button button-fill login-button" id="sign-in">Sign In</a>
                  </li>
                  <li class="show-preloader" style="display:none">
                      <div class="preloader"></div>
                  </li>
                  <li class="show-loading">
                    <a href="#" class="button" id="sign-up">Sign Up</a>
                  </li>
                  </ul>
                  <div class="block-footer">
        Some text about login information.<br>Click "Sign In" to close Login Screen

                  </div>
              </div>
              </form>
          </div>

            <!--Toggle 2"-->
              <div class="app-feed main-feed">
              </div>

            <div class="preloader infinite-scroll-preloader"></div>
          </div><!--page content-->



        </div>
      </div>

      <!-- Catalog View -->
      <div id="view-take-picture" class="view tab">
        <!-- Catalog page will be loaded here dynamically from /catalog/ route -->
      </div>

      <!-- Settings View -->
      <div id="view-me" class="view tab">
        <!-- Settings page will be loaded here dynamically from /settings/ route -->
      </div>

      <!-- Settings View -->
      <div id="view-settings" class="view tab">
        <!-- Settings page will be loaded here dynamically from /settings/ route -->
      </div>

      <!-- Settings View -->
      <div id="view-sign-up" class="view tab">
        <!-- Settings page will be loaded here dynamically from /settings/ route -->
      </div>

    </div>

</div>
  <!-- Cordova -->
  <!---->
  <script src="cordova.js"></script>
  <!---->

  <!-- Framework7 library -->
  <script src="lib/framework7/js/framework7.js"></script>

  <!-- App routes -->
  <script src="js/routes.js"></script>

  <!--LocalForage for persistent localstorage-->
  <script type="text/javascript" src="lib/localforage/localforage.js" charset="utf-8"></script>

  <!-- Path to your custom app scripts -->
  <script src="js/app.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


</body>

You have empty view-me content:

<div id="view-me" class="view tab">
        <!-- Settings page will be loaded here dynamically from /settings/ route -->
</div>

So what do you expect it to load when you do meView.router.navigate(’/’) ?! There is nothing to load, that is why it is not working

Hi Vladimir,

Oh sorry, I forgot to mention I have me.html for that:

<div class="page" data-name="me">
  <div class="navbar">
    <div class="navbar-inner sliding">

      <div class="title">Me</div>
      <div class="right">
        <a href="/settings/" class="link">
          <i class="icon material-icons md-only">settings</i>
          <span class="ios-only">Settings</span>
        </a>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">My Profile</div>
    <div class="block block-strong">
      <div class="col-100"><a class="button logout-btn">Sign Out</a></div>
    </div>
</div>
</div>

Here’s its route:

{
    path: '/me/',
    url: './pages/me.html',
  },

Thanks for your patience with me. :slight_smile: I know this is taking a while but I’m having a tough time learning about the routing stuff.

Yes, but your original question was about not working this:

So according to your index.html file it won’t work because you don’t have anything to load from index.html file

If you expect to content be loaded from:

Then it should be meView.router.navigate(’/me/’);