Hi,
I'm new to development with Kendo UI
I want to create a mobile application that needs to be deployable to ios & android.
From what i know, i'm therefore limited to HTML5, CSS and Javascript.
So i have created a project in Visual Studio that only contains those things in a first project. Then i have created a second web project that will contain the services. I have following code in an html page (see bottom).
When i run it nothing will happen... however, when i move the services into the first project and set url to "api/menu", it will work, so i know the service is configured correctly!
The below code is based on http://docs.kendoui.com/tutorials/ASP.NET/asp-net-hello-services, but i know this not really for making a mobile kendo ui application. I guess my question is really on how you can make a mobile Kendo UI application that contacts an asp.net REST service.
<!DOCTYPE html><html><head> <title>My App</title> <link href="css/kendo.mobile.all.min.css" rel="stylesheet" /></head><body> <div data-role="view" data-layout="default"> <table id="menu"> </table> <script type="text/javascript"> $(function () { // select the employees table from the page and // store it in a variable for later use. var $menu= $("#menu"); // make an ajax call to the employees WebAPI service // to retrieve a JSON response of all the employees $.ajax({ // the url to the service url: "http://localhost:50999/api/menu", // the format that the data should be in when // it is returned contentType: "json", crossDomain: true, // the function that executes when the server // responds to this ajax request successfully success: function (data) { // iterate over the data items returned from the server // the index variable is the position in the colleciton. // the item variable is the item itself $.each(data, function (index, item) { // append the first and last name to the table $menu.append("<tr><td>" + item.Week + "</td>" + "<td>" + item.Day + "</td>"); }); } }); }); </script> </div> <section data-role="layout" data-id="default"> <header data-role="header"> <div data-role="navbar">My App</div> </header> <!--View content will render here--> <footer data-role="footer"> <div data-role="tabstrip"> <a href="#">Home</a> <a href="about.html">About</a> <a href="#view2">More</a> </div> </footer> </section> <script src="js/jquery.min.js"></script> <script src="js/kendo.mobile.min.js"></script><script type="text/javascript"> var app = new kendo.mobile.Application(document.body, { transition: 'slide', platform: 'android' });</script></body></html>