11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQuery Datepicker et javascript DOM - ajout de ligne

Bonjour à toutes et à tous,

Afin de pouvoir générer une multitude de calendrier, j'essaye non sans peine d'utiliser le datepicker de JQUERY.

Voici un exemple :
http://dianamahe.free.fr/test_tableaucalendrier2.php

Le contexte : lorsque j'ai un tableau de 10 lignes avec 2 calendriers par ligne, tous repérés par la class "champ_date_input_tableau", aucun problème. Tous les calendriers fonctionnent.

avec comme fonction jquery :
<!--
$(document).ready(function(){
 
$.datepicker.setDefaults($.datepicker.regional['fr']);
	$('.champ_date_input_tableau').datepicker({ /* action sur class date */
 
		dateFormat: 'dd-mm-yy',
		changeMonth: true,
		changeYear: true,
		yearRange: "c-70:c+70",
 
	});
});
//-->


Lorsque j'ajoute une nouvelle ligne via ma fonction d'ajout ( function ajoutLigneAuTableauTransfert() ), le ou les nouveaux champs date se voient affecter de la class champ_date_input_tableau si j'en crois la consolde firebug, mais la fonction jquery ne fonctionne pas pour les nouveaux champs date créés.

Où est le problème ? Comment faire pour que les nouveaux datepicker fonctionnent ?

Par avance merci pour votre aide, car je sèche totalement.

code utilisé : voir le code source ou plus simplement :

<?php
header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--<!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="fr" lang="fr">
	<head>
 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>TEST</title>
 
		<link href="../crewform.css" rel="stylesheet" type="text/css" />
		<link type="text/css" href="css/ui-darkness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
 
 
</head>
<BODY>
<script type="text/javascript">
<!--
var nbLignesTransfert= 2;
 
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
 
		}
}
 
function ajoutLigneAuTableauTransfert()
{
 
		var tbl = document.getElementById('tabtransfert');
 
		// ajout d'une ligne
		var row = tbl.tBodies[1].insertRow(-1);
 
 
	// Lien cliquable de  Suppression de ligne
	var newCell0 = row.insertCell(0);
	var LienSuppression=document.createElement('a');
	newCell0.appendChild(LienSuppression);
    var suppressionTexte=document.createTextNode('supprimer');
    LienSuppression.appendChild(suppressionTexte);
	LienSuppression.setAttribute('href','#'); 
	LienSuppression.onclick = function () {deleteCurrentRow_tab_transfert(this)};
 
 
	// Cellule 1 : champ caché id_transfert + champ numéro de vol
	var newCell1 = row.insertCell(1);
 
	//Champ caché id_transfert : vide lors de la création, avec une valeur en mode modification
	var champ_id_transfert = document.createElement('input');
	champ_id_transfert.setAttribute('type','hidden');
	champ_id_transfert.setAttribute('name','id_transfert');
	champ_id_transfert.setAttribute('value','');
	newCell1.appendChild(champ_id_transfert);
 
	// Champ Date d arrivee
 
	var champ_date_arrivee = document.createElement('input');
	champ_date_arrivee.setAttribute('type','text');
	champ_date_arrivee.setAttribute('size','10');
	champ_date_arrivee.setAttribute('name','date_t');
	champ_date_arrivee.setAttribute('value','');
	champ_date_arrivee.setAttribute('id','date_t');
	champ_date_arrivee.className='champ_date_input_tableau';
	newCell1.appendChild(champ_date_arrivee);
 
 
 
	// Champ Heure d arrivee
	var newCell2 = row.insertCell(2);
	var champ_heure_arrivee = document.createElement('input');
	champ_heure_arrivee.setAttribute('type','text');
	champ_heure_arrivee.setAttribute('size','5');
	champ_heure_arrivee.setAttribute('name','heure_t');
	champ_heure_arrivee.setAttribute('value','');
	champ_heure_arrivee.setAttribute('id','heure_t');
	champ_heure_arrivee.className='champ_formulaire_gauche';
	newCell2.appendChild(champ_heure_arrivee);
 
	// Champ Aeoroport
	var newCell3 = row.insertCell(3);
	var champ_aeroport = document.createElement('input');
	champ_aeroport.setAttribute('type','text');
	champ_aeroport.setAttribute('size','25');
	champ_aeroport.setAttribute('name','aeroport_t');
	champ_aeroport.setAttribute('value','');
	champ_aeroport.setAttribute('id','aeroport_t');
	champ_aeroport.className='champ_formulaire_gauche';
	newCell3.appendChild(champ_aeroport);
 
		//Champ numéro de vol
	var newCell4 = row.insertCell(4);	
	var champ_num_vol = document.createElement('input');
	champ_num_vol.setAttribute('type','text');
	champ_num_vol.setAttribute('size','20');
	champ_num_vol.setAttribute('name','num_vol_t');
	champ_num_vol.setAttribute('value','');
	champ_num_vol.className='champ_formulaire_gauche';
 
	newCell4.appendChild(champ_num_vol);
 
	// Champ Nombre de passagers
	var newCell5 = row.insertCell(5);
	var champ_nb_passagers = document.createElement('input');
	champ_nb_passagers.setAttribute('type','text');
	champ_nb_passagers.setAttribute('size','2');
	champ_nb_passagers.setAttribute('name','nb_passagers_t');
	champ_nb_passagers.setAttribute('value','');
	champ_nb_passagers.setAttribute('id','nb_passagers_t');
	champ_nb_passagers.className='champ_formulaire_gauche';
	newCell5.appendChild(champ_nb_passagers);
 
	nbLignesTransfert++;
	majNumLignesTabTransfert('ajout');
	document.getElementById('nb_lignes_transfert').value= nbLignesTransfert;
 
}
 
