jQuery jEditables submitting on Tab

Question

I'm creating an inline editable table using jQuery and the editable plug-in.

It works well so far but will only submit and save to the database upon pressing ENTER. I found a thread on here which helped me to tab between boxes but it doesn't submit the data when TAB is pressed.

My code that allows me to switch between boxes is as follows:

$('.editScheduleRow').bind('keydown', function(evt) {

    if (evt.keyCode==9) {

        var nextBox='';
        var currentBoxIndex=$(".editScheduleRow").index(this);

        if (currentBoxIndex == ($(".editScheduleRow").length-1)) {
            nextBox=$(".editScheduleRow:first");         //last box, go to first
        } else {
            nextBox=$(".editScheduleRow").eq(currentBoxIndex+1);    //Next box in line
        }

        $(this).find("input").blur();
        $(nextBox).click();  //Go to assigned next box

        return false;           //Suppress normal tab

    };

});

To submit using ENTER I use this:

$(".editScheduleRow").editable("../../includes/ajax/save-schedule-row.php", {

    "submitdata": function ( value, settings ) {
        return { fieldname: this.getAttribute('fieldname'), rowID: this.getAttribute('id') };

    },

});

I also found a thread with a suggestion but it didn't work for me: jEditable submit on TAB as well as ENTER

Please let me know if you need any more information.

Answer 1

My original answer was based on reading the documentation of jQuery Editable, which is a jQuery extension that is similarly named, but not the same as jEditable from the question. Let's try again with the correct library.

The problem is that you are moving the focus away from the input box when pressing tab, but when the focus is moved away from it, it doesn't save the contents. To illustrate this, try this: click one of the fields and edit it, then click elsewhere on the document. You'll see that the value in the table - and this is what you where simulating using the blur() jQuery function on the element.

There are (again) two ways to solve this problem. First, we can modify what the program does when a field loses focus:

    [..]
    "submitdata": function ( value, settings ) {
        return { fieldname: this.getAttribute('fieldname'), rowID: this.getAttribute('id') 
    };
    "onblur": "submit";
},
[..]

This has the effect that when doing the experiment I described above to help you understand why it wasn't working, you'll now also see that it gets saved. This may not be what you want. In that case, you can instead make sure that you trigger a submit instead of a blur:

replace this line:

    $(this).find("input").blur();

by this one:

    $(this).find("form").submit();

Now the experiment will no longer cause the value to be changed, but it's no longer an accurate simulation of what we're doing and when pressing tab the value will be changed.