After edit with jeditable, row no longer shows in search.

flashfog

I just started using DataTables as a replacement for another grid plugin and it's totally amazing! I will definitely be making a donation asap. Thanks for this great tool!

I have implemented a basic table with the DOM as a source, and jeditable for inline editing. However when I edit an item, that row no longer shows up as a result for searches until the page is refreshed.

Another small issue, the first row is never shown as a search result for some reason.
Here is my code:
[code]
$(document).ready(function() {



$('#partstable tr').click( function() {

if ( $(this).hasClass('row_selected') )
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
} );



var oTable = $('#partstable').dataTable( {
"bJQueryUI": true,

"oLanguage": {
"sSearch": "Search all columns:"
},
"fnDrawCallback": function () {
$('.editable').editable('ajax-edit-part-inline.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );

},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );

}
} );


$('.editable').editable('ajax-edit-part-inline.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );


$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );



/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
[/code]

Any ideas what I've done wrong? Thanks again!

flashfog

Anyone?

allan

It looks like you are initialising jEditable twice - is that intentional? I'm wondering if performing the same actions twice might be confusing it a bit?

Allan

flashfog

Well I've been playing with it some more, and when I call fnUpdate in an external function (an update dialog), everything works correctly. But when I use it within the callback for the jeditable function, it causes the row to disappear if there is any search filtering on the column that was just updated. The data updates correctly to the database and table, and the row still displays properly for searches on other columns. Searching for either the old or new value of the just edited column doesn't show the row though. When I refresh the page or reload the ajax source it then displays fine. Is there a way to force it to do another rebuild of the search index or something? Really confused about why its not working properly..
[code]
$(document).ready(function() {

// CODE FOR SELECTION

$('#partstable tr').click( function() {

if ( $(this).hasClass('row_selected') )
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
} );

// CODE FOR INIT

oTable = $('#partstable').dataTable( {
"aoColumns": [
{ "bSearchable": false,
"bVisible": false },
null, null, null, null, null, null, null, null, null, null, null, null
],
"bJQueryUI": true,
"bProcessing": true,
'sAjaxSource': 'ajax-getpartstable.php',
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {

var id = aData[0];
var ref = aData[1];

$(nRow).children(':nth-child(1)').addClass("editable").attr("id", "ref");
$(nRow).children(':nth-child(2)').addClass("editable").attr("id", "extref");
$(nRow).children(':nth-child(3)').addClass("edit_area").attr("id", "descr");
$(nRow).children(':nth-child(4)').addClass("editable").attr("id", "shelf");
$(nRow).children(':nth-child(5)').addClass("editable").attr("id", "supplier");
$(nRow).children(':nth-child(6)').addClass("edit_area").attr("id", "usedin");
$(nRow).children(':nth-child(7)').addClass("edit_area").attr("id", "notes");
$(nRow).children(':nth-child(8)').attr("id", "last_updated");
$(nRow).children(':nth-child(9)').addClass("editable").attr("id", "rolevel");
$(nRow).children(':nth-child(10)').addClass("editable").attr("id", "q_inunit");
$(nRow).children(':nth-child(11)').addClass("editable").attr("id", "qty");
$(nRow).children(':nth-child(12)').addClass("thickbox").html('');

$(nRow).attr("id", id);
return nRow;
},
"fnDrawCallback": function () {

// CODE FOR IMAGE THICKBOX
$('.thickbox').click(function() {
var id = $(this).parent().parent().attr("id");
var randomnumber=Math.floor(Math.random()*11);
callBoxFancy("partpic.php?id=" + id + "&r=" + randomnumber);
});

// CODE FOR EDITABLE INLINES
$('.editable').editable('ajax-edit-part-inline.php', {
event : "dblclick",
"callback": function( sValue, y ) {

$("#partstable tr").removeClass("just_edited");
$(this).parent().addClass("just_edited");
var aPos = oTable.fnGetPosition( this );
var update = oTable.fnUpdate( sValue, aPos[0], aPos[2]);
// update equals 0 on execution

},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );

//CODE FOR RIGHT CLICK MENU
$("#partstable tr").contextMenu({ menu: 'partsMenu', leftButton: false}, function(action, el, pos) { part_contextMenuWork(action, el, pos); });

}
} );
$(".floating_filters input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $(".floating_filters input").index(this)+1 );

} );

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$(".floating_filters input").each( function (i) {

asInitVals[i] = this.value;
} );

$(".floating_filters input").focus( function () {

if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$(".floating_filters input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$(".floating_filters input").index(this)];
}
} );
[/code]

allan

Firstly I'd recommend removing all the code that isn't needed for debugging this - simplify the code and make life easier. Narrow it down to just the code that causes the problem. Next I'd suggest checking what the various values are in the fnDrawCallback function, and the jEditable handler. For example is 'this' a TD? What are the position values - are they sensible etc. Then if you can put up a link to an example showing the problem that would be very useful.

Allan

flashfog

Solved the issue. Had a carriage return being added onto the end of sValue because of an extra line in a file. Thanks for your help.

lucasnp

Allan,

I hit into a similar issue. After edit content of a cell, the 'select' filter is not updated. still have the old value.
Below is how I initiate the table. I use 'thead td' to put the filter on top, below the header cells ('th').

[code]
//Initiate table
oTable = $('#t_demurrage').dataTable({
"bAutoWidth": false,
"bJQueryUI": true,
"iDisplayLength": 100,
"sPaginationType": "full_numbers"
});

//Filter
$('thead td', oTable).each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
});
});
[/code]

I tried to run the filter at the callback of jeditable but it doesn't work properly if I filter before I edit.

Please help :(