function majNumLignesTabTransfert(modalite){
	var modalite;	
	for(var i = 0 ; i < nbLignesTransfert ; i++){
		var tbl = document.getElementById('tabtransfert');
		var nom_aeroport;
 
		tbl.tBodies[1].rows[i].className = 'gris'+(i%2);
 
 
		//Mise a jour de la cellule 1 (champ caché id_transfert : vide lors de la création, avec une valeur en mode modification)
		tbl.tBodies[1].rows[i].cells[1].getElementsByTagName('INPUT')[0].setAttribute('name','id_transfert'+(i+1));
 
 
		//Mise a jour du champ date_arrivee
		tbl.tBodies[1].rows[i].cells[1].getElementsByTagName('INPUT')[1].setAttribute('name','date_t'+(i+1));
		tbl.tBodies[1].rows[i].cells[1].getElementsByTagName('INPUT')[1].setAttribute('id', 'date_t'+(i+1));
 
		//Mise a jour du champ heure_arrivee
		tbl.tBodies[1].rows[i].cells[2].getElementsByTagName('INPUT')[0].setAttribute('name','heure_t'+(i+1));
		tbl.tBodies[1].rows[i].cells[2].getElementsByTagName('INPUT')[0].setAttribute('id', 'heure_t'+(i+1));
 
		//Mise a jour du champ aeroprt
		tbl.tBodies[1].rows[i].cells[3].getElementsByTagName('INPUT')[0].setAttribute('name','aeroport_t'+(i+1));
		tbl.tBodies[1].rows[i].cells[3].getElementsByTagName('INPUT')[0].setAttribute('id', 'aeroport_t'+(i+1));
		// on reprend la valeur de la dernière ligne	
		if (i==(nbLignesTransfert-1) && modalite=='ajout'){
		nom_aeroport=document.getElementById('aeroport_t'+(nbLignesTransfert-1)).value;
		tbl.tBodies[1].rows[i].cells[3].getElementsByTagName('INPUT')[0].setAttribute('value', nom_aeroport);
		}
 
		// Mise a jour du numero de vol
		tbl.tBodies[1].rows[i].cells[4].getElementsByTagName('INPUT')[0].setAttribute('name','num_vol_t'+(i+1));
		tbl.tBodies[1].rows[i].cells[4].getElementsByTagName('INPUT')[0].setAttribute('id','num_vol_t'+(i+1));
 
		//Mise a jour du nombre de passagers
		tbl.tBodies[1].rows[i].cells[5].getElementsByTagName('INPUT')[0].setAttribute('name','nb_passagers_t'+(i+1));
		tbl.tBodies[1].rows[i].cells[5].getElementsByTagName('INPUT')[0].setAttribute('id', 'nb_passagers_t'+(i+1));
	}
}
function deleteCurrentRow_tab_transfert(obj,id_transfert_sup)
{
		var delRow = obj.parentNode.parentNode;
		var tbl = delRow.parentNode.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		var id_transfert_sup = id_transfert_sup;
		//alert(id_prestation_sup);
		if (!isNaN(id_transfert_sup)){
		document.forms["equipage"].elements["id_transfert_a_supprimer"].value+=id_transfert_sup+'|';
		}  
		deleteRows(rowArray);
 
		nbLignesTransfert--;	
		majNumLignesTabTransfert();
		document.getElementById('nb_lignes_transfert').value= nbLignesTransfert;		
}
//-->
</script>
 
