[JQuery] Gestion de la valeur des éléments d'un tableau cloné [Résolu]

Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
- 7 avril 2014 à 15:34 - Dernière réponse :
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
- 8 avril 2014 à 12:55
Bonjour,
Voila le code de ma page HTML avec son script :
<html>

<head>
 <meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
 <link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
 <link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
 <link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
 <script type="text/javascript" src="JS/JS_JQuery_1_11_0_C.js"></script>
 <script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
 <script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script> 
 <script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
</head>

<body background="IMAGES/fond_Gris.jpg">

<div id="Top_Worker">
 WORKER :
 <SELECT id="Select_Worker" NAME="SWorker" onChange="saveValue(this)">
  <option value="*****************" selected="selected"></option>
  <option>*****************
 </SELECT>
</div>

<button id="Return" title="Return menu" type="button" onclick="self.location.href='Administrators_Menu.php'">
   <img src="IMAGES/return_menu.jpg">
</button>

<div id="inlineDatepicker"></div>
 <input type="date" id="DATE1" Value='date' Size="9"></input>
 
<fieldset id="Partie_Basse_Fieldset">
<legend> DAILY TIMETABLE per request</legend>
<div name="MesLignes" id="Partie_Basse_Div">
 <table id="Table_Jour" border="2" name="MesTBL">
 <tbody>
  <tr align="center" id="Tab"> 
   <td bgcolor="#F0FFFF"></td> 
   <td bgcolor="#F0FFFF">Date</td>
   <td bgcolor="#F0FFFF">Request</td>
   <td bgcolor="#F0FFFF">Time(h)</td>
   <td bgcolor="#F0FFFF">Description</td>
   <td bgcolor="#F0FFFF">Worker</td>
  </tr>  
  <tr align="center" id="Line">
   <td>     
    <input type="button" name="NLine" id=""  size="3" value="New" 
     onclick="CloneLine(this.parentNode.parentNode);">
    </input>  
   </td>
   <td>     
    <input type="date" name="date" id="TDate"  size="9" value="" readonly="readonly"></input>  
   </td>
   <td>     
    <SELECT id="S_Request" NAME="Select_Request" onChange="saveValue(this)">
     <option value="*****************" selected="selected"></option>
     <option>*****************
    </SELECT>  
   </td>
   <td>     
    <input type="text" name="time" id="TTime"  size="5" value=""></input>  
   </td>   
   <td>     
    <textarea name="TextArea_Description" id="TA_Description" rows="2" cols="30" value=""></textarea>   
   </td>
   <td>     
    <SELECT id="T_S_Worker" NAME="SWorker" onChange="saveValue(this)">
     <option value="*****************" selected="selected"></option>
     <option>*****************
    </SELECT>  
   </td>          
  </tr> 
 </tbody>
 </table>
</div> 
</fieldset> 

<script>
$(window).load(function()
{
 $("#Table_Jour").hide();
});

$(function() 
{
   $('#inlineDatepicker').datepick
   ({onSelect:
  function(dates)
     {
      var dateText = $.datepick.formatDate(dates[0]);
      document.getElementById("DATE1").value =dateText;
         var dateArr = dateText.split("/");
         var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];  
   
   if ($("#myDivTable_Jour_"+IDfromDateText).length > 0)
   {
    // Il existe..donc j'affiche le tableau
                AffichDiv("Table_Jour_"+IDfromDateText);
   }
   else
   {
    // L'element n'existe pas.. je le crée ( clone)..
                CreaTable("Table_Jour_"+IDfromDateText,dates);

                // ...puis j'affiche le tableau
                AffichDiv("Table_Jour_"+IDfromDateText);                  
   }           
     }
   });
});

function CreaTable(idTable,dates)
{
 $("#Table_Jour").show();
 
 //Je crée un nouveau div pour le clone du tableau d'origine
    $("#Partie_Basse_Div").append("<div name='MesTBL' id='myDiv" + idTable + "'></div>");
 //On clone le tableau d'origine
 $("#Table_Jour").clone().appendTo("#myDiv" + idTable); 
 var dateText = $.datepick.formatDate(dates[0]);
 //Change l'id de l'input date et y met la date du jour sélectionner
 $("#TDate").attr(
 {
  'id':"TDate_"+idTable
 });
 $("#TDate_"+idTable).attr('value',dateText);
 $("#Table_Jour").hide(); 
}

function AffichDiv(idTable)
{
    //On masque TOUS les tableaux
  $('div[name="MesTBL"]').hide(); 
 
    // On affiche celui que l'on a selectionné
  $('#myDiv'+ idTable).show();   
}

