JQuery UI - Datepicker - déclaration sur focus bogue ?

[tidus_6_9_2]

Bonjour à toutes et à tous,

Voilà, j'ai essayé de faire un bout de code qui me permet de créer des input selon des type. Selon ce type qui peut-être soit "Text" soit "Date" soit "Heure", j'appelle sur l'input une fonction javascript lorsqu'il reçoit le focus.

Exemple avec un champ date :

Code :

<input id=\"valeurReponse_"+$var_i+"_Date\" Type=\"text\" value=\"\" onFocus=\"CreerInstanceAideSaisieDate('valeurReponse_"+$var_i+"_Date');\" />

Donc lorsque l'élément prend le focus, j'appelle la fonction suivante:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function CreerInstanceAideSaisieDate(id){
	$("#"+id).datepicker({
		changeMonth:true,
		changeYear:true,
		firstDay:1,
		dateFormat:"dd/mm/yy",
		dayNames:['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
		dayNamesMin:['Di','Lu','Ma','Me','Je','Ve','Sa'],
		dayNamesShort:['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
		monthNames:['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
		monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jui','Jul','Aoû','Sep','Oct','Nov','Déc'],
		onClose:
			function(dateText,inst){
				$('#'+id).datepicker = null;
			}
	});
}

Donc pour moi, logiquement, lorsque le champ prend le focus, on instancie sur l'input le calendrier.

Mais cela ne fonctionne pas très bien, ou plutôt que partiellement.

Alors sous IE7/8 je n'ai eu aucun problème, le champs obtient le focus et affiche correctement le calendrier. Par coutre sous IE9 ou Firefox 8, j'ai ce soucis que lors du premier focus, rien ne s'affiche. Mais après coup, lorsque je quitte le champ et que je redonne le focus à ce dernier, là tout fonctionne.

J'ai testé plusieurs choses, comme par exemple de rajouter un $('#'+id).focus(); à la fin de la fonction JS qui instancie le calendrier. Cela fonctionne, mais c'est hyper hyper lent et je ne comprend pas pourquoi...


Je ne sais pas si vous avez eu le même problème ou encore si vous voyez d’où cela pourrais venir, mais je suis un peu en manque d'idées .

Donc je vous remercie d'avance pour toute l'aide que vous pourriez me fournir afin de pallier ce problème ^^

Cordialement

[tidus_6_9_2]

J'ai résolus le problème.

Je vous explique en détail :

Donc requête qui me permet d'ajouter l'html dans une div:

Code :

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
 
$.ajax({
			type:"POST",
			url:'test.php',
			data: ({param:params}),
			async:true,
			dataType:'text',
			success:
				function(data){
 
					$("#PopupQuestionReponse").dialog("open");
					$('#Reponse').html(data);
 
 
					$(".TestDate").datepicker({
						changeMonth:true,
						changeYear:true,
						firstDay:1,
						dateFormat:"dd/mm/yy",
						dayNames:['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
						dayNamesMin:['Di','Lu','Ma','Me','Je','Ve','Sa'],
						dayNamesShort:['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
						monthNames:['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
						monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jui','Jul','Aoû','Sep','Oct','Nov','Déc']
					});
					//$("#PopupQuestionReponse").dialog("open");
				}
		});

Pour l'HTML j'ai fait la modification suivante:

Code :

1
2
 
<input id=\"valeurReponse_"+$var_i+"_Date\" Type=\"text\" value=\"\" class=\"TestDate\" />

J'ai donc ajouté la class "TestDate". Ensuite, une fois que tous les élément sont crée dans la requête ajax (après le $('#Reponse').html(data) j'ai instancié le datepicker sur tous les éléments qui ont la class "TestDate".

Avec ça le tour est joué

Bon cela ne m'explique toujours pas pourquoi sur mon idée de base ne fonctionnait pas. Je laisse le sujet ouvert pour les explications

Cordialement