nested forms (design question)

Question

Hi,

I have a list of items displayed on my page.

1. Item A [Edit]
2. Item B [Edit]
3. Item C [Edit]

Each item is editable When you click on a edit icon. The edit form is displayed with a ajax call and the controller return a form.

1. Edit form for Item A [Save]
2. Item B [Edit]
3. Item C [Edit]

But all the list is bulk editable and so each item has also a checkbox next to it.

1. [cb] Item A [Edit]
2. [cb] Item B [Edit]
3. [cb] Item C [Edit]

And a form is around the list.

form_tag 1. [cb] Item A [Edit] 2. [cb] Item B [Edit] 3. [cb] Item C [Edit] Action: select action [Bulk Edit] end

So when I click on a item edit button, since a form is returned, I have 2 forms nested. And all the code breaks.

What can I do so I don't have the bulk edit form around all the items and end with 2 nested forms ?

Thanks, Mickael.

Answer 1

You can't have nested forms... In fact, if you try to validate, you will have a big and ugly html error.

The solution on your problem I think is this: when you make the ajax request and you return the edit form, you can inject the code at the end of your html and display it into a modal window (i did this way on a project few months ago).

However, i don't know how RoR works so it's just an idea :P

Answer 2

You could probably solve it by the power of CSS and make it appear as though the forms are nested ... though in actual fact, they aren't.

From my limited CSS knowledge that is question best left to a front end engineer, or Google.

Answer 3

You could highlight the rows that are selected and bind "click" event on them so you could toggle the rows as selected / not selected. Then when submit is clicked, you just submit the rows with class "hilight".

You could leave off the checkbox and make the structure something like this: ... ... ..etc

Then with jquery you could bind click event on them, like:

$('.checked').click(function(e) {
    $(this).toggleClass('hilight');
});

Answer 4

I solved my problem using javascript. When loading the edit form, the submit button does not submit the form but calls a Ajax Request sending the form parameters to the right URL.