Utiliser jQuery pour charger un formulaire Rails dans une table

Question

C'est quelque chose qui a tué mon projet depuis quelques jours maintenant.
J'ai une table de valeurs standard; avec un squelette quelque chose comme ceci:

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

Je suis en train de charger un Rails inline 3 forment dans le tbody en utilisant jQuery pour permettre à l'utilisateur d'ajouter de nouvelles valeurs à la table. Ceci est fait avec un bouton qui obtient la nouvelle action de mon contrôleur, qui à son tour appelle new.js.erb, qui ajoute simplement le partiel rendu du formulaire dans la table ($("table tbody").prepend('<%= escape_javascript(render 'form') %>');).

La forme elle-même partielle va quelque chose comme ceci:

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

est ici où la confusion commence: dans les navigateurs Webkit et IE cela fonctionne comme prévu! Le résultat HTML ressemble à ceci:

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

Bien sûr, le fait que la forme commence et se termine dans la même cellule, avant que les entrées commencent, devrait soulever un drapeau rouge que quelque chose va mal. Cependant, le formulaire est toujours soumis et fonctionne parfaitement autrement.

Dans Firefox, ce n'est pas le cas. La forme rend quelque chose de plus comme celui-ci (montré est que la substance à l'intérieur de la ligne Prepended car tout le reste est le même):

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

La différence ici est que, contrairement aux navigateurs Webkit/IE, Firefox jette tout dans le form la cellule du tag. En outre, le formulaire ne fonctionne pas du tout - il ne se soumet même pas. Aucune demande n'est envoyée. Maintenant, à la suite de certaines de mes recherches, j'ai appris qu'il y avait probablement une énorme erreur que je fais ici et la différence vient du fait que les navigateurs essaient de rendre ce que j'ai omis de différentes façons. De jouer avec, j'ai compris que cela a peu à voir avec la façon dont les formes de Rails interagissent avec les tables - si vous ne faites que rendre le partial dans un tableau, le HTML est identique entre les navigateurs (la balise se referme avant les autres entrées commencer, cependant, ce qui peut signifier que je mets <% end%> au mauvais endroit!). Quelque chose se passe mal quand je préfixer le partiel rendu en utilisant jQuery: peut-être que le rendu partiel est erroné parce qu'il ne contient pas de balises de table et qu'il est ensuite inséré dans la table, provoquant les problèmes.

Vraiment, j'ai été perplexe. J'ai cherché si loin et bien qu'il y ait quelques questions liées tangentiellement aucun ne semble vraiment frapper mon problème.

Je m'attends à ce que j'ai fait une erreur très simple - mais qu'est-ce que c'est?

Toute aide serait grandement appréciée! J'espère avoir expliqué le problème aussi clairement que possible.

Answer 1

En regardant le partiel, il est assez évident. Vous avez une erreur d'imbrication. Si vous ouvrez une balise de formulaire à l'intérieur d'un élément (dans ce cas, la cellule du tableau), vous devez également la fermer. La validation du balisage aide dans ce genre de cas.

Si vous devez utiliser une table, vous pouvez placer des étiquettes de forme autour de celle-ci et insérer la totalité de la page.