[AJAX] verification de date par ajax lors de selection dans le calendrier developpez

**yassirzine** · 05/05/2009, 23h28

Bonsoir tout le monde
j'ai un calendrier en javascript que je l'ai pris du forum.
methode d'utilisation:tu choisis une date et elle sera afficher dans un input :<input type="text" value="" onclick="var toto = new calendar(this);"> avec ce format dd/mm/yyyy.(voici le lien du calendrier vous y trouvez un demo http://www.developpez.net/forums/d64...s-mieux-mieux/ )
j'ai une table (remplie avec des donnees)en oracle qui a deux colonnes(date et commentaire) .
Mon probleme:je voudrais recuperer la date choisiee du calendrier pour l'utiliser a la verification dans ma base de donnees.
Exemple: dans ma base de donnees j'ai une ligne (date,commentaire)=(01/05/2009,je vais bien)
Disant que l'utilisateur a choisit cette date :le 01/05/2009 ,d'abord on recupere la date choisiee avec get ou post et avec une requete sql on regarde dans la table pour voir si il existe une date pareille ou non .Dans notre exemple il va trouver une date pareille et le programme deverais afficher je vais bien.
ils m'ont dit que c'est possible avec ajax mais je sais pas comment faire

svp aidez moi

**andry.aime** · 06/05/2009, 08h03

Salut,

Code HTML :

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

<input type="text" value="" onclick="var toto = new calendar(this);" onchange="rechercheevt(this)">