function CloneLine(Line)
{
 newLine = Line.cloneNode(true); 
 Line.parentNode.insertBefore(newLine,Line);
 //Line.parentNode.appendChild(newLine);
}

</script>
</body>
</html>


J'essaye de modifier l'id des éléments que contienne les tableaux cloné
et d'y mettre pour certain une valeur(prise dans une base de donnée (pas ma question)) et pour l'input "TDate" la date sélectionnée(ma question).

D'après se que j'ai compris de mes anciens poste et de mes test l'id de TDate et bien changer mais le problème serait dans le transfert de l'information date.
Je ne comprend pas pourquoi sa coince.
Actuellement lorsque j'arrive a faire marcher un de mes test il met la date dans l'input de la date que je sélectionne après, puis après quelque changement de date il ne met dans l'input que la première valeur que j'ai sélectionner .

Merci
Merci et que le café soit avec vous.
Afficher la suite 

Votre réponse

11 réponses

Messages postés
23244
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 novembre 2018
- 7 avril 2014 à 17:49
0
Merci
Bonjour,

Tu as fais le choix de "cloner" un tableau puis de le modifier (en fonction de la date choisi ..etc...)
Personnellement.. j'aurai "généré" directement le tableau ( je l'aurai construit si tu préfère) plutôt que d'utiliser le clonage.

En gros..; si tu reprends mes exemples.. dans la fonction CreaTable que je t'avais montré initialement je créé à la volée des éléments;..
Cela permet de gérer séparément et directement chaque élément que tu ajoutes.. tes <table> .. tes <input> ;.. etc....

Cela t'évitera aussi des souci d'ID comme tu le suggère dans ta question :
http://codes-sources.commentcamarche.net/forum/affich-10025059-jquery-changement-multiple-d-id-lors-d-un-clonage


NB: Normalement lorsque l'on DEV on prend du temps pour réflechir au fonctionnement de notre futur programme...et une fois qu'on a bien étudié les besoins... défini quelles méthodes on va utiliser... Seulement Là on commence à coder..
Pour l'instant tu fais des petits pas sans savoir vraiment où aller... résultat...tu découvres de nouveaux soucis à chaque ligne de code que tu écris....



Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
- 7 avril 2014 à 18:07
ok, sa ma l'air assez compliquer par rapport au clonage.
Es se que on y gagne en performance avec la création ?
Messages postés
23244
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 novembre 2018
- 7 avril 2014 à 20:24
Vu que tu clones et qu'ensuite tu modifies les id... le fait de créer ton tableau ne devrais pas avoir trop d'incidence sur le temps de traitement au final...
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
- 7 avril 2014 à 20:40
D'accord, mais es ce que tu c'est pourquoi mon code ne marche pas tout le temps .
Je m'explique actuellement il fait sa :
-1) je clic sur une date il crée le clone
-2)je clic sur une deuxième date il met dans l'input TDate... la date du choix précédent.
-3)Après quelque sélection il ne met plus la date précédente mais la première sélectionner.

J'ai vérifier avec firebug les id des Tdate sont bien modifier je voit pas la cause de se dysfonctionnement, comme tu dit que sa marchera mieux avec des création qu'avec des clone je fait refaire mon interface mais j'aimerait quand même connaitre la raison de mon problème.

Merci pour toute ton aide (et surtout t'a patiente )
Commenter la réponse de jordane45
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
- Modifié par EnguerrandP le 7/04/2014 à 21:37
0
Merci
Bonsoir,
Voila se que j'ai fais (brouillon):
<html>

<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_JQuery_1_11_0_C.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
</head>

<body background="IMAGES/fond_Gris.jpg">

<div id="Top_Worker">
	WORKER :
	<SELECT id="Select_Worker" NAME="SWorker" onChange="saveValue(this)">
		<option value="*****************" selected="selected"></option>
		<option>*****************
	</SELECT>
</div>

<button id="Return" title="Return menu" type="button" onclick="self.location.href='Administrators_Menu.php'">
			<img src="IMAGES/return_menu.jpg">
</button>

<div id="inlineDatepicker"></div>
 <input type="date" id="DATE1" Value='date' Size="9"></input>
 
<fieldset id="Partie_Basse_Fieldset">
	<legend> DAILY TIMETABLE per request</legend>
	<div name="MesLignes" id="Zone_Tab"></div>	
</fieldset> 

<script>

$(function() 
{
   $('#inlineDatepicker').datepick
   ({onSelect:
		function(dates)
   		{
    		var dateText = $.datepick.formatDate(dates[0]);
   			document.getElementById("DATE1").value =dateText;
       		var dateArr = dateText.split("/");
        	var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];	 
		 
			if ($("#myDiv_TJour_"+IDfromDateText).length > 0)
			{
				// Il existe..donc j'affiche le tableau
                AffichDiv(IDfromDateText);
			}
			else
			{
				// L'element n'existe pas.. je le crée ( clone)..
                CreaTable(IDfromDateText,dates);

                // ...puis j'affiche le tableau
                AffichDiv(IDfromDateText);                  
			}           
   		}
   });
});

