verschachtelte Formen (Design-Frage)

Question

Ich habe eine Liste von Elementen auf meiner Seite angezeigt.

1. Artikel A [Bearbeiten]
2. Artikel B [Bearbeiten]
3. Artikel C [Bearbeiten]

Jedes Element bearbeitet werden kann, wenn Sie auf einem Bearbeitungssymbol klicken. Das Bearbeitungsformular wird mit einem Ajax-Aufruf angezeigt und der Controller gibt ein Formular zurück.

1. Edit-Formular für Artikel A [Speichern]
2. Artikel B [Bearbeiten]
3. Artikel C [Bearbeiten]

Aber die Liste ist bulk editierbar und so jedes Element hat auch eine Kontrollkästchen daneben.

1. [cb] Artikel A [Bearbeiten]
2. [cb] Artikel B [Bearbeiten]
3. [cb] Artikel C [Bearbeiten]

Und eine Form ist um die Liste.

form_tag 1. [cb] Artikel A [Bearbeiten] 2. [cb] Artikel B [Bearbeiten] 3. [cb] Artikel C [Bearbeiten] Aktion: Aktion auswählen [Bulk-Edit] Ende

Also, wenn ich auf einen Artikel Bearbeitungsschaltfläche klicke, da ein Formular zurückgegeben wird, habe ich 2 Formulare verschachtelt. Und alle Codepausen.

Was kann ich tun? Ich habe nicht das Bulk-Edit-Formular um alle Elemente und endet mit 2 verschachtelten Formularen?

Danke, Mickael.

Answer 1

Ich löste mein Problem mit Javascript. Beim Laden des Bearbeitungsformulars sendet der Übergabeknopf das Formular nicht, sondern ruft eine Ajax-Anforderung auf, die die Formularparameter an die richtige URL sendet.

Answer 2

Sie können keine verschachtelten Formulare haben ... In der Tat, wenn Sie versuchen, zu validieren, werden Sie einen großen und hässlichen HTML-Fehler haben.

Die Lösung für Ihr Problem Ich denke, das ist Folgendes: Wenn Sie die Ajax-Anfrage machen und Sie das Bearbeitungsformular zurückgeben, können Sie den Code am Ende Ihres HTML-Codes injizieren und in einem modalen Fenster anzeigen (ich tat dies an einem Projekt vor einigen Monaten).

aber ich weiß nicht, wie RoR funktioniert so ist es nur eine Idee: P

Answer 3

Sie könnten wahrscheinlich es durch die Macht des CSS lösen und es so erscheinen lassen, obwohl die Formen verschachtelt sind ... obwohl in Tatsache ist, sie sind es nicht.

Von meiner begrenzten CSS-Kenntnisse ist diese Frage am besten einem Front-End-Ingenieur oder Google überlassen.

Answer 4

Sie können die ausgewählten Zeilen markieren und ein "click" -Ereignis an sie binden, damit Sie die Zeilen als ausgewählt/nicht ausgewählt markieren können. Wenn Sie dann auf Senden klicken, reichen Sie einfach die Zeilen mit der Klasse "Hilight" ein.

Sie können das Kontrollkästchen und machen die Struktur so etwas wie dieses wegzulassen: ... ... ..etc

Dann mit jquery Sie binden Ereignis auf sie klicken konnte, wie:

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