3. Tab bar fails to load external files

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.

Tab bar fails to load external files

  • H

    Hello
    I have a very simple tab bar with 2 pages (see markup below)
    When pages are defined in the same document as the tab bar itself everything works fine.
    However when I move the pages into separate html files I get an error in onsenui.js :
    internal.doc.getElementById(…) is null
    I traced the code to function internal.getTemplateHTMLAsync in onsenui.js
    which loads the page (that succeeds) and then calls
    internal.doc.write(’<template id="’ + page + ‘">’ + html + ‘</template>’);
    After that it wants to get the fragment it just written
    var fragment = internal.doc.getElementById(page).content;
    But that fails
    I’m using version v2.6.1 ( defined in onsenui.js)
    Any ideas why and how to fix?
    Thanks
    Andy

    Here is tabs.html file
    <html>
    <!-- libraries omitted–>
    <body>
    <ons-page ng-controller=“AppController as app”>
    <ons-toolbar>
    <div class=“center”>My App - {{app.title}}</div>
    </ons-toolbar>
    <ons-tabbar position=“auto”>
    <ons-tab page=“page1.html” label=“Page 1” icon=“square” active></ons-tab>
    <ons-tab page=“page2.html” label=“Page 2” icon=“square”></ons-tab>
    </ons-tabbar>
    </ons-page>
    </body>
    </html>

    The html pages are defined as follows:
    page1.html
    <ons-page>
    <div class=“content” style=“text-align: center”>
    <p>Page 1 content</p>
    </div>
    </ons-page>

    • and same for page 2
    0 1 Reply
  • Onsen UI

    @heel_curve5 I guess you are using Firefox. Update to onsenui@2.7.0 to fix that error.

    0