Jquey + jeditable table row edit multiple fields
I am trying to figure out the way to edit a row of table by button with jquery and jeditable. 
My aim is to have a "edit" button which will change desired row cells to edit mode. 

As per now I have:


    $(document).ready(function() {
        $("#addrowbutton").click(function() {
            $("#addrow").show();
        });
        $("#canceladd").click(function() {
            $("#addrow").hide();
        });
        $("#saveadd").click(function() {
            $("#message").text("Added").fadeOut(4000, function() {
                $(this).css('display','block').text("");
            });
            $("#addrow").hide();
        });
        $("#add_trade_form").submit(function() {
            process_details();
            return false;
        });
        function process_details() { 
            $("#add_trade_form").ajaxSubmit();
            return false;
        }
        $(".editlink").click(function() {
            var datapos = $(this).parent().parent().prevAll().length;
            var editpos = datapos + 1;
            
            $("#trades_table tbody tr:eq(" + datapos + ")").hide();
            $("#trades_table tbody tr:eq(" + editpos + ")").show();
        });
        
        $(".cancellink").click(function() {
            var editpos = $(this).parent().parent().prevAll().length;
            var datapos = editpos - 1;
            
            $("#trades_table tbody tr:eq(" + datapos + ")").show();
            $("#trades_table tbody tr:eq(" + editpos + ")").hide();
        });
        $(".savelink").click(function() { 
            var editpos = $(this).parent().parent().prevAll().length;
            var datapos = editpos - 1;

            $("#message").text("Saved...").fadeOut(4000, function() {
                $(this).css('display','block').text("");
            });
            $("#trades_table tbody tr:eq(" + datapos + ")").show();
            $("#trades_table tbody tr:eq(" + editpos + ")").hide();
        });
        
    });


So:

- adding row appears and hides with a button

- edit row display and cancel as it should with values I want


Where I am lost now:

- how to take the new values from the inputs and pass them to the controller (multiple id, values) ... I use MVC. <= .savelink

- how to save the new row without refreshing the page but refresh the table with the new values <= #saveadd

Many thanks in advance for all the help.

Cheers,

/Jacek


Jquey + jeditable table row edit multiple fields
===

I am trying to figure out the way to edit a row of table by button with jquery and jeditable. 
My aim is to have a "edit" button which will change desired row cells to edit mode. 

As per now I have:


    $(document).ready(function() {
        $("#addrowbutton").click(function() {
            $("#addrow").show();
        });
        $("#canceladd").click(function() {
            $("#addrow").hide();
        });
        $("#saveadd").click(function() {
            $("#message").text("Added").fadeOut(4000, function() {
                $(this).css('display','block').text("");
            });
            $("#addrow").hide();
        });
        $("#add_trade_form").submit(function() {
            process_details();
            return false;
        });
        function process_details() { 
            $("#add_trade_form").ajaxSubmit();
            return false;
        }
        $(".editlink").click(function() {
            var datapos = $(this).parent().parent().prevAll().length;
            var editpos = datapos + 1;
            
            $("#trades_table tbody tr:eq(" + datapos + ")").hide();
            $("#trades_table tbody tr:eq(" + editpos + ")").show();
        });
        
        $(".cancellink").click(function() {
            var editpos = $(this).parent().parent().prevAll().length;
            var datapos = editpos - 1;
            
            $("#trades_table tbody tr:eq(" + datapos + ")").show();
            $("#trades_table tbody tr:eq(" + editpos + ")").hide();
        });
        $(".savelink").click(function() { 
            var editpos = $(this).parent().parent().prevAll().length;
            var datapos = editpos - 1;

            $("#message").text("Saved...").fadeOut(4000, function() {
                $(this).css('display','block').text("");
            });
            $("#trades_table tbody tr:eq(" + datapos + ")").show();
            $("#trades_table tbody tr:eq(" + editpos + ")").hide();
        });
        
    });


So:

- adding row appears and hides with a button

- edit row display and cancel as it should with values I want


Where I am lost now:

- how to take the new values from the inputs and pass them to the controller (multiple id, values) ... I use MVC. <= .savelink

- how to save the new row without refreshing the page but refresh the table with the new values <= #saveadd

Many thanks in advance for all the help.

Cheers,

/Jacek

