Editable DataTable plugin - Adding new record

col.brazier

Hi,

My page is here http://www.fobgfc.org/players_edit2.php

I cannot get the 'add record' to work correctly, ie. the add form is displayed instantly.

I think I have followed all the instructions but must have got in a muddle somewhere and I cannot work it out. Any help appreciated.

Hopefully view source will contain all the info you need but I would be pleased to answer any questions.

Thanks in advance,

Col

allan

There are a number of Javascript errors on the page:

[code]
Uncaught ReferenceError: jQuery is not defined
checkform.jsFailed to load resource: the server responded with a status of 404 (Not Found)
jquery.dataTables.editable.js:304Uncaught TypeError: Object [object Object] has no method 'fnSettings'
[/code]

I think that's the starting point. Firstly, you load jEditable before jQuery - since jEditable has a dependency on jQuery, they should be loaded the other way around. And hopefully that will help get it sorted out.

Allan

col.brazier

Hi Allan,

Apologies for the delay - I didn't see your response!

I have changed the order but still get this error...

oTable.fnSettings is not a function
http://www.fobgfc.org/Scripts/jquery.dataTables.editable.js
Line 304

Colin

col.brazier

Progress of a sort...but I am now getting

DataTables warning (table id = 'players'): Cannot reinitialise DataTable.

in my new version http://www.fobgfc.org/players_edit3.php

having changed the initialisation to this:

$(document).ready(function() {
var oTable = $('#players').dataTable().makeEditable({
sUpdateURL: "UpdateData.php",
sAddURL: "add_player.php",
sAddHttpMethod: "GET", //Used only on google.code live example because google.code server do not support POST request
sDeleteURL: "DeleteData.php"
});

$('#players').dataTable( {
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" }
]
});

});

col.brazier

Ah, just switching them around did the trick...now I need to look at the CSS!

$(document).ready(function() {

$('#players').dataTable( {
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" }
]
});

var oTable = $('#players').dataTable().makeEditable({
sUpdateURL: "UpdateData.php",
sAddURL: "add_player.php",
sAddHttpMethod: "GET", //Used only on google.code live example because google.code server do not support POST request
sDeleteURL: "DeleteData.php"
});
});