jQuery 1.8.2, DataTables 1.9.4 and jEditable

Rup

Hi,
I'm having difficulty getting jEditable to work with DataTables 1.9.4

I already have a working table, including ColVi, TableTools, ColumnFilterWidgets. Adding jEditable breaks it :

[code]



@import "{!URLFOR($Resource.DataTables, 'media/css/jquery.dataTables.css')}";
@import "{!URLFOR($Resource.DataTables, 'media/css/DataTablesAdvancedExample.css')}";
@import "{!URLFOR($Resource.DataTables, 'extras/ColVis/media/css/ColVis.css')}";
@import "{!URLFOR($Resource.DataTables, 'extras/TableTools/media/css/TableTools.css')}";
@import "{!URLFOR($Resource.DataTables, 'extras/ColumnFilterWidgets/media/css/ColumnFilterWidgets.css')}";













$(document).ready( function () {

///////////////// TABLE DES COMMANDES ///////////////////////
var oTable = $('#detaillants').dataTable( {
"sDom" : 'WT<"clear">lfrtip'
//"sDom" : 'T<"clear">rt'

,"oTableTools": {
"sSwfPath": "{!URLFOR($Resource.DataTables, 'extras/TableTools/media/swf/copy_csv_xls_pdf.swf')}",
//"sRowSelect": "multi",
"aButtons": [
{
"sExtends": "copy",
"bSelectedOnly": true
}
]
}

,"sPaginationType" : "full_numbers"
,"iDisplayLength" : 25

,"bAutoWidth" : true

// Hide column filters for these columns
,"oColumnFilterWidgets": { "aiExclude": [ 0, 4, 5, 6, 7 ] }


// Center some of the columns
// Display integers without decimals
,"aoColumnDefs": [ {
"sClass": "center",
"aTargets": [ 2, 3, ]
},{
"bUseRendered": false,
"mRender": function ( data, type, row ) {
return parseInt( data, 11 );
},
"aTargets": [ 4, 6 ]
},{ // Column 0 is invisible (Id)
"bVisible" : false,
"aTargets" : [ 0 ]
}

]
,"aaSorting": [[ 2, "asc" ]] // sort on product code by default (multi-warehouse)

,"oLanguage" : {
"sSearch" : "Rechercher:",

"sLengthMenu" : "Afficher _MENU_ enregistrements par page",
"sZeroRecords" : "Aucun enregistrement ne correspond",
"sInfo" : "Enregistrements affichés : n° _START_ à _END_ sur _TOTAL_",
"sInfoEmpty" : "",
"sInfoFiltered": "(filtre actif sur _MAX_ enregistrements)"
}

///////////////// jEDITABLE ///////////////////////
, "fnDrawCallback": function () {
$('td', this.fnGetNodes()).editable( function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return(value);
}, {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
}
, "submitdata": function ( value, settings ) {
return {
"row_id": oTable.fnGetData( this.parentNode )[0]
, "column": oTable.fnGetPosition( this )[2]
};
}
, "height": "14px"
});
}

});


new FixedHeader(oTable);
});








<!-- DETAILLANTS -->



Id
Account Name
Product Line
Business Unit
Qty
Value
Qty
Value







{!item.Id}
{!item.Account__r.Name}
{!item.ProductLine_Name__c}
{!item.BusinessUnit_Name__c}
{!item.Ordered_Quantity__c}
{!item.Net_Order_Value_CustCurr__c}
{!item.Ordered_Quantity__c}
{!item.Net_Order_Value_CustCurr__c}






















[/code]


I've tried everything : Firebug keeps on telling me that $(...).editable is not a function :(

Can you help ?

TIA,
Rup

Rup

(removed)

allan

Hi Rup,

The error you are getting suggests that jEditable isn't being loaded. Is there a reason you are loading it from the DataTables server?

Are you able to give me a link to the page you are working on so I can see what is going wrong?

Thanks,
Allan

Rup

Allan,
Just testing : will it work if I host the file, I was just being lazy.
The page password protected (see my PM a few minutes ago) : how can I help you help me ?

Rup