Discussion :

[tavarlindar]

Bonjour,
Je bloque totalement sur un problème d'ajout de ligne à un tableau.

Habituellement, j'ai un bouton add qui fait appel à une fonction js qui rajoute des lignes au tableau considéré. Cette fonction crée les cellules nécessaires ainsi que leur contenu.

Or aujourd'hui je bloque totalement à cause de la nature de la cellule que je souhaite rajouter.

Pour mieux comprendre : voici une page de test une page de test faite à l'arrache et pour l'exemple.

Pourquoi je bloque ?
Habituellement, ma fonction de rajout de ligne crée chaque cellule du tableau avec son contenu puis fait appel à une fonction qui renumérote chaque champ.

Mais ici je souhaite utiliser un calendrier js. Habituellement, son utilisation ne me pose pas de problème, car je connais exactement le nombre de calendriers que ma page doit gérer. Or ici, ce n'est pas le cas, puisque l'utilisateur peut en ajouter autant de ligne qu'il veut et donc de calendrier.

Ici c'est la structure même du code qui me bloque :

exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 <input type="text" tabindex="" name="date_echeance_client2" id="date_echeance_client2" value="" size ="8" >
<script language="JavaScript" type="text/javascript">
<!--
/** Calendrier Date
				*/
function calendar2Callback(date, month, year)
			{
document.forms['reservation'].date_echeance_client2.value = date + '-' + month + '-' + year;
			}
calendar2 = new dynCalendar('calendar2', 'calendar2Callback');
//-->
</script>

Chaque champ input text destiné à recevoir la date est suivi d'un code JS qui permet d'afficher le calendrier et qui permet de l'utiliser.

Je bloque car je ne voit pas comment définir ma fonction de rajout de ligne de telle sorte qu'elle me rajoute la partie JS correspondant à mon calendrier.

Je sais faire :

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
 
function ajoutLigneAuTableauClient(num_tbody)
{
 
var tbl = document.getElementById('echeancier_client');
 
// ajout d'une ligne
var row = tbl.tBodies[num_tbody].insertRow(-1);
 
// Cellule 1 : Champ date + calendrier
	var newCell1 = row.insertCell(1);
	var dateEcheance = document.createElement('input');
	dateEcheance.setAttribute('type','text');
	dateEcheance.setAttribute('size','8');
	dateEcheance.setAttribute('name','date_echeance_client3');
	dateEcheance.setAttribute('value','');
	dateEcheance.setAttribute('id','date_echeance_client');
	newCell1.appendChild(dateEcheance );

mais je ne sais pas comment dire rajoute moi

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<script language="JavaScript" type="text/javascript">
			<!--
			/** Calendrier Date de depart
				*/
			function calendar2Callback(date, month, year)
			{
            document.forms['reservation'].date_echeance_client2.value = date + '-' + month + '-' + year;
			}
			calendar2 = new dynCalendar('calendar2', 'calendar2Callback');
			//-->
</script>

sachant que par la suite tout doit être renuméroter ....

A toute fin utile, j'utilise Dyncalendar , cliquez ici pour plus d'info

En espérant avoir exprimer le plus clairement possible mon problème je remercie par avance ceux et celles qui pourront m'aider.

Tavar

[Invité]

Bonjour,
As-tu essayé avec

Code :

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

1
2
3
4
5
6
7
8
 
var scrCalendar = createElement("script");
scrCalendar.setAttribute("type", "text/javascript");
scrCalendar.setAttribute("text", "<!--
/** Calendrier Date*/
function calendar3Callback(date, month, year){document.forms['reservation'].date_echeance_client3.value = date + '-' + month + '-' + year;};calendar3 = new dynCalendar('calendar3', 'calendar3Callback');
//-->");
newCell1.appendChild(scrCalendar);

Enfin, quelque chose de ce genre !

A+

[SpaceFrog]

plusieurs remarques ...

Code :

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

dateEcheance.setAttribute('name','date_echeance_client3');

cette ligne risque fort de te poser un problème... on ne peut pas ajouter de façon dynamique un name... Il n'est pas ensuite reconnu par le DOM sous IE ...
Cf cette article : http://www.developpez.net/forums/d53...ynamique-form/

ensuite tu devras ajouter un onclick à l'input de sorte qu'il declencher la calendrier non ??? en passant en paramètre à la fonction l'id de l'input à remplir ...

[tavarlindar]

merci jlmag, mais cela ne fonctionne pas du tout.

Personne n 'a d'idée ????

[SpaceFrog]

heu si cf. ci dessus ...

[Invité]

Bonjour SpaceFrog,

Peux-tu être plus explicite, stp.

Merci

[SpaceFrog]

J'ai bien un code avec attruibution dynamique de calendrier sur des inputs, mais j'ai peur que tu ne dise que c'est trop compliqué;

Alors j'ai simplifié au maximum le principe ...

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
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
var InputCount=0
function addLine(){
var newInput =document.createElement('<input type="text" name="input_" id="input_'+InputCount+'" />');
newInput.readOnly=true;
InputCount++;
newInput.onclick=function(){remplir(this.id)};
document.body.appendChild(newInput);
}
 
function remplir(obj){
 document.getElementById(obj).value=prompt();
 }
 </script>
</head>
 
<body>
<input type='button' value='ajout' onclick='addLine()' />
 
</body>
 
</html>

il suffit d'attribuer la fonction sur le onclick en passant en paramètre l'id du champs ...

[tavarlindar]

Merci SpaceFlog d'abord,

mais Monsieur jlmag, votre code est génial, c'est exactement ce qu'il me faut, mais je ne pourrai pas dormir sans plus d'explication.

J'avais essayé un code analogue, mais qui bugger. Quand j'ai vu ton code, je me suis dit, bon à quoi bon, sans voir le lien ICI.

Je clique sur ICI et oh miracle son code fonctionne.

Super, mais pourquoi fonctionne-t-il ?
passons sur le

Code :

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

1
2
 
<img src="../images/dynCalendar.gif" onclick="toggleCalendar(document.getElementById('date_echeance_client1'))" />

c'est du statique.

Passons à la création de cellule :

Code :

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

1
2
3
4
5
 
 var btnCal = document.createElement('img');
	btnCal.src='images/dynCalendar.gif';
	btnCal.onclick = function() {toggleCalendar(dateEcheance)};
	newCell1.appendChild(btnCal);

je viens de comprendre .... toggleCalendar() prend en paramètre l'input contenant la date, comme tu l'as écrit. Eh ben, ce fut laborieux.

En tout cas , mille fois merci.
Vraiment merci.

[Invité]

Re,

Bon, on y arrive !!
cependant, il te reste une chose à faire, c'est la prise en compte du format de la date...

A+

[tavarlindar]

format de la date ?
j'ai modifié le js du calendrier.
je préfère dd-mm-yyyy que dd/mm/yyyy ou mm/dd/yyyy comme c'est formaté dans le script d'origine.
Ensuite j'ai l'habitude de jongler entre php et mysql enfin dans une certaine mesure !
Par contre, j'ai vu que tu a modifié le css. Pas mal, les petites flêches beues.

[Invité]

Re,

J'ai modifié le css du calendrier, un peu pauvre celui par défaut.
Pour les icones, c'est de chez FamFamFam

A+