submitting fields in a table row


I have a table with each row containing some data and the last column being a button called "Edit".

You click "Edit" and the whole row becomes editable (through AJAX and rjs) with form elements replacing each previously uneditable element and the last column becoming a button saying "Update".

The pressing of the button and the row "coming alive" with form fields works fine but how do I submit all those fields after I press "Update"?

The update button is in its own cell with form_remote_tag around it, but all the other elements are outside the form. I guess I could run some javascript function to get the value of each element, serialize the result and use the :with key, but is there a better, more standard way?

Suggestions are welcome!

Thanks,   Surge

The way I have done this sort of thing is to put the form_remote around the whole table.

Then each row has an edit link which does an ajax call to open '_row_active.rhtml

I keep track of the open row id in the session and clear it on update. I can then check the session before allowing a new row to be opened. If one is already open, I send a polite response to say please save the current row first.

Certainly firefox does not mind this - I havnt tried it with other browsers.

In other simpler cases, I have replaced the row with a single td cell, spanning the full width and then build the whole form inside the single cell.


Thanks for the response. I like your approach. But how do you pass the id of the element represented in a row in the AJAX call? form_tag_remote hardcodes the controller/action at the time the page is generated. So it would have something like

onSubmit="new Ajax.Request('PATH_TO_CONTROLLER_ACTION', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)});return false;"

and the PATH_TO_CONTROLLER_ACTION part is the problem because it has the id of the object we're working with. So how did you work around that problem?

What I ended up doing is having a button in each row that links to a javascript function, which collects all active elements (even though they are not inside any form) and then makes the ajax call. The only parameter for the function is the id of the object. Here's the function:

    function ajax_update(id) {       var selects = $A($$('select'));       var inputs = $A($$('input'));       var allControls = selects.concat(inputs);       var hash = $H();

      allControls.each(         function(control) {           hash.set(, $F(control))         }       )

      hash.set('authenticity_token', '<%= form_authenticity_token %>');

      new Ajax.Request('/tickets/' + id,         {             asynchronous:true,             method:'put',             parameters:hash.toQueryString()         }       )     }

Thanks for your reply!