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

Calling Remote Datasource with Kendo Mobile

1 Answer 172 Views

Application

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

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.

see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html

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.

see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html

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>

Calling Remote Datasource with Kendo Mobile

1 Answer, 1 is accepted