Code JAVASCRIPT :

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
function createXHR() 
{
    var request = false;
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (err3) {
		try {
			request = new XMLHttpRequest();
		}
		catch (err1) 
		{
			request = false;
		}
            }
        }
    return request;
}
function rechercheevt(obj) 
{
	var xhr=createXHR();
	xhr.open("POST", "page.php",true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.onreadystatechange = function()
		{ 
			if (xhr.readyState == 4 && xhr.status == 200) 
				{
					alert(xhr.responseText);
				}
		}
	var donnee='datec='+obj.value;
	xhr.send(donnee); 
}

Code PHP :

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

1
2
3
4
5
6
7
8
9
10
<?php
	if(isset($_POST['datec']) )
	{
		//La requete pour la recherche ici;
		//Si elle trouve un enregistrement
		echo'$rows['champs']';
		//Sinon
		echo'Aucune date trouvé';
	}
?>

PS: voir les tutoriels sur AJAX
http://ajax.developpez.com/cours

**yassirzine** · 06/05/2009, 13h06

merci pour ta reponse

voila le code du calendrier apres la modification

modification et la fonction rechercheevt(obj) sont a la fin)

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Démo calendrier v2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
	/*###### Bouton gauche des mois ######*/ 
	.MonthLeft{
		width:14px;
		height:50px;
		background:url('images/static.png') -112px -250px;
		position:absolute;
		left:-2px;
		top:0px;
	}
	.MonthLeftOver{
		width:14px;
		height:50px;
		background:url('images/static.png') -126px -250px;
		position:absolute;
		left:-2px;
		top:0px;
	}
	.MonthLeftClick{
		width:14px;
		height:50px;
		background:url('images/static.png') -140px -250px;
		position:absolute;
		left:-2px;
		top:0px;
	}
	/*###### Bouton droit des mois ######*/ 
	.MonthRight{
		width:14px;
		height:50px;
		background:url('images/static.png') -154px -250px;
		position:absolute;
		right:-2px;
		top:0px;
	}
	.MonthRightOver{
		width:14px;
		height:50px;
		background:url('images/static.png') -168px -250px;
		position:absolute;
		right:-2px;
		top:0px;
	}
	.MonthRightClick{
		width:14px;
		height:50px;
		background:url('images/static.png') -182px -250px;
		position:absolute;
		right:-2px;
		top:0px;
	}
 
	/*###### Bouton haut des années ######*/ 
 
	.YearTop{
		width:14px;
		height:25px;
		background:url('images/static.png') -196px -250px;
		position:absolute;
		right:-2px;
		top:0px;
	}
	.YearTopOver{
		width:14px;
		height:25px;
		background:url('images/static.png') -210px -250px;
		position:absolute;
		right:-2px;
		top:0px;		
	}
	.YearTopClick{
		width:14px;
		height:25px;
		background:url('images/static.png') -224px -250px;
		position:absolute;
		right:-2px;
		top:0px;		
	}
	/*###### Bouton bas des années ######*/ 
 
	.YearBottom{
		width:14px;
		height:25px;
		background:url('images/static.png') -196px -275px;
		position:absolute;
		right:-2px;
		bottom:0px;		
	}
	.YearBottomOver{
		width:14px;
		height:25px;
		background:url('images/static.png') -210px -275px;
		position:absolute;
		right:-2px;
		bottom:0px;			
	}
	.YearBottomClick{
		width:14px;
		height:25px;
		background:url('images/static.png') -224px -275px;
		position:absolute;
		right:-2px;
		bottom:0px;			
	}
	/*###### conteneur principal ######*/ 
	.calendar{
		width:300px;
		height:250px;
		background:url('images/static.png') no-repeat;
		position:absolute;
		left:400px;
		font-weight:bold;
		font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
		font-size:11px;
		text-align:center;
	}
 
	.contentMonth{
		width:130px;
		height:50px;
		background:url('images/static.png') -100px -300px repeat-x;
		position:absolute;
		left:85px;
		top:5px;
	}
	.pMonth{
		width:130px;
		height:50px;
		line-height:50px;
		display:block;
	}
	.contentDay{
		width:56px;
		height:50px;
		line-height:25px;
		text-align:center;
		background:url('images/static.png') 0px -250px;
		position:absolute;
		left:15px;
		top:5px;
	}
	.contentYear{
		width:56px;
		height:50px;
		background:url('images/static.png') -56px -250px;
		position:absolute;
		left:230px;
		top:5px;
	}
	.pYear{
		width:42px;
		height:50px;
		line-height:50px;
		display:block;
	}
	.contentListDay{
		width:290px;
		height:155px;
		overflow:hidden;
		position:absolute;
		left:5px;
		top:90px;
 
	}
	.contentListDay ul{
		width:100%;
		height:100%;
		position:absolute;
		margin:0px;
		padding:2px 0px 0px 1px;
	}
	.dayCurrent{
		width:41px;
		height:25px;
		line-height:25px;
		display:block;
		float:left;
		text-align:center;
		color:#000000;
		font-weight:bold;
		background:url('images/static.png') -41px -352px;
 
			}
			this.from.style.display = "block" ;
			this.from.style.left = 0 + "px";
			this.to.style.left = - (this.from.parentNode.offsetWidth )+ "px";
			this.to.style.display = "block";
			//Posionement vertical
			this.to.style.top = 0 + "px";
			this.from.style.top = 0 + "px" ;
		}
		else if(this.direction == 'bottom'){
			if(this.currentIndex == this.elementToSlide.length-1){
				this.from = this.elementToSlide[this.currentIndex];
				this.to = this.elementToSlide[0]; // dernier élément
			}
			else{
				this.from = this.elementToSlide[this.currentIndex];
				this.to = this.elementToSlide[this.currentIndex+1];
			}
			this.from.style.display = "block" ;
			this.from.style.top = 0 + "px";
			this.to.style.top = - (this.from.parentNode.offsetHeight )+ "px";
			this.to.style.display = "block";
			//Posionement horizontal
			this.to.style.left = 0 + "px";
			this.from.style.left = 0 + "px" ;
		}
		else if(this.direction == 'top'){
			if(this.currentIndex == 0){
				this.from = this.elementToSlide[this.currentIndex];
				this.to = this.elementToSlide[this.elementToSlide.length-1]; // dernier élément
			}
			else{
				this.from = this.elementToSlide[this.currentIndex];
				this.to = this.elementToSlide[this.currentIndex-1];
			}
			this.from.style.display = "block" ;
			this.from.style.top = 0 + "px";
			this.to.style.top = (this.from.parentNode.offsetHeight )+ "px";
			this.to.style.display = "block";
			//Posionement horizontal
			this.to.style.left = 0 + "px";
			this.from.style.left = 0 + "px" ;
		}
	};
 
	calendar.prototype.fadePic = function (current,up){
		this.calendar.style.display = "block";
		this.opacite = current ;
		this.up = up ;
 
		if (this.opacite< 100 && this.up){
			this.opacite+=3;
			this.IsIE?this.calendar.filters[0].opacity=this.opacite:this.calendar.style.opacity=this.opacite/100;
			var me = this;
			this.timer = setTimeout(function(){me.fadePic(me.opacite,true)},25);
		}
		else{
			clearTimeout(this.timer);
			this.timer = null;
			this.up = false;
		}
	}
 
 
 
 
 
