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:
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
>