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!
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.
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.
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
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?
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.
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:
Timidyo:
‘./pages/me.html’
Then it should be meView.router.navigate(’/me/’);
// define props so the component will receive it
//router navigate to another page
