вложенные формы (вопрос дизайна)

Question

У меня есть список элементов, отображаемых на моей странице.

1. Элемент A [Изменить]
2. Элемент B [Изменить]
3. Элемент C [Изменить]

Каждый элемент является редактируемым, когда вы нажимаете на иконку редактирования. Форма редактирования отображается с помощью вызова ajax, и контроллер возвращает форму.

1. Редактировать форму для элемента A [Сохранить]
2. Элемент B [Изменить]
3. Элемент C [Изменить]

Но весь список можно редактировать, поэтому рядом с каждым элементом также есть флажок.

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

И форма вокруг списка.

form_tag 1. [cb] Пункт A [Изменить] 2. [cb] Пункт B [Редактировать] 3. [cb] Пункт C [Изменить] Действие: выберите действие [Массовое редактирование] конец

Поэтому, когда я нажимаю кнопку редактирования элемента, так как форма возвращается, у меня есть 2 вложенные формы. И весь код ломается.

Что я могу сделать, чтобы у меня не было формы массового редактирования для всех элементов и заканчиваться 2-мя вложенными формами?

Спасибо, Микаэль.

Answer 1

Я решил свою проблему с помощью JavaScript. При загрузке формы редактирования кнопка отправки не отправляет форму, а вызывает Ajax-запрос, отправляющий параметры формы на правильный URL-адрес.

Answer 2

Вы, вероятно, могли бы решить это с помощью CSS и сделать так, чтобы формы были вложенными ... хотя на самом деле это не так.

Из моих ограниченных знаний CSS, этот вопрос лучше оставить инженеру внешнего интерфейса или Google.

Answer 3

Вы можете выделить выделенные строки и привязать к ним событие «щелчка», чтобы можно было переключать строки как выбранные / не выбранные. Затем при нажатии кнопки submit вы просто отправляете строки с классом "hilight".

Вы можете снять флажок и сделать структуру примерно такой: ... ... ..etc

Тогда с помощью jquery вы можете привязать событие клика к ним, например:

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

Answer 4

Вы не можете иметь вложенные формы ... На самом деле, если вы попытаетесь проверить, у вас будет большая и ужасная ошибка HTML.

Решение вашей проблемы, я думаю, заключается в следующем: когда вы делаете запрос ajax и возвращаете форму редактирования, вы можете вставить код в конец вашего HTML-файла и отобразить его в модальном окне (я сделал это таким образом на проект несколько месяцев назад).

Однако я не знаю, как работает RoR, так что это просто идея: P