possible to use datatables on a blog like tumblr? would this require 'cross-site' configuration?

rw1

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]

rw1

i'm trying to follow solution in post here:

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]

Chytkam

Forget your table completely and make sure your server_processing.php works first. Is the server_processing.php located on the remote server? It needs to be for it to work as it previously did without changing any database remote access options.

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

rw1

yes, the local version is working properly and just points to the local server_processing.php.

on the tumblr version, the reference points to the absolute url.

Chytkam

can you access that same server_processing.php ok via the absolute url?

rw1

this is an update with the environment as is after making the changes mentioned in the above posts.

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

Chytkam

I think you have two different problems, first you need to get the remote script to work before you worry about the tables sAjaxSource issue.

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.

rw1

ok, undoing all changes in server_processing.php and directly accessing it outputs all the data.

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]

rw1

and re: the last suggestion of remote mysql user, i added tumblr.com as a 'Remote Database Access Host' in cPanel, but not really sure what to do after this. how do i move server_processing.php to the tumblr server?

ah, i have just seen this, i will see if it is possible.

http://www.tumblr.com/themes/upload_static_file

rw1

i think i understand the logic now, re: mysql remote user, but the notice at tumblr:

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

rw1

i'm new to this but possibly:

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

rw1

can anyone provide a solution to enable cross domain server side processing with datatables on a tumblr blog? the recent possible solution to enable tumblr as remote database access host does not seem secure. thank you.

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) :(.

allan

Unless you put a proxy on your server, then JSONP is more or less the only way to get cross site data pull to work.

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

rw1

hello,

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.

allan

I'd be delighted to provide a quote for fully implementing this for you. If you can PM me full details of the project I'll be able to give a suitable time estimate.

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