Jeditable edit multiple fields at once with single submit button

Question

I've so far been able to accomplish what's shown in this jsfiddle:

http://jsfiddle.net/Sk8erPeter/qjrJX/

I want there to only be a single submit button for the entire row to submit all values, whether they've been edited or not, and a single cancel button for the entire row as well.

For the sake of simplicity, let's assume my code is the exact same as the jsfiddle listed above. Once I know how to accomplish it, I can modify my own code accordingly.

$(document).ready(function () {
$(".charcounter").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
    indicator: "<img src='http://www.appelsiini.net/projects/jeditable/img/indicator.gif'>",
    type: "charcounter",
    submit: 'OK',
    tooltip: "Click to edit...",
    onblur: "ignore",
    charcounter: {
        characters: 60
    },
    event:'dblclick'
});

$('.edit_all_btns').click(function () {
    $(this).parent().siblings("td").find('.edit').dblclick();
});

});

Answer 1

I was having a equivalent issue. This is what I did, Page Load I set a value var EnableSubmit = False; On any Edit I set EnableSubmit = True, and Made a "Submit" button visible.

.makeEditable({
                    oEditableSettings:{event:'click'},
                    sUpdateURL:function(value,settings){
                        var RowID = oTable.fnGetPosition(this)[0];
                        var ColID = oTable.fnGetPosition(this)[2];
                        var sColumnTitle = oTable.fnSettings().aoColumns[ColID].sTitle;
                        return(UpdateCellData(RowID,sColumnTitle,value));
                    },
                    aoColumns:[
                        null,   
                        null,   
                        null,   
                        {placeholder: ' ',cancel :'Cancel', submit:'OK',},   // Part Number (Allow Editing)
                        null,   // Quanity 
                        null,   // UOM
                        null,   //  Date
                        {placeholder: ' ', cancel :'Cancel',  submit:'OK',},   
                        {placeholder: ' ',cancel :'Cancel', submit:'OK',}, 
                        null    // Line Total
                        ]
                });



            function UpdateCellData(RowId,ColumnName,NewValue)
        {
            if(ColumnName!="")
            {
                var AutoChangeCheck = false;
                switch(ColumnName)
                {
                    case "Number":
                        AutoChangeCheck = true;
                        TableData.Info.Items[RowId].Number = NewValue;
                        break;
                    case "Date":
                        AutoChangeCheck = true;
                        TableData.Info.Items[RowId].DateInput = new Date(NewValue).toDateString();
                        break;
                    case "Price":
                        AutoChangeCheck = true;
                        TableData.Info.Items[RowId].Price = NewValue;
                        break;
                }
            }
            if(AutoChangeCheck)
            {
                // If Change is Valid show Change Request Button.
                var elem = document.getElementById('Request_Change');
                $(elem).show();
            }
            UpdateDataTable();
            return NewValue;
        }

This allows them to make all the changes to the whole table (and expanded tables if needed)

After they're all done, the button "Request_Change" is now visible. And on Click I call

            function SendChageRequest()
        {
            // Send Change Request Query
            var elem = document.getElementById('Request_Change');
            $(elem).hide(); // Hide after Change Request Submitted so they don't double click.
                //console.log("Send Without Files");
                NameSpace.Content.ServerCalls.PushRequest(TableData.Info,OnCompleateChageRequest,OnError)
        }