function CreaTable(idTable,dates)
{
	//Je crée un nouveau div pour le clone du tableau d'origine
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + idTable + "'></div>");
	//On crée un tableau pour le jour X 
	var table = $("myDiv_" +"TJour_" + idTable).append('<table type="" id="TJour_" + idTable + ></table>');
	//On crée un Bouton New Line
	var VTNewLine = $("TJour_" + idTable).append('<input type="button" id="TNewLine_" + idTable + ></input>');
	//On crée un Input pour la date
	var VTDate = $("TJour_" + idTable).append('<input type="date" size="9" id="TDate_" + idTable + ></table>');
	//On crée un Select pour la tache
	var VTSRequest = $("TJour_" + idTable).append('<select onChange="saveValue(this)" id="TSRequest_" + idTable + ></select>');
	//On crée un Input pour le Temps
	var VTTime = $("TJour_" + idTable).append('<input type="text" size="5" id="TTime_" + idTable + ></input>');
	//On crée une Zone de texte pour la description
	var VTTADescription = $("TJour_" + idTable).append('<textarea rows="2" cols="30" id="TTADescription_" + idTable + ></textarea>');
	//On crée un Select pour le travailleur 
	var VTSWorker = $("TJour_" + idTable).append('<select onChange="saveValue(this)" id="TSWorker_" + idTable + ></select>');
	table.append(VTNewLine);
	table.append(VTDate);
	table.append(VTSRequest);
	table.append(VTTime);
	table.append(VTTADescription);
	table.append(VTSWorker);
	$("myDiv_" +"TJour_" + idTable).append(table);
		
	var dateText = $.datepick.formatDate(dates[0]);
	$("#TDate_"+idTable).attr({'value':dateText});	
}

function AffichDiv(idTable)
{
    //On masque TOUS les tableaux
 	$('div[name="MesTBL"]').hide(); 
	
    // On affiche celui que l'on a selectionné
 	$('#myDiv'+ idTable).show();   
}

function CloneLine(Line)
{
	newLine = Line.cloneNode(true); 
	Line.parentNode.insertBefore(newLine,Line);
	//Line.parentNode.appendChild(newLine);
}

</script>
</body>
</html>


Mais la il n'y a rien qui s'affiche et firebug ne me signal aucune erreur.
Merci et que le café soit avec vous.
Messages postés
23244
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 novembre 2018
- 8 avril 2014 à 01:46
Par contre... pourquoi tu as déclaré des variables devant chaque AJOUT ?
var VTNewLine =
ar VTSRequest =
Etc...

Et surtout... alors que tu fais déjà des APPEND de ces objets..pourquoi avoir remis une autre série de APPEND à la fin de ton code ??? Ca ne sert à rien..
https://api.jquery.com/append/
//DONC LIGNES A SUPPRIMER !
table.append(VTNewLine);
table.append(VTDate);
table.append(VTSRequest);
table.append(VTTime);
table.append(VTTADescription);
table.append(VTSWorker);
$("myDiv_" +"TJour_" + idTable).append(table);



Et donc pour finir... la ligne de code :
//On crée un tableau pour le jour X 
	var table = $("myDiv_" +"TJour_" + idTable).append('<table type="" id="TJour_" + idTable + ></table>');
	

Doit devenir tout simplement :

//On crée un tableau pour le jour X ET ON L'AJOUTE AU DIV ! 
$("myDiv_" +"TJour_" + idTable).append('<table id="TJour_' + idTable + '"></table>');
// Au passage j'ai viré TYPE="" ... qui pour un tableau ne correspond à RIEN.
	
</code

NB:
La ligne :
<code js>
$("#TDate_"+idTable).attr({'value':dateText});

Peut s'écrire plus simplement:
$("#TDate_"+idTable).val(dateText);

http://api.jquery.com/val/


.
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
- 8 avril 2014 à 07:53
Bonjour, j'ai rajouter les variables parce-que m'ont première essai sans ne marcher pas (mais le deuxième avec ne fonctionner pas mieux) et que je penser que sans était peut être la cause.

