Problem with initial jTable load/display
I'm just getting started with jQuery and jTable, and am having a problem with jTable. I'm trying to set up an admin page for a list of news items for a website I'm working on. I'm using PHP 5.5.12 and MySQL 5.6.17 on the server.
The issue is I don't see any data when the page displays. I do see an empty table, with the expected title and column headings, but the message "No data available" is displayed. When I debug with Chrome developer tools, I don't see the URL for the list action being called. Here's all the code for the webpage:
<!DOCTYPE html>
<html>
<head>
<link href="../styles/index.css" rel="stylesheet"/>
<link href="../scripts/jquery-ui-1.11.2.smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="../scripts/jquery-ui-1.11.2.smoothness/jquery-ui.structure.css" rel="stylesheet"/>
<link href="../scripts/jquery-ui-1.11.2.smoothness/jquery-ui.theme.css" rel="stylesheet"/>
<script src="../scripts/jquery-1.11.2.js" type="text/javascript"></script>
<script src="../scripts/jquery-ui-1.11.2.smoothness/jquery-ui.js"></script>
<!-- Include one of jTable styles. -->
<link href="../scripts/jtable.2.4.0/themes/metro/blue/jtable.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jtable.2.4.0/jquery.jtable.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#NewsEntryContainer').jtable({
title: 'Current News Items',
actions: {
listAction: '/sleepydog/helpers/news/get.php'
},
fields: {
id: {
key: true,
list: false
},
begin_date: {
title: 'Begin Date',
width: '20%',
type: 'date'
},
end_date: {
title: 'End Date',
width: '20%',
type: 'date'
},
news_text: {
title: 'News Text',
width: '60%'
}
}
});
});
$('#NewsEntryContainer').jtable('load');
</script>
<meta charset="ISO-8859-1">
</head>
<body>
<br>
<h1>News Administration</h1>
<div id="NewsEntryContainer"></div>
</body>
</html>
I have tried entering the list action URL into the browser directly, and this is what I get back:
{"Result":"OK","Records":[{"id":"1","begin_date":"2015-01-12","end_date":"2015-01-12","news_text":"Just a bit of news"},{"id":"2","begin_date":"2015-01-13","end_date":"2015-01-31","news_text":"text to start on 1\/13, and end on 1\/31"},{"id":"3","begin_date":"2015-01-10","end_date":"2015-01-11","news_text":"Text to end on 01\/11"},{"id":"4","begin_date":"2015-01-13","end_date":null,"news_text":"text to start on 1\/13, and never expire"},{"id":"5","begin_date":"2015-01-10","end_date":null,"news_text":"Text to start on 1\/10, and never expire"}]}
Which looks correct to me.
I'm sure I'm making some kind of stupid mistake, but haven't been able to figure it out.
Any help is appreciated!
Marc Robertson