Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Multiple files - Tutorial - not work



  • Hello Friends

    I´m new in framework. I have started the tutorial on this page (https://onsen.io/v2/guide/tutorial.html#multiple-files).
    My goal is navigate between many files. If I can do it so I will adapt my App. But I need navigate between more than one page. This part of this tutorial explain how can I do it. I follow the instructions but this does not work.

    According to the tutorial:
    This brings up an important point: Onsen UI pages can be defined either as templates using the template element, or in their own file. When we call ons-navigator.resetToPage with home.html as the argument, the navigator looks in the current file for templates with id=“home.html”, and then looks for files called home.html. This is why nothing broke when we moved the home page out of a template and into its own file.

    My files
    First html file.******************************
    <!DOCTYPE html>
    <html lang=“en”>
    <head>
    <meta charset=“utf-8” />
    <meta name=“apple-mobile-web-app-capable” content=“yes” />
    <meta name=“mobile-web-app-capable” content=“yes” />
    <meta http-equiv=“Content-Security-Policy” content=“default-src * data:; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval’”>
    <link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon” />
    <link href=‘https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic’ rel=‘stylesheet’ type=‘text/css’>
    <title>Onsen UI Forum Help by Munsterlander</title>

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
    <script src="https://unpkg.com/onsenui"></script>
    

    <script>
    const login = () => {
    const username = document.querySelector(’#username’);
    const password = document.querySelector(’#password’);
    if (true) {
    // call the navigator to move to the new page
    const navigator = document.querySelector(’#navigator’);
    navigator.resetToPage(‘home.html’);
    } else {
    ons.notification.alert(‘Wrong username/password combination’);
    }
    }
    </script>
    </head>
    <body>
    <ons-navigator id=“navigator”>
    <ons-page>
    <div style=“text-align: center; margin-top: 200px”>
    <p>
    <ons-input id=“username” placeholder=“Username” modifier=“underbar”></ons-input>
    </p>

                <p>
                    <ons-input id="password"
                               placeholder="Password"
                               type="password"
                               modifier="underbar">
                    </ons-input>
                </p>
    
                <p>
                    <ons-button onclick="login()">Sign in</ons-button>
                </p>
            </div>
    
        </ons-page>
    </ons-navigator>
    

    </body>
    </html>

    Second html file.******************************

    <!DOCTYPE html>
    <html lang=“en”>
    <head>
    <meta charset=“utf-8” />
    <meta name=“apple-mobile-web-app-capable” content=“yes” />
    <meta name=“mobile-web-app-capable” content=“yes” />
    <meta http-equiv=“Content-Security-Policy” content=“default-src * data:; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval’”>
    <link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon” />
    <link href=‘https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic’ rel=‘stylesheet’ type=‘text/css’>
    <title>Onsen UI Forum Help by Munsterlander</title>

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
    <script src="https://unpkg.com/onsenui"></script>
    

    </head>
    <body>
    <ons-page id=“home”>
    <ons-toolbar id=“home-toolbar”>
    <div class=“center”>Home</div>
    </ons-toolbar>

        Hello!
    </ons-page>
    

    </body>
    </html>


  • administrators

    The second file should just contain this and nothing more:

    <ons-page id=“home”>
    <ons-toolbar id=“home-toolbar”>
    <div class=“center”>Home</div>
    </ons-toolbar>
    
        Hello!
    </ons-page>