Mais pourquoi il n'y a rien qui apparait lorsque je fais mes tests ?
Merci
<html>

<head>
 <meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
 <link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
 <link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
 <link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
 <script type="text/javascript" src="JS/JS_JQuery_1_11_0_C.js"></script>
 <script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
 <script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script> 
 <script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
</head>

<body background="IMAGES/fond_Gris.jpg">

<div id="Top_Worker">
 WORKER :
 <SELECT id="Select_Worker" NAME="SWorker" onChange="saveValue(this)">
  <option value="*****************" selected="selected"></option>
  <option>*****************
 </SELECT>
</div>

<button id="Return" title="Return menu" type="button" onclick="self.location.href='Administrators_Menu.php'">
   <img src="IMAGES/return_menu.jpg">
</button>

<div id="inlineDatepicker"></div>
 <input type="date" id="DATE1" Value='date' Size="9"></input>
 
<fieldset id="Partie_Basse_Fieldset">
 <legend> DAILY TIMETABLE per request</legend>
 <div name="MesLignes" id="Zone_Tab"></div> 
</fieldset> 

<script>

$(function() 
{
   $('#inlineDatepicker').datepick
   ({onSelect:
  function(dates)
     {
      var dateText = $.datepick.formatDate(dates[0]);
      document.getElementById("DATE1").value =dateText;
         var dateArr = dateText.split("/");
         var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];  
   
   if ($("#myDiv_TJour_"+IDfromDateText).length > 0)
   {
    // Il existe..donc j'affiche le tableau
                AffichDiv(IDfromDateText);
   }
   else
   {
    // L'element n'existe pas.. je le crée ( clone)..
                CreaTable(IDfromDateText,dates);

                // ...puis j'affiche le tableau
                AffichDiv(IDfromDateText);                  
   }           
     }
   });
});

function CreaTable(idTable,dates)
{
 //Je crée un nouveau div pour le clone du tableau d'origine
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + idTable + "'></div>");
 //On crée un tableau pour le jour X 
 $("myDiv_" +"TJour_" + idTable).append('<table id="TJour_' + idTable + '"></table>');
 //On crée un Bouton New Line
 $("TJour_" + idTable).append('<input type="button" id="TNewLine_' + idTable + '"></input>');
 //On crée un Input pour la date
 $("TJour_" + idTable).append('<input type="date" size="9" id="TDate_' + idTable + '"></table>');
 //On crée un Select pour la tache
 $("TJour_" + idTable).append('<select onChange="saveValue(this)" id="TSRequest_' + idTable + '"></select>');
 //On crée un Input pour le Temps
 $("TJour_" + idTable).append('<input type="text" size="5" id="TTime_' + idTable + '"></input>');
 //On crée une Zone de texte pour la description
 $("TJour_" + idTable).append('<textarea rows="2" cols="30" id="TTADescription_' + idTable + '"></textarea>');
 //On crée un Select pour le travailleur 
 $("TJour_" + idTable).append('<select onChange="saveValue(this)" id="TSWorker_' + idTable + '"></select>');

  
 var dateText = $.datepick.formatDate(dates[0]);
 $("#TDate_"+idTable).val(dateText); 
}

function AffichDiv(idTable)
{
    //On masque TOUS les tableaux
  $('div[name="MesTBL"]').hide(); 
 
    // On affiche celui que l'on a selectionné
  $('#myDiv'+ idTable).show();   
}

function CloneLine(Line)
{
 newLine = Line.cloneNode(true); 
 Line.parentNode.insertBefore(newLine,Line);
 //Line.parentNode.appendChild(newLine);
}

</script>
</body>
</html>
Messages postés
23244
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 novembre 2018
- 8 avril 2014 à 10:30
Il manque les "#" devant les ID des éléments que tu appelles depuis Jquery. ( en recopiant ton code.. j'ai oublié de les mettre également).
 $("#TJour_" + idTable).append('<s
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
- 8 avril 2014 à 10:33
Je l'ai remarquer et les et rajouter mais sa na rien changer.
je ne comprend pas pourquoi firebug ne détecte aucune erreur.
Merci,( comme sa sort du sujet de se topique j'en est crée un pour cette question.)
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Dernière intervention
15 juillet 2015
- 8 avril 2014 à 12:55
Salut j'ai pu test :
$("#TDate_"+idTable).val(dateText);

avec la gestion par création de nouveaux éléments et sa marche se qui résout la question de se topique.
Merci
Commenter la réponse de EnguerrandP

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.