Mobile CSS not detected on some html.pages

7 posts, 1 answers
  1. emmapabale
    emmapabale avatar
    12 posts
    Member since:
    Jun 2013

    Posted 24 Jun 2013 Link to this post

    Hi I don't know what to do when I use window.location = "FILE.html"; the code loads the page but the kendo css style is not detected when I debug it. Any suggestions?
  2. Ivan K. Ivanov
    Admin
    Ivan K. Ivanov avatar
    32 posts

    Posted 25 Jun 2013 Link to this post

    Hi Emma,

    You don't need to set window.location in order to navigate between pages/views. The Kendo UI way to achieve this is to use remote views. Please refer to Kendo UI documentation for more information.

    I prepared a short sample which illustrates how to navigate between views without using window.location.

    index.html

    <!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>
            <div data-role="view" id="tabstrip-home" data-title="Hello World!">
                <a href="myPage.html" data-role="button">Go</a>
            </div>
     
            <script>
                var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            </script>
        </body>
    </html>

    myPage.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
        <head>
            <title></title>
        </head>
        <body>
            <div data-role="view">
                This is my view
            </div>
        </body>
    </html>

    By clicking the Go button on first view, you will be navigated to the second view.

    Hope this helps.
    Regards,
    Ivan K. Ivanov
    Telerik

    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Missed our first webinar, watch it here.
    Share feedback and vote for features on our Feedback Portal.
  3. emmapabale
    emmapabale avatar
    12 posts
    Member since:
    Jun 2013

    Posted 25 Jun 2013 Link to this post

    Well i am going to put a validation on a script that's why i tried using window.location, have any suggestions?

    im using it for login purposes that's why there's a validation.

    Thanks!

    will wait for your reply.


    Emma Rizza
  4. emmapabale
    emmapabale avatar
    12 posts
    Member since:
    Jun 2013

    Posted 25 Jun 2013 Link to this post


    Well i am going to put a validation on a script that's why i tried using window.location, have any suggestions? im using it for log-in purposes that's why there's a validation.




    Thanks! will wait for your reply!


    Emma
  5. emmapabale
    emmapabale avatar
    12 posts
    Member since:
    Jun 2013

    Posted 25 Jun 2013 Link to this post

    Im working on an ajax post that when the user exist, that's the time it will redirect to another page. that's why i am looking for the alternative for window.location on jquery.
  6. Answer
    Ivan K. Ivanov
    Admin
    Ivan K. Ivanov avatar
    32 posts

    Posted 26 Jun 2013 Link to this post

    Hello Emma,

    I updated index.html I sent you yesterday so you can see how to navigate between views programmatically.

    <!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>
            <div data-role="view" id="tabstrip-home" data-title="Hello World!">
                <a id="btnGo" data-role="button">Go</a> <!-- href is not set here -->
            </div>
     
            <script>
                var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
                var isValid = true;
                 
                $("#btnGo").click(function(e) {
                    if (isValid) { //Here you can perform the validation logic you want
                        app.navigate("myPage.html");
                    }
                });
            </script>
        </body>
    </html>
     


    Regards,
    Ivan K. Ivanov
    Telerik

    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Missed our first webinar, watch it here.
    Share feedback and vote for features on our Feedback Portal.
  7. emmapabale
    emmapabale avatar
    12 posts
    Member since:
    Jun 2013

    Posted 27 Jun 2013 Link to this post

    Thanks!
Back to Top