Inline editor doesn't close on keyup

cha59

Hi
I have two input cells in a toolbar to search in two hidden columns 5 and 6 of my datatable. I have inline editing on my rows. After ended inline editting the row blurs. Then I click on my input search field and start writing in this field, but my typing goes into the cell I've just edited. The only way I've found to fix it is to update (F5) and then write in my input field. Filtering works fine from the input field.

The code for filtering is:

<script> 

function filterColumn ( i ) {
            $('#example').DataTable().column( i ).search(//filtrer funktion for lærer og for hold
            $('#col'+ i +'_filter').val()).draw();//er en id reference, der skifter med i, col5_filter og col6_filter bruges. Er id på input cellerne for henholdsvis lærer og hold
            }

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {.........

The html and keyup functions for searcing in the two hidden columns is inside a initComplete:

var table = $('#example').DataTable( { // DataTable styrer hvordan tabel ser ud. Modsat ready( Editor), der styrer edit og new
    
    fnInitComplete: function(){
            $('div.toolbar').html('<tr><td> Lærer: </td><td align="center"><input type="text" class="column_filter" id="col5_filter"></td><td> Hold: </td><td align="center"><input type="text" class="column_filter" id="col6_filter"></td></tr>');//toolbar
            $('input.column_filter').on( 'keyup', function () {//filtrer lærer
            filterColumn( 5 );
            } );
            $('input.column_filter').on( 'keyup', function () {//filtrer hold
            filterColumn( 6 );
            } );//input cellerne har samme class: "column_filter", kolonne styres af i
         },
......

Any ideas ?

Claus

colin

Could you link to your page so we can take a look, please, or modify this to demonstrate the issue.

Colin

cha59

Hi Colin
A link https://plearn.it/tb/Editor/examples/cha_html/budget2.html
Claus

colin

Thanks for the link. I just modifed a value in the "Bem." column, then entered a value in the "Søg" filter, and it all behaved as expected. Please can you give steps on how to reproduce.

Colin

cha59

Hi Colin
I'm new to Bin, but I have tried to make a version with toolbar and filtering name and position, but it does not work: http://live.datatables.net/hudiluvi/1/edit

On budget2 try to change the number 4 to 6 in row 1 (Bruxelles tur) and then click on the input field Lærer and write eso. eso will be written in the number cell you just left.
Claus

cha59

Hi Colin again
It's not the Søg filter, that is the problem. It works fine. It is the two new search fields made in the toolbar: Lærer and Hold. The field Lærer filters a not visible column Lærer while Hold filters a not visible column Hold.
Claus

colin

Got it , thanks, I can see it now. We'll take a look and report back.

Colin

allan

Many thanks for the links (and to Colin for explaining how to see the issue to me!). The issue is that KeyTable is not being blurred when clicking on the input elements for the Lærer and Hold filters. To resolve that add the following into initComplete:

$('#col5_filter, #col6_filter').on('focus', function () {
  table.cell.blur();
} );

It works for the Søg input automatically because that is the built in input and we have code to handle that for KeyTable.

Allan

cha59

Thanks a lot Allan!
Saved my day - again!
Claus