I'm trying to use DataTables with my work's Virtual Learning Environment.
Introduction
As I've mentioned in previous questions, our VLE uses the Netvibes Universal Widget API which allows me to write JavaScript files that can communicate both with the VLE (for retrieving information from the VLE's user accounts such as names and timetables) and, via proxy, an internal network webserver hosting PHP files and a database.
Netvibes UWA AJAX calls
So, for example, I can use this code to access my PHP scripts:
UWA.Data.getJson(List.URL + '?cmd=getObservations&filters=' + JSONdata, List.init);
Two simple parameters - url, callback.
Alternatively, I can use the full Data.request call:
UWA.Data.request(
BookReviewInput.URL,
{
method: 'post',
proxy: 'ajax',
type: 'json',
cache: 3600,
parameters: obj,
onComplete: BookReviewInput.process
}
These scripts are written on our VLE, which has an internal network URL of http://vle.curriculum.local then an external URL of http://vle.ourschoolwebsite.com.
They communicate with scripts which are only accessible locally, from a URL of http://php.curriculum.local.
DataTables AJAX calls
I'm now trying to get DataTables to load information from my internally-located scripts, and I want it to do it all fully (i.e. pagination and everything) because we have a lot of data which is taking a lot of time to load in full.
First off, I made sure DataTables was working in the UWA format by manually copying some of the example tables off their website. The manual HTML table with the minimal .dataTable() functionality works correctly.
Then I tried to write the following code, which doesn't work:
<head>
<script type="text/javascript">
//<![CDATA[
widget.onLoad = function(){
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://php.curriculum.local/cmd.php"
} );
}
//]]>
</script>
</head>
<body>
<div id="wrapper">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> </table>
</div>
</body>
The console error that I get from running this script is hideously uninformative, possibly because of the UWA wrapper:
When I click on 186642.js..
Server-side output
I know that the problem doesn't lie with the server side output, as I've validated it accordingly on http://pro.jsonlint.com:
{
"sEcho": 0,
"iTotalRecords": "5",
"iTotalDisplayRecords": "5",
"aaData": [
[
"2012-10-24",
"35010",
"34966",
"10",
"43",
"2",
"2",
"2"
],
[
"2012-11-14",
"34956",
"35010",
"10",
"38",
"2",
"2",
"2"
],
[
"2012-11-09",
"90335",
"34972",
"11",
"28",
"2",
"1",
"1"
],
[
"2012-10-18",
"34961",
"34972",
"11",
"28",
"2",
"1",
"2"
],
[
"2012-10-19",
"34996",
"34972",
"11",
"28",
"2",
"2",
"2"
]
]
}
Probable cause
My relatively uninformed guess is that DataTables can't access my script because it's cross domain.
Problem is, there's no way I can put these scripts on the same domain - I don't have access to either PHP or MySQL on our VLE, nor does anyone in this organisation.
Potential solution
I think the answer is to try and use the UWA.Data calls within the DataTables function.
This is the UWA call I'd use to access my script: UWA.Data.getJson('http://php.curriculum.local/cmd.php' + '?cmd=getObservations', fnCallback);, though I presume I'd also need some way of sending dataTables' pagination variables etc. so I'd probably need to use the full UWA.Data.request call, and send a params object.
Sadly...
I have absolutely no idea if this is even possible, let alone how to do it.
Can anyone offer guidance?
Thanks in advance,
