Question

i’m a newbie to jquery… i just recently discovered the jquery UI library.
what i have so far is a php web page that contains a table.
each row in the table shows 3 values: an id, a file name, and the contents of the file. thanks to the jquery UI library, i also have an EDIT button that lets the user change the contents of any of the cells. now i would like to somehow automatically save their changes, not just to the cell in the table, but also to the original file.

based on some other posts here on stackoverflow, i think i need to use .$get to call another php page to do the save for me. but i don’t know how to pass the correct data from the table. i would want to pass the file name, which is column 2, and the file contents, column 3. but i don’t know how i would do that.

here’s the jquery code i have so far (based on a sample from the www)

$(document).ready(function() {
    TABLE.formwork('#configs');
});

var TABLE = {};

TABLE.formwork = function(table) {
    var $tables = $(table);

    $tables.each(function() {
        var _table = $(this);
        _table.find('thead tr').append($('<th class="edit">&nbsp;</th>'));
        _table.find('tbody tr').append($('<td class="edit"><input type="button"         value="Edit"/></td>'))
    });

    $tables.find('.edit :button').live('click', function(e) {
        TABLE.editable(this);
        e.preventDefault();
    });
}

TABLE.editable = function(button) {
    var $button = $(button);
    var $row = $button.parents('tbody tr');
    var $cells = $row.children('td').not('.edit');

    if ($row.data('flag')) { // in edit mode, move back to table
        // cell methods
        $cells.each(function() {
            var _cell = $(this);
            _cell.html(_cell.find('input').val());
        })

        $row.data('flag', false);
        $button.val('Edit');
        // i think this is where i need to do something like $.get("savefile.php",  {filename: '', datatosave: ''});
    }
    else { // in table mode, move to edit mode
        // cell methods
        $cells.each(function() {
            var _cell = $(this);
            _cell.data('text', _cell.html()).html('');

            var $input = $('<input type="text" />').val(_cell.data('text')).width(_cell.width() - 16);

            _cell.append($input);
        })

        $row.data('flag', true);
        $button.val('Save');
    }
}​

any help would be appreciated.

Answer 1

Consider the separation of your data and your user interface. The interface (your table) should be a represenation of your data that is stored in variables in your application. When you change the values in the table, you should then update the variables containing that data. When you save, you save the data, not the HTML table.

Your table is just a container that should be populated from your data. JSON is a good structure yo use to represent and store your data:

[
  {  id: "1" , file: "something.txt" , content: "Hello", row: "1", col: "1" },
  {  id: "2" , file: "happyfile.txt" , content: "I am so happy", row: "1", col: "2" }
]

You then take this JSON data, loop through it and fill-in your table.

When you Update the table update the associated JSON value. Save the JSON on the server, not the HTML.