Converting SQL to Kendo UI Listview

Question

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 SCRIPT

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

JavaScript File

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.

HTML Page

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

Answer 1

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",            
        }
    }
});