Inline editor doesn't close on keyup

Inline editor doesn't close on keyup

cha59cha59 Posts: 87Questions: 23Answers: 0
edited January 2020 in DataTables

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

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • cha59cha59 Posts: 87Questions: 23Answers: 0
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • cha59cha59 Posts: 87Questions: 23Answers: 0

    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

  • cha59cha59 Posts: 87Questions: 23Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Answer ✓

    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

  • cha59cha59 Posts: 87Questions: 23Answers: 0

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

This discussion has been closed.