<script>
<!--
$(document).ready(function(){
 
$.datepicker.setDefaults($.datepicker.regional['fr']);
	$('.champ_date_input_tableau').datepicker({ /* action sur class date */
 
		dateFormat: 'dd-mm-yy',
		changeMonth: true,
		changeYear: true,
		yearRange: "c-70:c+70",
 
	});
 
});
//-->
		</script>
 
<div class="imgHead">
 
</div>
 
<div id="BlocContenu">
 
	<!-- Barre Haut Titre -->
	<div id="BarreHautFormulaire">
 
	</div>
	<!-- FIN Barre Haut Titre -->
 
	<div id="BlocFormulaire">
 
	<form class="formulaire_resa" name="equipage" id="equipage" METHOD='POST' ACTION="nonactive.php" onsubmit="return ValidationSaisie()">
	<input type="hidden" id ='nb_lignes_transfert' name='nb_lignes_transfert' value='2'>
	<input type="hidden" id="id_transfert_a_supprimer" name="id_transfert_a_supprimer" value="">
 
	<table id="tabtransfert" style="text-align: left; " border="0" cellpadding="2" cellspacing="2">
     <tbody>
		<tr style="background-color:#4b4b4b; color:white;">
			<td style="width: 50px;background-color:white;"></td>
 
			<td style="width: 150px;padding-left:5px;font-weight : bold;">DATE</td>
			<td style="width: 40px;padding-left:5px;font-weight : bold;">Heure</td>
			<td style="width: 100px;padding-left:5px;font-weight : bold;">Aeroport</td>
			<td style="width: 70px;padding-left:5px;font-weight : bold;">Numéro</td>
			<td style="width: 20px;padding-left:5px;font-weight : bold;">nombre</td>
		</tr>
	</tbody>	
		<tbody>
 
		<tr class="gris0">
			<td></td>
			<td><input type='hidden' id='id_transfert1' name='id_transfert1' size='2' value="">
			<input class='champ_date_input_tableau' type='text'  id='date_t1' name='date_t1' size='10' value="">
 
			</td>
			<td><input class ='champ_formulaire_gauche' type='text' id='heure_t1' name='heure_t1' size='5' value=""></td>
			<td><input class ='champ_formulaire_gauche' type='text' id='aeroport_t1' name='aeroport_t1' size='25' value=""></td>
			<td><input class ='champ_formulaire_gauche' type='text' id='num_vol_t1' name='num_vol_t1' size='10' value=""></td>
			<td><input class ='champ_formulaire_gauche' type='text' id='nb_passagers_t1' name='nb_passagers_t1' size='5' value=""></td>
		</tr>
 
				<tr class="gris1">
			<td></td>
			<td><input type='hidden' id='id_transfert2' name='id_transfert2' size='2' value="">
			<input class='champ_date_input_tableau' type='text'  id='date_t2' name='date_t2' size='10' value="">
 
			</td>
			<td><input class ='champ_formulaire_gauche' type='text' id='heure_t1' name='heure_t2' size='5' value=""></td>
			<td><input class ='champ_formulaire_gauche' type='text' id='aeroport_t2' name='aeroport_t2' size='25' value=""></td>
			<td><input class ='champ_formulaire_gauche' type='text' id='num_vol_t2' name='num_vol_t2' size='10' value=""></td>
			<td><input class ='champ_formulaire_gauche' type='text' id='nb_passagers_t2' name='nb_passagers_t2' size='5' value=""></td>
		</tr>
 
	</tbody>
 
	<tbody>	
    <tr>
      <td><input type="button" value="Ajouter" onclick="ajoutLigneAuTableauTransfert();"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
 
 
 
 
	</div>
	<div id="BarreBasFormulaire">
 
	</div>
