possible to use datatables on a blog like tumblr? would this require 'cross-site' configuration?
possible to use datatables on a blog like tumblr? would this require 'cross-site' configuration?
rw1
Posts: 42Questions: 0Answers: 0
hello,
i am wondering if it is possible to use datatables on a blog like tumblr?
i am currently using datatables in a server siding processing environment and all the files and mysql database are hosted on the same server and that is working, but i'm wondering if the table could be placed on a blog like tumblr and still retrieve data from the database (ie on a different server) ?
i've tried and the data is not loading (it just gets stuck on the 'loading' message), and after preliminary searching it seems i might have to implement some 'cross-site' configuration but i just want to be sure it is actually possible in the first place, and this is the right approach, before i head off learning how to do it!
below is my current working server side processing configuration.
(and in the tests i did on tumblr i changed 'localhost' to 'mydomainname.com' in the 'database connection information' in 'server_processing.php', but not sure if that is correct?)
[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bJQueryUI": true,
"bLengthChange": false,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"aoColumnDefs": [
{
"aTargets": [ 0 ],
"mData": "0",
"mRender": function ( data, type, full ) {
return '' +data+ '';
}},
{
"aTargets": [ 4 ],
"mData": "4",
"mRender": function ( data, type, full ) {
return '' +data+ '';
}
}
],
"oLanguage": {
"sProcessing": "",
"sLengthMenu": "show _MENU_ records",
"sInfo": "showing _START_ to _END_ of _TOTAL_ records",
"sSearch": "search records: ",
"sInfoFiltered": "",
"oPaginate": {
"sFirst": "first",
"sPrevious": "previous",
"sNext": "next",
"sLast": "last"
}},
"sAjaxSource": "examples/server_side/scripts/server_processing.php",
"aLengthMenu": [[10, 20, 30, -1], [10, 20, 30, "all"]],
"iDisplayLength": 10,
"fnDrawCallback": function() {
$(".youtube", oTable.fnGetNodes()).colorbox({iframe:true, innerWidth:425, innerHeight:344, top: "100px"});
},
} );
} );
[/code]
i am wondering if it is possible to use datatables on a blog like tumblr?
i am currently using datatables in a server siding processing environment and all the files and mysql database are hosted on the same server and that is working, but i'm wondering if the table could be placed on a blog like tumblr and still retrieve data from the database (ie on a different server) ?
i've tried and the data is not loading (it just gets stuck on the 'loading' message), and after preliminary searching it seems i might have to implement some 'cross-site' configuration but i just want to be sure it is actually possible in the first place, and this is the right approach, before i head off learning how to do it!
below is my current working server side processing configuration.
(and in the tests i did on tumblr i changed 'localhost' to 'mydomainname.com' in the 'database connection information' in 'server_processing.php', but not sure if that is correct?)
[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bJQueryUI": true,
"bLengthChange": false,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"aoColumnDefs": [
{
"aTargets": [ 0 ],
"mData": "0",
"mRender": function ( data, type, full ) {
return '' +data+ '';
}},
{
"aTargets": [ 4 ],
"mData": "4",
"mRender": function ( data, type, full ) {
return '' +data+ '';
}
}
],
"oLanguage": {
"sProcessing": "",
"sLengthMenu": "show _MENU_ records",
"sInfo": "showing _START_ to _END_ of _TOTAL_ records",
"sSearch": "search records: ",
"sInfoFiltered": "",
"oPaginate": {
"sFirst": "first",
"sPrevious": "previous",
"sNext": "next",
"sLast": "last"
}},
"sAjaxSource": "examples/server_side/scripts/server_processing.php",
"aLengthMenu": [[10, 20, 30, -1], [10, 20, 30, "all"]],
"iDisplayLength": 10,
"fnDrawCallback": function() {
$(".youtube", oTable.fnGetNodes()).colorbox({iframe:true, innerWidth:425, innerHeight:344, top: "100px"});
},
} );
} );
[/code]
This discussion has been closed.
Replies
http://datatables.net/forums/discussion/6399/jsonp-and-ajax/p1
and have added this to my config:
[code]
"fnServerData": function( sUrl, aoData, fnCallback ) {
$.ajax( {
"type":"POST",
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
} );
},
"sEcho": 1,
"iTotalRecords": 44,
"iTotalDisplayRecords": 44,
[/code]
and in firebug console i can see some data from the database (when i hover over the following error link), but am getting the error:
SyntaxError: invalid label
can anyone please tell me what other steps are required besides adding the above code to my configuration?
thank you!
edit: i also tried changing the following in my server_side.php file so that it looked like the demo jsonp.php script and now i am getting the error in firebug console:
"NetworkError: 500 Internal Server Error
[code]
$sTable = "data";
[/code]
to:
[code]
$sTable = "ajax";
[/code]
[code]
$sQuery = "
SELECT SQL_CALC_FOUND_ROWS id, ".str_replace(" , ", " ", implode(", ", $aColumns))."
[/code]
to:
[code]
$sQuery = "
SELECT SQL_CALC_FOUND_ROWS, ".str_replace(" , ", " ", implode(", ", $aColumns))."
[/code]
[code]
echo json_encode( $output );
?>
[/code]
to:
[code]
echo $_GET['callback'].'('.json_encode( $output ).');';
?>
[/code]
"sAjaxSource": "examples/server_side/scripts/server_processing.php",
That line is calling a local php file that cant access a remote server I am guessing you would want to change the Ajax source to a remote url like
"sAjaxSource": "http://www.mywebsite.com/server_side/scripts/server_processing.php",
either way, start with trying to call your server_processing.php directly in the browser to ensure that it is not having any errors retrieving your data.
on the tumblr version, the reference points to the absolute url.
directly accessing the script at mydomain.com/examples/server_side/scripts/server_processing.php produces MySQL Error: 1064
the firebug console message displayed at the tumblr site is:
"NetworkError: 404 Not Found - http://testtumblrblog.tumblr.com/www.mydomain.com/subdir/examples/server_side/scripts/server_processing.php?callback=jQuery17105868477052427972_1348682864930"
note it is prepending the tumblr url before the path defined to the script.
the datatables initialisation is:
"sAjaxSource": "www.mydomain.com/subdir/examples/server_side/scripts/server_processing.php",
If you cant visit www.mydomain.com/subdir/examples/server_side/scripts/server_processing.php
and get a valid json result then your table will never work. Try that first, you need to resolve the 1064 error.
The second issue looks like maybe tumbler isnt going to allow you to link to external files but not sure about that i don't use tumbler. One added note on this, you might try adding the http:// to the front of the sAjaxSource so that tumbler doesnt prepend its url.
I am guessing you don't have access to change the database permissions? If so you could create a remote mysql user , then move your server_processing.php onto the tumbler server and call the ajax source like a local file, but then you would need to go edit your server_processing.php to include the new remote credentials instead of using localhost. Some databases or setups wont allow remote mysql access and require it to be localhost only.
tumblr prepends 'http://testtumblrblog.tumblr.com/' before the sAjaxSouce when defined as:
"sAjaxSource": "http://www.mydomain.com/...
"sAjaxSource": "www.mydomainname.com/.....
"sAjaxSource": "/path/to/script....
but it LIKES:
"sAjaxSource": "http://mydomainname/path/to/script...
so now:
script is loading by directly accessing it but firebug is displaying error at the tumblr site:
[code]
SyntaxError: invalid label
[Break On This Error]
{"sEcho":1,"iTotalRecords":"44","iTotalDisplayRecords":"44","aaData":[{"DT_RowId...
(line 1, col 1)
[/code]
ah, i have just seen this, i will see if it is possible.
http://www.tumblr.com/themes/upload_static_file
http://www.tumblr.com/themes/upload_static_file
says:
"Use this to host small files required for custom themes (images, css, javascript). Once uploaded, files cannot be deleted or changed.
Uploading anything other than theme assets will result in an immediate banning of your account".
so one, i'm not sure if it would be safe to upload a file to the tumblr server that had database username/password info and two if it would be allowed by tumblr? hmm.......
- create new user in mysql and add to database with only 'select' privileges (so they can view only).
- add 'tumblr.com' as a remote database access host
- upload server_processing.php to tumblr
- reference the file at tumblr in sAjaxSource
- change the server_processing php database credentials to that of the 'tumbr' user
if anyone were to see the file at tumblr they would see:
database name
username
password
server name
and the file could not be deleted or changed.
i have tried initialisation code shown here:
http://datatables.net/release-datatables/examples/server_side/jsonp.html
[code]
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/jsonp.php",
"fnServerData": function( sUrl, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
} );
}
[/code]
(i am using server_processing.php not jasonp.php, when i used jasonp i got 505 errors).
and firebug shows me this error:
[code]
SyntaxError: invalid label
http://sitename.com/subdir/examples/server_side/scripts/server_processing.php?callback=jQuery17102615131152466471_1348909013455&sEcho=1&iColumns=5&sColumns=&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&mDataProp_1=1&mDataProp_2=2&mDataProp_3=3&mDataProp_4=4&sSearch=&bRegex=false&sSearch_0=&bRegex_0=false&bSearchable_0=true&sSearch_1=&bRegex_1=false&bSearchable_1=true&sSearch_2=&bRegex_2=false&bSearchable_2=true&sSearch_3=&bRegex_3=false&bSearchable_3=true&sSearch_4=&bRegex_4=false&bSearchable_4=true&iSortCol_0=0&sSortDir_0=asc&iSortingCols=1&bSortable_0=true&bSortable_1=true&bSortable_2=true&bSortable_3=true&bSortable_4=true&_=1348909015917
Line 1
[/code]
and displays:
[code]
SyntaxError: invalid label
{"sEcho":1,"iTotalRecords":"60","iTotalDisplayRecords":"60","aaData":[{"DT_RowId...
server...0043516 (line 1, col 1)
[/code]
(all the 'data' is coming back from the database in firebug but datatables frontend just shows loading image) :(.
The client-side is quite right in saying that there is an invalid label - that's not a JSONP response. If you want to use JSONP then you need the server to respond as such. If you can't modify the external server, then you need a parodying script on the server.
Allan
thank you for your reply.
i am a novice with these technologies so could anybody either provide:
- exact steps to implement this solution (including code snippets) or
- concise documentation where i can learn how to do this.
to re-state my aim and environment:
- i have a working instance of datatables using server_processing.php.
- i would like to use this on a tumblr site
what exact changes need to be made to the datatables initialisation code and sever_processing.php file in order to make this work?
thank you.
> - concise documentation where i can learn how to do this.
This site and Google I'd say. You probably won't find exact steps for your issue, since every case is unique. This example at least will get you close since it uses JSONP: http://datatables.net/release-datatables/examples/server_side/jsonp.html
Allan