jQuery clone() FireFox bug - impossible de soumettre un formulaire cloné

Question

Je souhaite ajouter/supprimer dynamiquement des formulaires. J'utilise des formulaires qui sont stockés dans une table, chaque ligne a une forme. J'ai 2 tables: - celui qui est affiché - celui entouré par la ligne temporaire que je veux cloner et insérer dans la table affichée.

Tout fonctionne correctement dans IE mais la ligne clonée avec sa forme dans Firefox ne peut pas être soumise. Si je ne clone pas la ligne mais l'insère simplement, je peux soumettre le formulaire mais je dois pouvoir réutiliser cette rangée pour l'insérer de nouveau ainsi j'ai besoin d'employer le clonage. Le code html généré avec et sans clonage est le même dans Firebug. Comment puis-je surmonter ce problème?

Code utilisé pour le clonage et l'insertion de la ligne: $('#tempRow').clone().insertAfter($('#templatesTable tr:last'));

Answer 1

Vous ne pouvez pas cloner de manière fiable quelque chose avec un attribut ID et re-insérer dans le DOM. Cela crée un document HTML non valide, car vous avez deux éléments avec le même ID. Firefox se comporte correctement. Ce que vous aurez à faire est de cloner le formulaire et de changer TOUS les ID en quelque chose d'unique (le formulaire et toutes ses entrées et éléments enfants). Ensuite, vous serez en mesure de soumettre le formulaire.

Il semble que vous clonez un élément tr et l'insérez dans un tableau? Si l'élément tr est le seul à avoir une carte d'identité, cela fonctionne:

$('#tempRow') 
    .clone() 
    .attr('id', 'tempRow-new') 
    .insertAfter($('#templatesTable tr:last')); 

Rappelez-vous, cependant, que si l'élément de forme – ou l'un de enfants, y compris div, frameset, input, etc. – a un identifiant, vous devrez soit supprimer cet identifiant, soit le changer. Sinon, vous aurez toujours un document non valide et vous aurez peut-être encore des problèmes.

De plus

L'extrait de code ci-dessus n'est pas réutilisable. Dès que vous essayez de cloner le formulaire une deuxième fois, vous aurez deux éléments avec l'ID tempRow-new. Si vous devez cloner la ligne plusieurs fois, vous devrez ajouter un numéro incrémenté ou un UUID de sorte que tous les éléments clonés soient uniques.