Discussion :

[flavors]

Bonjour.
J'ai un formulaire et j'aimerai qu'une partie de ce formulaire puisse être dupliquée autant de fois que l'on veux lors de l'appuie sur un bouton.
Pour l'instant j'ai procédé en faisant un clone de la partie originale en remplaçant les id des div et inputs en les incrementant. Mais je me demande si c'est la meilleure façon de procéder.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--==== FORM ASSEMBLAGE ORIGINALE ====-->
	<div id="assemblage0" class="newAssemblage">
		<!--Affichage des erreurs-->
		<div class="error" id="error_Assemblage0">
			<span id="error_Assemblage0_num">  </span>
			<span id="error_Assemblage0_number">  </span>
		</div> 
		<p>
			<label>N° de lassemblage :</label> 
			<input type="text" class="Assemblage0_num" name="numAssemblage[]" value="" onblur="verifNum(this)"/>
			<input type="text" class="Assemblage0_number" name="enrInitial[]" value="" onblur="verifNumbers(this)"/>
		</p>
		<p>
 
	</div>
<!--==== FORM CLONES ASSEMBLAGES ====-->
//Lors du clic sur le bonton pour ajouter, les clones apparaissent ici.

Je clone comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript" >
var idAss=1;
 
//fonction que j'appelle lors de l'appuie sur le bouton
function addAss() {
        var $clone = $('#assemblage0').clone(true);
	$clone.attr("id","assemblage"+idAss);
 
        $clone.find('#error_Assemblage0').attr("id","error_Assemblage"+idAss);
        $clone.find('#error_Assemblage0_num').attr("id","error_Assemblage"+idAss+"_num");
        $clone.find('#error_Assemblage0_number').attr("id","error_Assemblage"+idAss+"_number");
 
         $clone.find('.Assemblage0_num').attr("class","Assemblage"+idAss+"_num");
         $clone.find('.Assemblage0_number').attr("class","Assemblage"+idAss+"_number");
 
        // On vide les erreurs et l'input cloné dans le cas où il y a une une erreur.
	$clone.find("span").text(""); // on vide les spans d'erreur
	$clone.find("input[type='text']").val(""); // on vide l'input
        $clone.find("input[type='text']").css( "backgroundColor", "" ); //on remet sa couleur de base à l'input
 
	$clone.appendTo($("#assemblages"));
	$clone.prepend('<button type="button" class="btnRemoveField"> - </button>');
        idAss++;
        }
</script>

Pour ne pas que ce soit trop long j'ai raccourcie le code. Normalement il y a plus de span pour les erreurs et plus d'inputs.
Je trouve ça assez fastidieux de devoir changer tous les id et class casiment un à un mais je pense que c'est plus court que de tout refaire à partir de 0.
Mais est-ce que je peux continuer à procéder comme cela ou faut-il mieux créer mes input et mon affichage des erreur à partir de rien?

Merci.

[ABCIWEB]

Salut,

T'as pas pris le problème par le bon bout. Quand on veut cloner / dupliquer du html le plus efficace est de faire en sorte que celui-ci ne contienne pas d'id. C'est plutôt sur le travail de construire un html fonctionnel sans id qu'il faut d'abord se concentrer, ensuite tout le reste se fera "tout seul".

Il faut toujours construire un formulaire en fonction du traitement qui lui sera appliqué, côté client ou côté serveur. C'est le même principe que le vieux proverbe "comme on fait son lit on se couche"

[flavors]

Merci de votre réponse.
Donc si j'ai bien compris, je pars d'un formulaire vierge de tout id (et de classe ?) que je clone et au quel j'attribue les id que sur les clones au lieu de les changer?

[ABCIWEB]

Nan, c'est pas ce que j'ai voulu dire. Tu n'utilises pas d'id du tout. A moins qu'ils ne soient absolument indispensables mais c'est très rarement le cas, et dans ton cas en quoi le seraient-ils ?

En plus tu utilises jquery qui permet d'avoir au minimum trois milliards de possibilités (ou à peine moins) pour cibler facilement des éléments html autrement qu'en utilisant des id, alors profite. Fais un code et un formulaire qui fonctionne sans id, ou tout au moins sans id dans la partie que tu dois cloner

[danielhagnoul]

Réaliser un clone complet et le mettre en place : plugin dvjhClone.

[flavors]

