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?
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
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();
