KendoUI tabstrip navigates to blank page

Question

I'm using a custom tabstrip that I took from the KendoUI page and adapted for my application.\

It has 3 tabs (home, startOfDay and stops). Each tab goes to an HTML page.

The problem is this, I can navigate from Home to one of the other tabs without a problem, but after that if I try navigate to another tab it just goes to a blank page.

Here's the my layout code.

<section data-role="layout" data-id="default">
    <header data-role="header">
        <div data-role="navbar">FnF Driver Application</div>
    </header>
    <!--View content will render here-->
    <footer data-role="footer">
        <div data-role="tabstrip" id="custom-tabstrip">
            <a data-icon="home" href="home.html">Home</a>
            <a data-icon="globe" href="startOfDay.html">Start Of Day</a>
            <a data-icon="toprated" href="stops.html">Stops</a>
        </div>
    </footer>
</section>

each page is contained in a div that looks like this...

<body>
    <div id="home/startOfDay/stops" data-role="view" data-layout="default">
     ~Content goes here~
    </div>
</body>

Any help would be greatly appreciated.

Thanks!!!

Just an update...I took the tabstrip out and made a menu page with a few stand alone button that are coded like this - — Devon Britton, May 10 '13 at 17:26
Essentially it's the same problem as this http://www.kendoui.com/forums/mobile/general-discussions/navigation-is-break-after-first-usage.aspx but on a larger scale... — Devon Britton, May 10 '13 at 20:12

score 0 · Answer 1 · answered May 10 '13 at 22:17

0

Try removing the <body> tags from your views? I think when Kendo UI Mobile reads in a remote view it injects it into the page DOM, and having another <body> tag might be messing it up.

answered May 10 '13 at 22:17

CodingWithSpike

42,906
18
101
138

score 0 · Answer 2 · answered Mar 02 '14 at 06:51

I read somewhere that a layout has to have at least one view defined to work properly, even if it is a blank view. Try putting in a blank view.

<section data-role="layout" data-id="default">
    <header data-role="header">
        <div data-role="navbar">FnF Driver Application</div>
    </header>
    <!--View content will render here-->
    <div data-role="view"></div>
    <footer data-role="footer">
        <div data-role="tabstrip" id="custom-tabstrip">
            <a data-icon="home" href="home.html">Home</a>
            <a data-icon="globe" href="startOfDay.html">Start Of Day</a>
            <a data-icon="toprated" href="stops.html">Stops</a>
        </div>
    </footer>
</section>

KendoUI tabstrip navigates to blank page

2 Answers2