Merci pour vos réponses.
En fait j'utilisais les ids car j'ai un JS qui fait un 1er traitement du formulaire. Il est composé de plusieurs fonctions qui traitent chacune un type de donnée (un nombre, un pourcentage, un nom, ...).
La fonction en cas d'erreur met une couleur de fond rouge sur l'input concerné et met le message d'erreur correspondant dans le champ prévue pour cela (<span id="error_Assemblage0_number"> </span> dans le case d'un nombre par ex).
C'est pour cela que j'avais mis des id et des classes, pour facilement retrouver le span associé à l'input concerné. Je faisais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
//en cas d'erreur dans une des fonction je fais
document.getElementById(idResult).innerHTML = 'Le champs doit uniquement comporter des lettres et des chiffres.<br/>';
 
//champ correspond a l'input qui vient d'être remplie
function getIdErreur(champ) {
	var classe = $(champ).attr('class');
	var result = "error_"+classe;
	return result;
	}

[flavors]

@danielhagnoul
Je viens de regarder votre plugin.
Si j'ai bien compris, dans mon cas je devrai faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 $("#assemblage0").dvjhClone({ // Je clone mon div ayant pour id assemblage0
       cloneMethod: 0, // je place le clone à la suite de l'original
       clonePivot: "assemblage1" // Je change l'id du clone par assemblage1
       });

C'est bien cela?

[danielhagnoul]

Presque :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$( '#assemblage0' ).dvjhClone({
  "cloneMethod" : 0
});

Exemple, après clonage :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form>
  <div id="assemblage0" class="newAssemblage" data-dvjh-clone-id="dvjhClone1445943384779">
    <div class="error" id="error_Assemblage0">
      <span id="error_Assemblage0_num">  </span>
      <span id="error_Assemblage0_number">  </span>
    </div> 
    <p>
      <label>N° de lassemblage :</label> 
      <input type="text" class="Assemblage0_num" name="numAssemblage[]" value="" onblur="verifNum(this)">
      <input type="text" class="Assemblage0_number" name="enrInitial[]" value="" onblur="verifNumbers(this)">
    </p>
  </div>
  <div id="dvjhClone1445943384779" class="newAssemblage">
    <div class="error" id="dvjhClone14459433847790">
      <span id="dvjhClone14459433847791">  </span>
      <span id="dvjhClone14459433847792">  </span>
    </div> 
    <p>
      <label>N° de lassemblage :</label> 
      <input type="text" class="Assemblage0_num" name="numAssemblage[]" value="" onblur="verifNum(this)">
      <input type="text" class="Assemblage0_number" name="enrInitial[]" value="" onblur="verifNumbers(this)">
    </p>
  </div>
</form>

[flavors]

Ok dans ce cas, il ne me reste plus qu'à modifier certains attributs et au moins je suis sûr de ne pas avoir de doublon.
Merci.

[ABCIWEB]

Merci pour vos réponses.
En fait j'utilisais les ids car j'ai un JS qui fait un 1er traitement du formulaire. Il est composé de plusieurs fonctions qui traitent chacune un type de donnée (un nombre, un pourcentage, un nom, ...).
La fonction en cas d'erreur met une couleur de fond rouge sur l'input concerné et met le message d'erreur correspondant dans le champ prévue pour cela (<span id="error_Assemblage0_number"> </span> dans le case d'un nombre par ex).
C'est pour cela que j'avais mis des id et des classes, pour facilement retrouver le span associé à l'input concerné. Je faisais :

Oui mais tu aurais tout aussi bien pu cibler ces span autrement qu'un utilisant des id.

Il faut éviter au maximum d'utiliser des id dans du code qui sera ajouté dynamiquement à la page en cours. D'une part tu constate que cela va poser des problèmes si on veut faire du clonage, et puis cela peut générer des conflits avec d'autres codes actuels ou futurs. En plus le code sera finalement plus compliqué.

Donc faut éviter de se laisser emporter par la facilité d'utilisation des sélecteurs utilisant des identifiants uniques. Dès que l'on doit monter un peu en puissance on va souvent payer très cher le petit gain initial qui finalement n'était pas très important

[danielhagnoul]

Il faut éviter au maximum d'utiliser des id dans du code qui sera ajouté dynamiquement à la page en cours. D'une part tu constate que cela va poser des problèmes si on veut faire du clonage, et puis cela peut générer des conflits avec d'autres codes actuels ou futurs. En plus le code sera finalement plus compliqué.

Je suis entièrement de ton avis, l'abus d'ID nuit gravement à la simplicité du code.

[flavors]

J'en prends note.
Merci pour le conseil.