[SOLVED] Not available error in console when framework7 is running on the server

Questions
1

Hi …
I made my application with framework7. My customer is going to show his services at the site. So I upload whole folders of the project to the web server in below URL http://yenwater.com/www/
But when I open the site at the browser, “page: init” Event doesn’t work And I see this error at the console :
not available.
I don’t know why !!!
My index.html is similar to :

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link rel="stylesheet" href="framework7/css/framework7.min.css">
        <link rel="stylesheet" href="framework7/css/framework7-icons.css">
        <title>Yen</title>
    </head>
    <body>
        <div id="app">
            <!-- Status bar overlay for fullscreen mode-->
            <div class="statusbar"></div>
            <!-- Right panel with reveal effect panel panel-left panel-cover theme-dark panel-closing -->
            <div class="panel panel-left panel-cover theme-dark">
               ....
            </div>
            <!-- Views/Tabs container -->
            <div class="views view-main tabs ios-edges" >
                <!-- Tabbar for switching views-tabs -->
                <div class="toolbar tabbar-labels toolbar-bottom-md" id="footer_toolbar">
                 ...
                </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" id="AdminIndexPage">
                        <!-- Top Navbar -->
                        <div class="navbar">
                            ....
                        </div>
                        <div class="page-content"  style="padding-top: 32px;padding-bottom: 0;display: flex;">
                        ....
                        </div>
                    </div>
                </div>
                <!-- Catalog View -->
                <div id="view-catalog" class="view tab" data-name="catalog">
                    <div class="page" data-name="catalog" id="CatalogPage">...</div>
                </div>
                <!-- Settings View -->
                <div id="view-settings" class="view tab">... </div>
            </div>
            </div>
            <script src="framework7/js/framework7.js"></script>
            <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
            <script type="text/javascript" src="js/ajax.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script src="js/routes.js"></script>
            <script src="js/swiper.min.js"></script>
            <script type="text/javascript" src="js/myapp.js"></script>
    </body>
</html>

And this is myapp.js file :

        var $$ = Dom7;
    var app = new Framework7({
        root: '#app',
        id: 'com.myapp.yenwater',
        theme: 'auto', // Automatic theme detection
        dialog: {
            title: 'YenWater',
        },
        statusbar: {
            iosOverlaysWebview: true,
        },
        touch: {
            tapHold: true,
        },
        tapHold: true,
        routes: routes,
    });
    var mainView = app.views.create('.view-main', {url: '/'});
    app.preloader.show();
    $$(document).on('page:init', '.page[data-name="home"]', function (e) {
2

My problem has solved .

var app = new Framework7({
    root: '#app',
    id: 'com.myapp.yenwater',
    theme: 'auto', // Automatic theme detection
    dialog: {
        title: 'YenWater',
    },
    statusbar: {
        iosOverlaysWebview: true,
    },
    touch: {
        tapHold: true,
    },
    tapHold: true,
    routes: routes,
    on: {
        pageInit(page) {
            if (page.name === 'home') {
                page_home_load();
            } else if (page.name === 'register') {
                page_register_load();
            }
        },
        viewInit(view) {
            if (view.name == homeView)
                view_home_init();
        }
    }
});
1 Like