Json not well formed

egofree

Hello,

I want to display a list of users with a json file. Here is the json file :

[code]
{
"aaData" : [
{
"user_id" : "1",
"name" : "Grace Wilson"
},
{
"user_id" : "2",
"name" : "John Hamilton"
},
{
"user_id" : "3",
"name" : "Amanda Hamilton"
}
]
}
[/code]

I am sure the json is valid, as i've tested it on several sites (e.g http://jsonlint.com/)

Here is my code for displaying the table :
[code]
$(document).ready(function() {

var oTable = $("#table_id").dataTable({
"bInfo": false,
"bPaginate": false,
"sScrollY": "200",
"bScrollCollapse": false,
"sAjaxSource": "arrays.txt",
"aoColumns": [
{ "sTitle": "Name",
"mData": "name" }
]
});

$('#table_id tr').click( function() {
$(this).toggleClass('row_selected');
} );

} );[/code]

The list is displayed correctly, but i've the following error message with FireFox : 'Not well formed'. My problem is the click function is no more working. When i include the data with an array directly in the dataTable function, i don't have this problem, and the click function is working. Any help would be highly appreciated.

allan

Can you please link to a test case, or a DataTables debugger trace, as noting in the forum rules.

Allan

egofree

I spent more time working on this and I think the problem is related to the 'Same-origin policy' ( c.f http://en.wikipedia.org/wiki/Same-origin_policy ). If you download DataTables and try to run the 'Ajax source' example locally, without any web server, you've this error message with FireFox, but if you try the example on your web site (http://datatables.net/release-datatables/examples/data_sources/ajax.html), the error message disappears.

allan

Correct - using file:/// with Ajax will be blocked in most modern browsers for security reasons. That's not something DataTables can workaround as it is part of the browser. Use a web-server and it will be resolved :-)

Allan

egofree

I want to add that the click event problem was not related to the security issue.
When i link the click event to a table row, the table is not fully loaded and ready. At first, i didn't have this problem because the data were hard coded in the html.
There is several solutions, but i think the use of delegated events is elegant :

[code]
$("#table_id tbody").on( "click", "tr", function() {
$(this).toggleClass('row_selected');
} );
[/code]

I found the solution on this page : http://api.jquery.com/on/