jqueryjeditable

Jeditable + keytables clickevent


I use the Plugins keyTables and jeditable for my table.

I can navigate through the grid and activate jeditable with return. but if a activate a cell once I can enable jeditable with just one click on the cell.

Something went wrong.

http://datatables.net/release-datatables/extras/KeyTable/editing.html

This is the demo, works fine.

My Fiddle: http://jsfiddle.net/jGC4J/

This is the demo code and the code I use:

$(document).ready( function () {
var keys = new KeyTable( {
    "table": document.getElementById('example')
} );

/* Apply a return key event to each cell in the table */
keys.event.action( null, null, function (nCell) {
    /* Block KeyTable from performing any events while jEditable is in edit mode */
    keys.block = true;

    /* Initialise the Editable instance for this table */
    $(nCell).editable( function (sVal) {
        /* Submit function (local only) - unblock KeyTable */
        keys.block = false;
        return sVal;
    }, { 
        "onblur": 'submit', 
        "onreset": function(){ 
            /* Unblock KeyTable, but only after this 'esc' key event has finished. Otherwise
             * it will 'esc' KeyTable as well
             */
            setTimeout( function () {keys.block = false;}, 0); 
        }
    } );

    /* Dispatch click event to go into edit mode - Saf 4 needs a timeout... */
    setTimeout( function () { $(nCell).click(); }, 0 );
} );
} );

The code and the plugins are the same. I should only be able to edit a cell with the return event not just with one click.

Any ideas?


Solution

  • Simple..

    adding

     $(nCell).editable('destroy');
    

    to

    /* Apply a return key event to each cell in the table */
                keys.event.action( null, null, function (nCell) {
                    /* Block KeyTable from performing any events while jEditable is in edit mode */
                    keys.block = true;
    
                    /* Initialise the Editable instance for this table */
                    $(nCell).editable( function (sVal) {
                        /* Submit function (local only) - unblock KeyTable */
                        keys.block = false;
                        // INSERT HERE //
                        return sVal;
                    }, { 
                        "onblur": 'submit', 
                        "onreset": function(){ 
                            /* Unblock KeyTable, but only after this 'esc' key event has finished. Otherwise
                             * it will 'esc' KeyTable as well
                             */
                            setTimeout( function () {keys.block = false;}, 0); 
                        }
                    } );
    
                    /* Dispatch click event to go into edit mode - Saf 4 needs a timeout... */
                    setTimeout( function () { $(nCell).click(); }, 0 );
                } );
    

    will make it work.