</form>
 
 
</div><!-- Fin du Blonc Contenu-->
 
<div id="footer">
 
</div>
 
</body>
</html>
[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par Tavarlindar (24 Jul 2012 - 22:29)
Bonjour,

le problème est que cette fonction $('.champ_date_input_tableau') récupère tous les éléments présent dans la page au moment où elle est appelé.

Dans ton cas, tu devras relancer la fonction datepicker sur les nouveaux éléments que tu ajoute à ta page.

Autrement, tu peux aussi regarder du côté de la délégation des évènements ( .on() ou .delegate() ) et voir si ton plugin pourrait être utilisée dans un schéma semblable. Ce serait probablement la meilleure solution, mais je ne connais pas les détails d'utilisation de ton plugin.
Bonjour Vaxilart,

Tout d'abord merci.

le soucis c'est que je ne connais ni jquery, ni le plugin ! Je viens seulement de m'y mettre (à jquery).
j'ai vu du côté anglo-saxon, que c'est un problème récurrent. J'ai vu des pistes, mais comme c'est tout en anglais et qu'en plus c'est des bouts de code jquery et que je découvre cette librairie ...

http://stackoverflow.com/questions/2365150/dynamic-jquery-date-picker-code
http://forum.jquery.com/topic/datepicker-and-new-rows
et j'en passe ...

Datepicker fields are marked with a class (hasDatepicker) to indicate that they have been initialised

bref, je ne m'en sort pas.

Smiley bawling
Modifié par Tavarlindar (24 Jul 2012 - 23:46)
L'idée serait évidemment qu'à terme tu apprenne jQuery pour pouvoir t'en servir.

Rapidement, dans ton code tu pourrais peut-être ajouter cela:


// Champ Date d arrivee
 
	var champ_date_arrivee = document.createElement('input');
	champ_date_arrivee.setAttribute('type','text');
	champ_date_arrivee.setAttribute('size','10');
	champ_date_arrivee.setAttribute('name','date_t');
	champ_date_arrivee.setAttribute('value','');
	champ_date_arrivee.setAttribute('id','date_t');
	champ_date_arrivee.className='champ_date_input_tableau';
        $(champ_date_arrivee).datepicker({
		dateFormat: 'dd-mm-yy',
		changeMonth: true,
		changeYear: true,
		yearRange: "c-70:c+70",
	});
	newCell1.appendChild(champ_date_arrivee);


Mais en soit, il y aurait beaucoup à améliorer dans ton script.
Modifié par Vaxilart (25 Jul 2012 - 00:02)
J'ai trouvé une piste intéressante, mais mes connaissances actuelles ne me permette pas de l'exploiter :

http://www.library.beginnercode.com/jQuery/inputs_on_the_fly/cloneDatepicker.php

http://www.beginnercode.com/2009/12/17/cloning-table-rows-and-jquery-ui-datepicker/

Dans cet exemple, il clone une ligne et utilise uniquement jQuery, ce qui n'est pas mon cas.

J'en appelle à votre bien vouloir pour m'aider à adapter cette solution à mon code.

tavar
Modifié par Tavarlindar (25 Jul 2012 - 23:27)
Sujet clos
Aller à