function createXHR() 
{
    var request = false;
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (err3) {
		try {
			request = new XMLHttpRequest();
		}
		catch (err1) 
		{
			request = false;
		}
            }
        }
    return request;
}
function rechercheevt(obj) 
{
	var xhr=createXHR();
	xhr.open("POST", "page.php",true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.onreadystatechange = function()
		{ 
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
				{
					alert(xmlhttp.responseText);
				}
		}
	var donnee='date_choisiee='+obj.value;
	xhr.send(donnee); 
}
	</script>
</head>
<body>
exemple simple : 
<input type="text" value="" onclick="var toto = new calendar(this);" onchange="rechercheevt(this)">
 
</body>
</html>

et voila le code php:

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
<?php
	if(isset($_POST['date_choisiee']) )
	{
$conn = oci_connect('scott', 'tiger', 'orcl');
$sql = oci_parse($conn, 'select calendrier.date_choisiee,calendrier.hid from calendrier 
where date_choisiee='.$_POST['date_choisiee'].'');
oci_execute($sql);
while ($row = oci_fetch_array($sql)){
		//La requete pour la recherche ici;
		//Si elle trouve un enregistrement
		echo'$rows['date_choisiee']';
                echo'$rows['hid']';
 
		//Sinon
		echo'Aucune date trouvé';
	}}
?>

ma table a deux colonnes(date_choisiee et hid)
je sais pas pourquoi ca marche pas pourtant je vois que le code est bon
Merci encore une fois

**andry.aime** · 06/05/2009, 13h16

Salut, la chaine est tronquée ici

echo'$rows['date_choisiee']';
echo'$rows['hid']';

Code :

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

1
2
echo $rows['date_choisiee'];
echo $rows['hid'];

Vérifies les formats de la date postée et celui de la table.

**yassirzine** · 06/05/2009, 14h12

merci pour tes reponses

j'ai modifie ce que tu m'as dit mais ca marche pas
d'abord j'ai modifie input que tu m'as envoye dans le code html du calendrier (body) avec l'ancien input et j'ai mis le code javascript juste avant </script>
</head>
et le code php je l'ai mis dans une page php
le format de la date est DD/MM/YYYY
c'est ca ce que je devrais faire ?
je sais pas pourquoi ca marche pas ?

**SpaceFrog** · 06/05/2009, 14h18

perso je proposerais de rajouter un prototype au calendrier

Code :

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

1
2
 
liDay.onclick = function(){me.dayCurrent = this.innerHTML ; me.fillField(); if(me.checkDate()){me.fillField()}else{alert('selectionnez une autre date!')}};

Code :

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

1
2
3
calendar.prototype.checkDate = function(){
		VerifDateAjax(this.dayCurrent+"/"+ ((this.monthCurrent+1 == 13) ? 1:this.monthCurrent+1)+"/"+this.yearCurrent);
	}

et faire retorurner true ou false à la fonction de vérif ajax ...

[AJAX] verification de date par ajax lors de selection dans le calendrier developpez

AJAX

Vue hybride

Discussions similaires

Partager

Partager