Kendo UI Mobile Views not loading properly

2 posts, 0 answers
  1. tundecanhelp
    tundecanhelp avatar
    10 posts
    Member since:
    Jul 2013

    Posted 12 Jul 2013 Link to this post

    I am developing an app that has sever views inside a folder called views. from within my main index.html file if i link to any view within the view folder it does not load in my styles nor transitions all i get is a blank white screen with a word "back" which is for the button in the navbar of the view that loads. Below are the sample code i used.

    Index.html file code below.
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script src="cordova.js"></script>
            <script src="kendo/js/jquery.min.js"></script>
            <script src="kendo/js/kendo.mobile.min.js"></script>
            <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
            <script src="scripts/hello-world.js"></script>

            <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
            <link href="styles/main.css" rel="stylesheet" />
        </head>
        <body>
    <section data-role="layout" data-id="defaultlayout"> 
      <!--View content will render here--> 
        
        
    </section>
            <div data-role="view" id="tabstrip-home" data-title="Hello World!">
                <h1>Welcome!</h1>
                <a class="button" data-role="button" href="views/about.html">Home</a>
            </div>

            <div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction">
                Another view
            </div>

            <div data-role="view" id="tabstrip-geolocation" data-title="Geolocation">
                another view 2
            </div>

            <div data-role="layout" data-id="mobile-tabstrip">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </header>

                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#tabstrip-home" data-icon="home">Home</a>
                        <a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
                        <a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
                    </div>
                </div>
            </div>

            <script>
                var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            </script>
        </body>
    </html>

    Here is the code for my about.html

    <div data-role="view" id="secondview" data-layout="defaultlayout" data-title="Local View">
        <div ><p>Hi, I'm a local view.</p></div>
    </div>
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 15 Jul 2013 Link to this post

    Hi,

    Kendo UI Mobile transitions work with the code you've provided in the Icenium simulator. Do you have this problem in a specific device when you deploy the app?
    If you continue to experience problems, we would appreciate a sample http://jsbin.com/ or a project that we could look into. You could also post to stackoverflow which is monitored by the Kendo UI staff and it is highly likely they might have an idea of what might be the culprit.

    Regards,
    Steve
    Telerik

    Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
Back to Top