This is a migrated thread and some comments may be shown as answers.

Calling Remote Datasource with Kendo Mobile

1 Answer 102 Views
Application
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 05 Jul 2012, 09:54 PM
So I'll start by saying I'm brand new to Kendo UI Mobile, and I was walking through the Kendo Mobile UI tutorial and trying to get the datasource to load data from my local RailsApp. I'm running the mobile app on an Android Simulator and the data never returns...I just get a spinning circle at the bottom of the application. I'm not sure where I'm going wrong as I've copied and pasted the code from the Android version of the tutorial and changed it to match my local URLS ( I built it myself originally, but then decided to copy and paste when I ran into issues). Any help is greatly appreciated..Thanks

Here's my code:

<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"/>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.mobile.min.js"></script>
<script type="text/javascript">
 
 
 
 
    // If you want to prevent dragging, uncomment this section
    /*
    function preventBehavior(e)
    {
      e.preventDefault();
    };
    document.addEventListener("touchmove", preventBehavior, false);
    */
 
 
    /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
    for more details -jm */
    /*
    function handleOpenURL(url)
    {
        // TODO: do something with the url passed in.
    }
    */
 
 
    function onBodyLoad()
    {      
        document.addEventListener("deviceready", onDeviceReady, false);
    }
 
 
    /* When this function is called, PhoneGap has been initialized and is ready to roll */
    /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
    for more details -jm */
    function onDeviceReady()
    {
        // do your thing!
    }
     
    </script>
</head>
<body onload= "onBodyLoad()">
<div data-role="view" data-init="getInfo" data-layout="app" data-title="info" id="info">
    <div id="news">News Goes Here</div>
</div>
<div data-role="view" data-layout="app" data-init="getSessions" data-title="scheudle" id="scheudle">
    Schedule Goes Here
    <ul id="sessions"></ul>
</div>
 
 
<div data-role="layout" data-id="app">
    <header data-role="header">
        <div data-role="navbar">Conference Tracker</div>
    </header>
    <footer data-role="footer">
        <div data-role="tabstrip">
            <a href="#info" data-icon="info">Info</a>
            <a href="#scheudle" data-icon="recents">Schedule</a>
        </div>
    </footer>
</div>
 
 
<script type="text/x-kendo-template" id="sessionsTemplate">
    <div class="left">
            <div class="time"> ${formatted_time }</div>
            <div class="speaker">${speaker}</div>
    </div>
 
 
    <div class="title">${title}</div>
 
 
</script>
 
 
 <script>
 
 
        // creates the application UI
        var application = new kendo.mobile.Application($(document).body, { transition: "slide" });
 
 
        var infosUrl = "/infos.json"; //also tried full path here as well.
        var sessionsUrl = "/sessions.json";
 
 
        var getInfo = function() {
            // read from the remote data source
            $.get(infosUrl, function(data) {
                $.each(data, function() {
                    $("#news").append("<p class='info'>" + this.content + "</p>");
                });
            });
        }
 
 
        var getSessions = function() {
            $("#sessions").kendoMobileListView({
                dataSource: kendo.data.DataSource.create({
                    transport: {
                        read: sessionsUrl
                    },
                    group: "day"
                }),
                template: $("#sessionsTemplate").html()
            });
        }
 
 
    </script>
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 11 Jul 2012, 06:58 AM
Hello David,

 
I believe that you will need to instantiate the Application in the onDeviceReady callback:

function onDeviceReady() {
     application = new kendo.mobile.Application($(document).body, { transition: "slide" });
}
Thus you will guarantee that the init and show events of the View will be raised correctly.

Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Application
Asked by
David
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Share this question
or