Mit jQuery ein Rails-Formular in eine Tabelle zu laden

Question

Dies ist etwas, das mein Projekt für ein paar Tage tot ist.
Ich habe eine Standardtabelle von Werten; mit einem Skelett so etwas wie dieses:

<table><tbody><tr><td>Stuff!</td></tr></tbody></table> 

Ich versuche, eine Inline-Rails 3 Form in die tbody mit jQuery laden der Benutzer hinzufügen, um neue Werte der Tabelle zu lassen. Dies geschieht mit einer Schaltfläche, die die neue Aktion meines Controllers aufruft, die wiederum new.js.erb aufruft, die einfach das teilweise gerenderte Formular in die Tabelle vorlegt ($("table tbody").prepend('<%= escape_javascript(render 'form') %>');).

Die Form teilweise selbst geht in etwa so:

<tr> 
    <td> 
    <%= form_for @model, :remote => true do |f| %> 
    </td> 
    <td> 
    <%= f.text_field :column %> 
    </td> 
    <td> 
    <%= f.submit "Add" %> 
    <% end %> 
    </td> 
</tr> 

Hier ist, wo die Verwirrung beginnt: in Webkit-Browsern und IE Dies funktioniert wie erwartet! Der resultierende HTML geht ungefähr so:

<table> 
    <tbody> 
    <tr> 
     <td> 
     <form> 
     </form> 
     </td> 
     <td> 
     <input> 
     </td> 
     <td> 
     <input type="submit"> 
     <td> 
    </tr> 
    <tr>The list of values</tr> 
    </tbody> 
</table> 

Natürlich ist die Tatsache, dass die Form beginnt und endet in der gleichen Zelle, bevor die Eingänge beginnen, sollte eine rote Fahne heben, dass etwas nicht in Ordnung ist. Allerdings reicht das Formular noch aus und funktioniert ansonsten einwandfrei.

In Firefox ist dies nicht der Fall. Die Form macht mehr so ​​etwas wie dieses (gezeigt ist nur der Stoff in der vorangestellten Reihe seit alles andere gleich ist):

<td> 
    <form> 
    </form> 
    <td> 
    <input> 
    </td> 
    <td> 
    <input type="submit"> 
    <td> 
</td> 

Der Unterschied hier ist, dass im Gegensatz zu den Webkit/IE-Browser, Firefox alles in die form wirft die Zelle des Tags. Außerdem funktioniert das Formular überhaupt nicht - es reicht nicht einmal ein. Keine Anfragen werden gesendet.

Nun, aus einigen meiner Recherchen habe ich gelernt, dass es wahrscheinlich einen großen Fehler gibt, den ich hier mache und der Unterschied kommt von der Tatsache, dass Browser versuchen, alles, was ich ausgelassen habe, zu rendern. Ich habe herausgefunden, dass dies wenig damit zu tun hat, wie Rails-Formulare mit Tabellen interagieren - wenn Sie nur das Partielle innerhalb einer Tabelle rendern, ist der HTML-Code zwischen den Browsern identisch (das Formular-Tag schließt immer noch vor den anderen Eingaben) beginne aber, was bedeuten kann, dass ich <% end%> an die falsche Stelle setze!). Etwas passiert falsch, wenn ich das gerenderte Partial mit jQuery vorbereite: Vielleicht rät das partielle Rendering falsch, weil es keine umschließenden Tabellen-Tags hat und wird dann in die Tabelle eingefügt, was die Probleme verursacht.

Wirklich, ich bin ratlos gewesen. Ich habe weit und breit danach gesucht, und obwohl es einige tangierend verwandte Fragen gibt, scheinen keine wirklich mein Problem zu treffen.

Ich erwarte, dass ich einen sehr einfachen Fehler gemacht habe - aber was ist es?

Jede Hilfe wäre sehr geschätzt! Ich hoffe, ich habe das Problem so klar wie möglich erklärt.

Answer 1

Mit Blick auf die teilweise ist es ziemlich offensichtlich. Sie haben einen Verschachtelungsfehler. Wenn Sie ein Formular-Tag innerhalb eines Elements (in diesem Fall Tabellenzelle) öffnen, müssen Sie es auch dort schließen. Das Validieren des Markups hilft in dieser Art von Fällen.

Wenn Sie Tabelle verwenden müssen, könnten Sie Formular-Tags um sie legen und das vollständige Ding auf die Seite einfügen.