php - SQL を Kendo UI Listview に変換する

Question

私が直面している問題は、頻繁に変更されるイベントのリストがあり、開くたびに Kendo UI Mobile Listview 内で更新する必要があることです。SQL テーブルはこの形式で存在します。

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.

この SQL データベースを Listview に変換する必要があるため、これが最善の方法だと考えて PHP クエリを作成しました。そこから、この php ファイルをデータ ソースとして使用する関数をスクリプト ファイルに作成しました。次に、それをリストビューにバインドしようとしましたが、劇的に失敗しました。

私の質問は、ここからどこへ行くのですか? / 誰が何が悪いのか教えてもらえますか? /何が欠けていますか？ところで、私はコーディングにまったく慣れていません。これは私が試みた中で最も複雑なことです。3 つすべてのコードを以下に示します。

PHP スクリプト

<?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);
?>

次に、これが私の main.js です。

JavaScript ファイル

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()
                });
            }
        })
    }

私のページは、リストビュー要素を持つだけでなく、ヘッダーでスクリプトを開始します。

HTML ページ

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