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>1 Answer, 1 is accepted
0
Hello David,
Thus you will guarantee that the init and show events of the View will be raised correctly.
Regards,
Georgi Krustev
the Telerik team
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" });}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!