Tab bar fails to load external files



  • 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

  • Onsen UI

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


Log in to reply