Sujet Précédent Sujet Suivant

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

Résolu
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 - Modifié par EnguerrandP le 7/04/2014 à 16:46
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre 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.

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
7 avril 2014 à 17:49
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....



0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
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 ?
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
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...
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
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 )
0
Réponse 2 / 2
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 7/04/2014 à 21:37
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.
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
Modifié par jordane45 le 8/04/2014 à 01:47
Il faut encapsuler les "id" de tes éléments html entre quotes. ( une propriété ID d'un objet HTML s'écrit TOUJOURS sous la forme : id="une_valeur" ou id='une_valeur'
* une_valeur pouvant être une STRING ou une Variable ou un mix des deux (comme c'est le cas pour toi..).

regardes comment j'ai fait pour le DIV... 
("<div name='MesTBL' id='myDiv_" + idTable + "'></div>")


Donc par exemple toi tu devrais faire un truc du genre: 
//On crée un tableau pour le jour X ET ON L'AJOUTE AU DIV
 $("myDiv_" +"TJour_" + idTable).append('<table type="" id="TJour_' + idTable + '" ></table>');
//On crée un Bouton New Line ET on l'ajoute à la TABLE
 $("TJour_" + idTable).append('<input type="button" id="TNewLine_' + idTable + '" ></input>');
// etc...
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
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/


.
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 8/04/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>
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
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
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
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.)
0

Discussions similaires

DIAPORAMA ALÉATOIRE AVEC TIMER
seufseuf -
neigedhiver -

31 réponses
jquery nombre d'options d'un select
Raul duke -
Raul duke -

1 réponse
VBA+XML+cloneNode
Fab_C -
Renfield -

1 réponse
[JQuery]Datatable problème avec la création de bouton
EnguerrandP -
EnguerrandP -

15 réponses
intégrer mon slider jquery à ma page et le faire tourner en boucle
lallanana87 -
BencoAndCo -

2 réponses
Rejoignez-nous