JQuery DataTables - can't get json data from PHP on server

Question

I've been through the recommended posts and can't find an answer.

I have the latest jquery and datatables from their respective websites.

I have a PHP script that is used to access mysql data for other pages so I know it works but for reference here is the PHP code (OTCalDBFetch.php):

<?php
// List of events

try {
    // Connect to database
    $connection =  new PDO('mysql:host=localhost;dbname=items;charset=utf8mb4', 'uuuuuuuu', 'pppppppp');

    // Prepare and execute query
    $query = "SELECT * FROM items.events ORDER BY start";
    $sth = $connection->prepare($query);
    $sth->execute();

    // Returning array
    $events = array();

    // Fetch results
    while ($row = $sth->fetch(PDO::FETCH_ASSOC)) {
        $e = array();
        $e['id'] = $row['id'];
        $e['title'] = $row['title'];;
        $e['start'] = $row['start'];

        // Merge the event array into the return array
        array_push($events, $e);
    }

    // Output json for our calendar
    $json = json_encode($events, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);

    echo $json;
    exit();

} catch (PDOException $e) {
    echo $e->getMessage();
}

?>

And here is the html I am using, almost exactly an example from the datatables website.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"> <link rel="stylesheet" type="text/css" href="assets/css/datatables.min.css"> <script type="text/javascript" language="javascript" src="assets/lib/jquery.min.js"></script> <script type="text/javascript" language="javascript" src="assets/lib/jquery-migrate-3.0.0.min.js"></script> <script type="text/javascript" language="javascript" src="assets/lib/datatables.min.js"></script> <script type="text/javascript" language="javascript" class="init"> $('#example').DataTable({ "ajax": { "processing": true, "serverSide": true, "ajax": 'OTCalDBFetch.php', }, "columns": [ { "data": "start" }, { "data": "title" } ] }); </script> </head> <body class="dt-example"> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>start</th> <th>title</th> </tr> </thead> </table> </body> </html>

And what is happening is basically nothing.

the table heading appears on the browser(Firefox)
there are no errors on the Web Console, Browser Console, or the PHP Error Log.
The Web Developer Debugger (Network) shows that the request was never made.

All this leads me to believe that I a missing something very basic. in the html for calling the server.

Any help would be appreciated.

Regards, Jim

Answer 1

$('#example').DataTable({

    "processing": true,
    "serverSide": true,
    "ajax": 'OTCalDBFetch.php',
    "columns": [
                { "data": "start" },
                { "data": "title" } 
     ],

});

No need to write ajax inside datatable initialization.

JQuery DataTables - can't get json data from PHP on server

Question

1 answers

solution1
0 ACCPTED 2017-01-17 03:30:43

JQuery DataTables - can't get json data from PHP on server

Question

1 answers

solution1 0 ACCPTED 2017-01-17 03:30:43

solution1
0 ACCPTED 2017-01-17 03:30:43