IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

cloneNode ne conserve pas les Script JS ?


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Juillet 2005
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2005
    Messages : 44
    Points : 24
    Points
    24
    Par défaut cloneNode ne conserve pas les Script JS ?
    Bonjour,

    J'ai une petite fonctionnalité JS qui me permet d'ajouter des lignes à un tableau en utilisant la fonction cloneNode. Cette fonctionnalité gère également l'incrémentation d'id bien spécifiques des lignes du tableau.
    Je me suis aperçu que si je mets du JS dans une balise <SCRIPT> dans une des lignes, et que je clone cette ligne, le contenu de la balise <SCRIPT> de ma nouvelle ligne est vide, càd les "functions" JS, n'ont pas suivi lors du clonage.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    function clone(ligne, idChamps, ligneNum) {
    	if (ligne.parentNode.rows.length < 15) {
    		alert(ligne.innerHTML); // --> le contenu de la balise SCRIPT est bien là
    		var mesScripts = ligne.getElementsByTagName('SCRIPT');
    		for (i=0 ; i<= mesScripts.length-1 ; i++) { 
    			alert(mesScripts[i].innerHTML); // --> cela me donne bien le contenu de mon SCRIPT
    		}		
    		newLigne = ligne.cloneNode(true); // je clone
     
    		alert(newLigne.innerHTML); // ---> le contenu de la balise SCRIPT est désormais vide...
    		etc.
    Est-ce un problème connu de la fonction cloneNode ?

    Je souhaite non seulement appliquer le même <SCRIPT> à ma nouvelle ligne, mais également appliquer au contenu du script la même règle d'incrémentation des id.

    Je mets ma petite page de test en entier. Le code n'est sans doute pas propre du tout, mais ça marche comme je le souhaite, à part pour les balises Script dans les lignes. D'ailleurs je sais qu'il faudra à terme factoriser mes fonctions javascript plutôt que la mettre à chaque ligne, mais les fonctions JS sont plus complexes que celles présentées, et je souhaite pour le moment les conserver dans chacune des lignes.

    Merci beaucoup pour votre lecture, votre temps, et j'espère votre aide !

    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
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Tableau dynamique</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
     
    table { border:thin solid #A2968A; border-collapse:collapse; text-align:center; }
    td { border:thin dotted #A2968A; padding:5px; text-align:center; height: 50px; }
    tr.trSpe { border:thin dotted #A2968A; padding:5px; text-align:center; height: 50px; background-color:#aeaeae; }
    td.tdSpe { border:thin dotted #A2968A; padding:5px; text-align:center; height: 50px; background-color:#aeaeae; }
    div.patience {position:fixed;top:25%;left:50%;font-size:16px;font-weight:bold;color:#000000;width:800px;margin-left:-400px;height:16px;
    		border:2px solid #404040;text-align:center;padding-top:15px;padding-bottom:15px;padding-left:14px;padding-right:14px;background:#fffcd7;}
     
    </style>
    <script type="text/javascript" language="JavaScript">
    function clone(ligne, idChamps, ligneNum) {
    	if (ligne.parentNode.rows.length < 15) {
    		alert(ligne.innerHTML); // --> le contenu de la balise SCRIPT est bien là
    		var mesScripts = ligne.getElementsByTagName('SCRIPT');
    		for (i=0 ; i<= mesScripts.length-1 ; i++) { 
    			alert(mesScripts[i].innerHTML); // --> cela me donne bien le contenu de mon SCRIPT
    		}		
    		newLigne = ligne.cloneNode(true); // je clone
     
    		alert(newLigne.innerHTML); // ---> le contenu de la balise SCRIPT est désormais vide...
     
    		var reg = new RegExp (idChamps+'_'+ligneNum, 'g');
    		var reg2 = new RegExp ('\''+idChamps+'\',\''+ligneNum+'\'', 'g');
    		var nbLignesActuellement = ligne.parentNode.rows.length;
    		var newLigneNum = nbLignesActuellement+1;
    		var tds = newLigne.getElementsByTagName('td');
    		for(i=0; i<tds.length; i++) {
    			tds[i].innerHTML = tds[i].innerHTML.replace(reg, idChamps+'_'+newLigneNum); //on incrémente tous les ids _x_x_x
    			tds[i].innerHTML = tds[i].innerHTML.replace(reg2, '\''+idChamps+'\',\''+newLigneNum+'\''); //on incrémente le ligneNum des boutons Copie et New
    		}
    		alert(newLigne.innerHTML);
    		ligne.parentNode.appendChild(newLigne);
    	}
    	else alert("Pas plus de 15 lignes pour ce champs !");
     
    }
    function cloneEtVide(ligne, idChamps, ligneNum) {
    	if (ligne.parentNode.rows.length < 15) {
    		newLigne = ligne.cloneNode(true);
    		//On vide d'abord les champs, ça fait des remplacements en moins...
    		var mesInput = newLigne.getElementsByTagName('INPUT');
    		var mesTextarea = newLigne.getElementsByTagName('textarea');
    		var mesSelect = newLigne.getElementsByTagName('select');
    		for (i=0 ; i<= mesInput.length-1 ; i++) { if (mesInput[i].type == 'text') mesInput[i].value=""; }
    		for (i=0 ; i<= mesTextarea.length-1 ; i++) { mesTextarea[i].innerHTML = ""; }
    		for (i=0 ; i<= mesSelect.length-1 ; i++) { mesSelect[i].selectedIndex = 0; }
    		//On fait les remplacements
    		var reg = new RegExp (idChamps+'_'+ligneNum, 'g');
    		var reg2 = new RegExp ('\''+idChamps+'\',\''+ligneNum+'\'', 'g');
    		var nbLignesActuellement = ligne.parentNode.rows.length;
    		var newLigneNum = nbLignesActuellement+1;
    		var tds = newLigne.getElementsByTagName('td');
    		for(i=0; i<tds.length; i++) {
    			tds[i].innerHTML = tds[i].innerHTML.replace(reg, idChamps+'_'+newLigneNum); //on incrémente tous les ids _x_x_x
    			tds[i].innerHTML = tds[i].innerHTML.replace(reg2, '\''+idChamps+'\',\''+newLigneNum+'\''); //on incrémente le ligneNum des boutons Copie et New
    		}
    		//On envoie...
    		ligne.parentNode.appendChild(newLigne);
    	}
    	else alert("Pas plus de 15 lignes dans ce tableau !");
    }
    function supprLigne(ligne, idChamps) {
    	if (ligne.parentNode.rows.length >= 2) {
    		document.getElementById('patientez').style.display='';
    		var nbLignesActuellement = ligne.parentNode.rows.length;
    		var ligneNum = ligne.rowIndex+1;
    		ligne.parentNode.removeChild(ligne);
    		var trs = document.getElementById('table1').getElementsByTagName('tr');
    		for (i=ligneNum-1; i<trs.length; i++){
    			var indice = trs[i].rowIndex+2; //le row index commence à 0 *et* il y a une ligne en moins...
    			var newIndice = indice-1;
    			var reg = new RegExp (idChamps+'_'+indice, 'g');
    			//alert("il faut remplacer tous les "+idChamps+'_'+indice+" par "+idChamps+'_'+newIndice);
    			var reg2 = new RegExp ('\''+idChamps+'\',\''+indice+'\'', 'g');
    			//alert('et il faut remplacer tous les \''+idChamps+'\',\''+indice+'\''+' par \''+idChamps+'\',\''+newIndice+'\'');
    			var tds = trs[i].getElementsByTagName('td');
    			for(j=0; j<tds.length; j++) {
    				tds[j].innerHTML = tds[j].innerHTML.replace(reg, idChamps+'_'+newIndice); //on décrémente tous les ids _x_x_x
    				tds[j].innerHTML = tds[j].innerHTML.replace(reg2, '\''+idChamps+'\',\''+newIndice+'\''); //on décrémente le ligneNum des boutons Copie et New
    			}
    		}
    		document.getElementById('patientez').style.display='none';
    	}
    	else alert("Impossible de supprimer la derniere ligne");
    }
    </script>
    </head>
    <body>
     
    <div id="patientez" class="patience" style="display:none;">Veuillez patientez quelques instants</div>
     
    <table id="table1" border="1" cellspacing="0" cellpadding="0">
    <tr class="trSpe">
    <td>
    <SCRIPT type="text/javascript">function alertLigne_1_1_2_1(ligne){alert(ligne);}</SCRIPT>
    	&nbsp;<input type="text" title="_1_1_2_1" value="'_1_1_2','1'" name="_1_1_2_1_3_1" size="16" maxlength="64"></td>
    	<td>&nbsp;<input type="text" title="_1_1_2_1" value="_1_1_2_1_4_1" name="_1_1_2_1_4_1" size="16" maxlength="64"></td>
    	<td>&nbsp;<TEXTAREA WRAP="soft" title="_1_1_2_1" name="_1_1_2_1_5_1" ROWS="2" COLS="16">textarea A2</TEXTAREA></td>
    	<td>&nbsp;<select title="_1_1_2_1" name="_1_1_2_1_6_1"><OPTION value="">--<OPTION value="option 1">A3-1<OPTION value="option 2">A3-1<OPTION value="option 3">A3-1</select></td>
    	<td>
    		<input type="button" value="Copie" title="_1_1_2_1" onclick="clone(this.parentNode.parentNode, '_1_1_2','1');">
    		<input type="button" value="New" title="_1_1_2_1" onclick="cloneEtVide(this.parentNode.parentNode, '_1_1_2','1');">
    		<input type="button" value="Suppr." title="_1_1_2_1" onclick="supprLigne(this.parentNode.parentNode, '_1_1_2');">
    		<input type="button" value="Alert" title="_1_1_2_1" onclick="alertLigne_1_1_2_1('_1_1_2_1');">
    	</td>
    </tr>
    <tr>
    <td class="tdSpe" NOWRAP>
    <SCRIPT type="text/javascript">function alertLigne_1_1_2_2(ligne){alert(ligne);}</SCRIPT>
    	&nbsp;<input type="text" title="_1_1_2_2" value="'_1_1_2','2'" name="_1_1_2_2_3_1" size="16" maxlength="64"></td>
    	<td>&nbsp;<input type="text" value="_1_1_2_2_4_1" title="_1_1_2_2" name="_1_1_2_2_4_1" size="16" maxlength="64"></td>
    	<td class="tdSpe" NOWRAP>&nbsp;<TEXTAREA WRAP="soft" title="_1_1_2_2" name="_1_1_2_2_5_1" ROWS="2" COLS="16">textarea B2</TEXTAREA></td>
    	<td class="tdSpe" NOWRAP>&nbsp;<select title="_1_1_2_2" name="_1_1_2_2_6_1"><OPTION value="">--<OPTION value="option 1">B3-1<OPTION value="option 2">B3-1<OPTION value="option 3">B3-1</select></td>
    	<td>
    		<input type="button" value="Copie" title="_1_1_2_2" onclick="clone(this.parentNode.parentNode, '_1_1_2','2');">
    		<input type="button" value="New" title="_1_1_2_2" onclick="cloneEtVide(this.parentNode.parentNode, '_1_1_2','2');">
    		<input type="button" value="Suppr." title="_1_1_2_2" onclick="supprLigne(this.parentNode.parentNode, '_1_1_2');">
    		<input type="button" value="Alert" title="_1_1_2_2" onclick="alertLigne_1_1_2_2('_1_1_2_2');">
    	</td>
    </tr>
    <tr>
    <td>
    <SCRIPT type="text/javascript">function alertLigne_1_1_2_3(ligne){alert(ligne);}</SCRIPT>
    	&nbsp;<input type="text" title="_1_1_2_3" value="'_1_1_2','3'" name="_1_1_2_3_3_1" size="16" maxlength="64"></td>
    	<td>&nbsp;<input type="text" title="_1_1_2_3" value="_1_1_2_3_4_1" name="_1_1_2_3_4_1" size="16" maxlength="64"></td>
    	<td>&nbsp;<TEXTAREA WRAP="soft" title="_1_1_2_3" name="_1_1_2_3_5_1" ROWS="2" COLS="16">textarea C2</TEXTAREA></td>
    	<td>&nbsp;<select title="_1_1_2_3" name="_1_1_2_3_6_1"><OPTION value="">--<OPTION value="option 1">C3-1<OPTION value="option 2">C3-1<OPTION value="option 3">C3-1</select></td>
    	<td>
    		<input type="button" value="Copie" title="_1_1_2_3" onclick="clone(this.parentNode.parentNode, '_1_1_2','3');">
    		<input type="button" value="New" title="_1_1_2_3" onclick="cloneEtVide(this.parentNode.parentNode, '_1_1_2','3');">
    		<input type="button" value="Suppr." title="_1_1_2_3" onclick="supprLigne(this.parentNode.parentNode, '_1_1_2');">
    		<input type="button" value="Alert" title="_1_1_2_3" onclick="alertLigne_1_1_2_3('_1_1_2_3');">
    	</td>
    </tr>
    </table>
     
    </table>
    </body>
    </html>

  2. #2
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Points : 9 130
    Points
    9 130
    Par défaut
    Attention
    les balise Script dans le code ne donnent pas lieu à la création d'in neud dans le DOM comme fils du Neud représentant la balise père.

    TOUTE BALISE <script> dans le source HTML ajoute une entrée dans le DOM dans la liste des scripts soit donc dans le document

    document.scripts chaque élément crée est un HTMLScriptElement
    A+JYT

Discussions similaires

  1. Réponses: 0
    Dernier message: 01/12/2009, 10h26
  2. La corbeille ne conserve pas les documents.
    Par byrautor dans le forum Administration
    Réponses: 0
    Dernier message: 25/10/2009, 16h32
  3. ArrayList qui ne conserve pas les elements.
    Par Elwe31 dans le forum Collection et Stream
    Réponses: 2
    Dernier message: 13/10/2008, 12h41
  4. Réponses: 6
    Dernier message: 20/07/2008, 07h33
  5. Dossir Extras ne supporte pas les scripts?
    Par Donaldo dans le forum 4D
    Réponses: 2
    Dernier message: 21/03/2007, 18h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo