The problem I am facing is, I have a list of events, that will change frequently and need to have them updated inside my Kendo UI Mobile Listview each time it is opened. The SQL table exists in this format.
Item Type Description
eventID Integer (Unique) A unique ID for the event
name String (30chars) The name of the event
time Time Date A DTG of the event
category String(enum values) Category for initial disambiguation
subcategory String(enum values) Further disambiguation category
description String (100chars) The description that appears for the event.
locationID Integer(Referenced) A unique ID for the location of the event.
pictureID Integer(Referenced) A ID for the picture file of the event.
I need to turn this SQL database into the Listview, so I made a PHP query as I thought this is the best approach. From there I made a function in my script file that uses this php file as a data source. I then attempted to bind it to the listview and failed epically.
My question is where do I go from here? / Can anyone show me whats wrong? / what Im missing? BTW Im quite new to coding, and this is by far the most complex thing I have attempted, so please excuse the massive screw ups if they exist. Code for all 3 things can be found below:
<?php
$con = mysql_connect("mysql://serverlURL","USERNAME","PASSWORD");
if (!$con){ die('Could not connect: '.mysqlerror()); }
mysql_select_db("DBNAME", $con);
$q = mysql_query("Select * from events;");
$res = json_encode(mysql_fetch_assoc($q));
echo $res;
mysql_close($con);
?>
I then have this is my main.js:
function dataInit(){
var eventdata = new kendo.data.Datasource({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/SQLRequests/getevents.php",
endlessScroll: true,
dataType: "json",
success: function (data) {
$("#flat-listview").kendoMobileListView({
dataSource: data.d,
template: $("#ListViewTemplate").html()
});
}
})
}
my page then initiates the script in the header, as well as having the listview element.
<div data-role="view" data-title="Events" data-style="inset" data-init="datainit">
<header data-role="header" data-id="default-header">
<div data-role="navbar">
<a class="nav-button" data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
</div>
</header>
<ul id="eventfeed"></ul>
</div>
The issue is that you have mixed jQuery ajax method and DataSource. Here is a fiddle sample on how to use data source to do what you want: http://jsfiddle.net/whizkid747/rDESU/
In this sample, I am using jsFiddle's echo service to return the data posted to the url. For you, you just need to provide your url and do a 'Get'.
Something like this:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/SQLRequests/getevents.php",
dataType: "json",
type: "GET",
}
}
});