CODEWITHSUNDEEP
javascriptcordovahtml-framework-7
Chris
Chris

Reputation: 618

Framework7 cannot properly load page

I have a framework7 application:

var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
    dynamicNavbar: true
});
myApp.onPageInit('index', function (page) {
    console.log('index page');
    mainView.router.loadPage('login.html');
}

It does not transition to login.html.

Index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">

<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/eventFeed.css">
<link rel="stylesheet" href="css/eventPage.css">
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>

<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
    <div class="list-block theme-gray">
        <div class="list-block-label" id="slideoutlist-name">User     Profile</div>
        <ul>
            <a href="EventFeed.html" class="item-link item-content close-panel">Feed</a>
        </ul>
        <ul>
            <a href="#" class="item-link item-content close-panel" id="logout">Logout</a>
        </ul>

    </div>
</div>
<div class="views">
<div class="view view-main">
    <div class="navbar" id="navbar">
        <div class="navbar-inner">
            <div class="right">

                <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
            </div>
        </div>
    </div>

    <div class="pages navbar-through toolbar-through">
        <div data-page="index" class="page">
            <div class="page-content">
                <div class="content-block">
                    <p>INDEX PAGE</p>
                    <a href="EventFeed.html">Feed</a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript" src="lib/framework7/js/framework7.min.js">                    
</script>
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="lib/facebook/all.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
</body>

</html>

And the login is the standard login on https://framework7.io/docs/login-screen.html.

It was working about a day or two ago until I merged branches. I then reverted back to this branch but it still does not work. If I do mainView.router.loadPage('asdf.html') or any other page, it works, but it just does not work for login.html. Why is this?

Upvotes: 0

Views: 1496

Answers (2)

bmrgould
bmrgould

Reputation: 81

Based on how your routing is setup, with mainView.router.loadPage('login.html'); you are using Framework7 v1. The doc you linked for the login page is from the current version: v2.

Start by using this: http://v1.framework7.io/docs/login-screen.html

Upvotes: 0

ArefinDe
ArefinDe

Reputation: 678

Any of these will do, (Assuming your js code is working) :

return app.views.main.router.navigate('/home/', history = true);
return app.views.main.router.navigate('/about/', history = true);
return app.views.main.router.navigate('/', history = true);

Where the first argument of navigate method (e.g. '/home/ or '/'or '/about/') is the path in the route.js file.

Upvotes: -1

Related Questions