Débutant. UI Datepicker et Dialog, lorsque j'intègre le champ "input", le Datepicker ne fonctionne plus

**SPACHFR** · 20/10/2010, 16h47

Bonjour,

J'essaie d'inclure dans une boite de dialogue générée via le plugin "Dialog" un "input text" associé au plugin Datepicker.

Dans un premier temps j'ai testé les 2 plugins "cote à cote" sans problème. j'ai bien ma boite de dialogue et mon input et bien associé à Datepicker.

Cependant lorsque j'intègre le champ "input" dans le Dialog, le Datepicker ne fonctionne plus. De plus je n'ai aucun message d'erreur.

Je présume que mon manque de connaissance de jquery est en cause.....
Pourriez vous m'indiquer comment faire ?

Merci

Ci-dessous ma page de test.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<html>
<head>
<meta charset="utf-8">
<title>Essai framework Jquery</title>
<link type="text/css" href="css/Themes/start/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<!--
<script type="text/javascript" src="js/development-bundle/ui/minified/jquery.ui.slider.min.js"></script>
-->
<script type="text/javascript">
$(document).ready(function() 
{
  $('#date').datepicker({ 
					showAnim : 'fold',
					dateFormat: 'yy-mm-dd',
					changeMonth: true,
					changeYear: true,
					onClose : function(){
								//alert($('#date').val());
								}
					});
  	$(function() {
		$("button").button();
		$( "#dialog" ).dialog( "destroy" );
		$( "#dialog-modal" ).dialog({
			autoOpen : false,
			height: 240,
			modal: true,
			show: "drop",
			hide: "puff",
			speed:"slow",
			close: function(){
					 $('#dialog-modal').empty();
					 //$( "#dialog-modal" ).dialog( "destroy" );
					}
			});
		$('#go').click(function(){ 
						 $('#dialog-modal').dialog("option", "position", 'center' );
						 $( "#dialog-modal" ).dialog( "open" );
						 $( "#dialog-modal" ).append('<input type="text" name="date" id="date" />');
						 //setTimeout(function(){$("#dialog-modal").dialog("close");},2000);
						 return false;
						});
 
	});
 
});            
</script>
<style>
</style>
</head>
<body>
<div id="dialog-modal" title="test dialog box">
</div>
<input type="text" name="date" id="date" />
<button id="go">Open the box</button>
<br>
<div>
<button>Button Label</button> 
</div>
</body>
</html>

**coach759** · 20/10/2010, 17h30

Bonjour,

Essai de mettre ton <input id="date"/> dans ton <div id="dialog-modal">, car actuellement tu l'ajoutes après dans ton div (à l'ouverture du dialog), donc peut être qui n'est pas considérer comme un datepicker (car le datepicker est déclaré en js au chargement de la page)

**SPACHFR** · 20/10/2010, 17h57

Merci pour cette réponse.
J'avais également pensé à ça (si j'ai bien compris) mais le résultat est idem..

Code :

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

1
2
3
4
5
6
7
8
 
$('#go').click(function(){ 
	$( "#dialog-modal" ).append('<input type="text" name="date" id="date" />');
	$('#dialog-modal').dialog("option", "position", 'center' );
        $( "#dialog-modal" ).dialog( "open" );
	//setTimeout(function(){$("#dialog-modal").dialog("close");},2000);
	return false;
});

**coach759** · 20/10/2010, 18h06

Code :

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

$( "#dialog-modal" ).append('<input type="text" name="date" id="date" />');

-> Je sais pas si tu as bien compris, car là tu ajoutes ton input APRES avoir déclaré ton datepicker.

Il faudrait que dès le debut tu fasse :

Code :

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

1
2
3
<div id="dialog-modal" title="test dialog box">
<input type="text" name="date" id="date" />
</div>

Et que tu enlève

Code :

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

1
2
3
$('#dialog-modal').empty();
et
 $( "#dialog-modal" ).append('<input type="text" name="date" id="date" />');

**SPACHFR** · 21/10/2010, 09h53

Effectivement en suivant tes conseils le Datepicker s'ouvre... tout seul.
Mais impossible de le fermer. J'ai une erreur dans la console d'erreur de FF.

Cependant, cela veux dire que je ne peux pas modifier dynamiquement le contenu du Dialog en incluant un Datepicker ?

**coach759** · 21/10/2010, 11h06

Bonjour,

le Datepicker s'ouvre... tout seul.

C'est parce que le focus est donné au champs input, et donc ça ouvre le datepicker
Tu peux ajouter " showOn: 'button' " dans ta déclaration de datepicker.

Cependant, cela veux dire que je ne peux pas modifier dynamiquement le contenu du Dialog en incluant un Datepicker ?

Tu peux modifier dynamiquement ton dialog, mais dans ce cas là, il faut redéclarer ton datepicker après avoir inserer ton input.

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
 
$('#go').click(function(){ 
	 $('#dialog-modal').dialog("option", "position", 'center' );
	 $( "#dialog-modal" ).dialog( "open" );
	 $( "#dialog-modal" ).append('<input type="text" name="date" id="date" />');
 
	 $('#date').datepicker({ 
		showAnim : 'fadeIn',
		dateFormat: 'yy-mm-dd',
		changeMonth: true,
		changeYear: true,
		onClose : function(){
		     alert($('#date').val());
		}
	});
	 return false;
	});

N'hésite pas si tu as encore besoin d'aide

**SPACHFR** · 21/10/2010, 14h16

Merci pour toute ces informations.
En suivant l'ensemble de tes conseils, j'ai le résultat souhaité.
Donc on peu dire que le problème est résolu.
Dommage qu'une seul déclaration du datepicker ne suffise pas pour gérer l'ensemble des sélecteurs associés y compris ceux ajoutés dynamiquement par DOM.
Si le moyen existe je suis preneur....

Débutant. UI Datepicker et Dialog, lorsque j'intègre le champ "input", le Datepicker ne fonctionne plus

jQuery

Discussions similaires

Partager

Partager