[AJAX] Faire une requete avec Ajax suite Onchange input text

**skins** · 15/09/2010, 17h04

Bonjour
Sur mon site j'utilise un formulaire ou j'ai deux champs, date et heure (l'utilisateur choisi la date et l'heure d'un rendez-vous) je souhaite que quant l'utilisateur sélectionne une date, exécuté une requête qui va vérifié les disponibilités de cette journée.

Un coup de main svp ?

**andry.aime** · 15/09/2010, 19h49

Bonsoir,

Le tutoriel

Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

A+.

**skins** · 15/09/2010, 19h56

Envoyé par andry.aime

Bonsoir,

Le tutoriel

Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

A+.

Bonsoir andry.aime , merci pour ta réponse
en faite j'ai apprit ce tuto par-cœur et je n'arrive toujours pas a trouver une solution, j'ai réalisé tous les exemples mais pour le mien ça bloc

**andry.aime** · 15/09/2010, 19h59

Envoyé par skins

mais pour le mien ça bloc

Montres ce que tu as fait pour que l'on puisse corrigé

**skins** · 16/09/2010, 10h23

Je vous remercie pour votre aide
voilà
j'ai 2 partie comme indiqué dans le tuto :

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
 
<html>
	<head>
		<title>Mon fichier Ajax</title>
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('livre').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","semaine.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('auteur');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<input type='text' id='auteur' onchange='go()'>
 
 
				<label>Livres</label>
				<div id='livre'>
 
				</div>
			</fieldset>
		</form>
	</body>
</html>

La 2eme partie semaine.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
18
19
20
21
22
23
24
25
26
27
28
29
 
<?php
        
        if(isset($_POST["idAuteur"])){
                mysql_connect("localhost","root","pass");
                mysql_select_db("my_bd");
 
$semaine = $_POST["idAuteur"] ;
$result2=mysql_query ("SELECT COUNT(*) AS nbr FROM jos_weeks WHERE semaine='$semaine' " );
$donnees = mysql_fetch_array($result2) ;
$nbr = $donnees['nbr'] ;
 
if ($nbr != 0)
{ 
 
$res = mysql_query("SELECT * FROM jos_weeks WHERE semaine=".$_POST["idAuteur"]." ");
 
//traitement de la requête 
<table>
 
.
.
.
</table> 
 
<?php
}
}
?>

un petit coup de main svp

**gwyohm** · 16/09/2010, 10h38

Attention dans les copier/coller dans les tutos ! tu nous parles de date et heure et on se retrouve avec des livres et des auteurs !

Envoyé par skins

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
                        // GWYOHM: mettre des commentaires exacts ou pas de
                        // commentaires du tout ! Y'a pas de bouton
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						// GWYOHM: mauvais choix de nom de variable  + même remarque que plus haut 
                                                leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('livre').innerHTML = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxLivre.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('auteur');
              			// GWYOHM:  Cette syntaxe permet de récupérer la valeur d'un select ! tu es sur un input text
				idauteur = sel.options[sel.selectedIndex].value;

                                        // A remplacer par

                                        idAuteur = sel.value;
				xhr.send("idAuteur="+idauteur);
			}
		</script>
...
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<input type='text' id='auteur' onchange='go()'>
					

				<label>Livres</label>
				<div id='livre'>

				</div>
...

**skins** · 16/09/2010, 11h04

Envoyé par gwyohm

Attention dans les copier/coller dans les tutos ! tu nous parles de date et heure et on se retrouve avec des livres et des auteurs !

Bonjour gwyohm et merci pour ton aide
en fait j'ai pu modifier plusieurs choses dans le code (La majorité grâce a toi), mais je n'arrive toujours pas a avoir un résultats
Partie JS

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
 
function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
 
			function RDV(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
 
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						document.getElementById('Dispo').innerHTML = leselect;
					}
				}
				xhr.open("POST","dispo.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('text_8');
				idtext_8 = sel.value;
				xhr.send("idtext_8="+idtext_8);
			}

Partie HTML

Code :

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

1
2
3
 
 <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_8" name="Date" type="text" onchange='RDV()' /><br>
<div id="Dispo"> </div>

Partie PHP "dispo.php" (Juste un test du retour)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?php
        
        if(isset($_POST["idtext_8"])){
 
echo "Le test est OK"; 
 
}
?>
 
Je te remercie d'avance

**Bovino** · 16/09/2010, 11h25

mais je n'arrive toujours pas a avoir un résultats

C'est-à-dire ?
La requête est bien lancée ? Tu reçois une réponse ?

Tes id sont bien uniques dans la page ?
Le onchange d'un input text est lancé quand le champ perd le focus ET que sa valeur a été modifiée, c'est bien ce que tu souhaites ?

**skins** · 16/09/2010, 11h39

Envoyé par Bovino

C'est-à-dire ?
La requête est bien lancée ? Tu reçois une réponse ?

Comment je peut le vérifier

, ce que je sais c'est que rien ne se passe sur la page

Envoyé par Bovino

Tes id sont bien uniques dans la page ?

Absolument il y a un seul champ qui a le id text_8 et un seul div Dispo

Envoyé par Bovino

Le onchange d'un input text est lancé quand le champ perd le focus ET que sa valeur a été modifiée, c'est bien ce que tu souhaites ?

En fait pas vraiment, j'utilise un composant qui affiche un calendrier (voir PJ) et je souhaite que quant l'utilisateur choisi une date exécuté la requête, je pensai que le Onchange et le plus approprier

**gwyohm** · 16/09/2010, 11h51

Envoyé par skins

Comment je peut le vérifier

Avec firebug par exemple et si tu n'as pas firefox ni firebug, tu peux sans doute tracer ton php pour voir s'il est appelé...

Envoyé par skins

En fait pas vraiment, j'utilise un composant qui affiche un calendrier (voir PJ) et je souhaite que quant l'utilisateur choisi une date exécuté la requête, je pensai que le Onchange et le plus approprier

Si la valeur de ton input text est modifiée par du javascript, tu n'auras pas d'événement change.
Il faut que tu déclenches ta méthode dans le code de ton calendrier
Et si tu modifiais le champ texte à la main ?

**skins** · 16/09/2010, 12h10

Envoyé par gwyohm

Avec firebug par exemple et si tu n'as pas firefox ni firebug, tu peux sans doute tracer ton php pour voir s'il est appelé...

Si la valeur de ton input text est modifiée par du javascript, tu n'auras pas d'événement change.
Il faut que tu déclenches ta méthode dans le code de ton calendrier
Et si tu modifiais le champ texte à la main ?

j'ai utilisé un champ input texte normal pour tester et sa marche

Envoyé par gwyohm

Il faut que tu déclenches ta méthode dans le code de ton calendrier
Et si tu modifiais le champ texte à la main ?

le champs est Readonly

, comment pourrais-je inclure cette méthode ?

**skins** · 16/09/2010, 16h48

une dernière question svp
comment faire pour envoyé 2 variables au lieu d'une seule ?

**andry.aime** · 16/09/2010, 19h17

Code :

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

1
2
3
4
sel = document.getElementById('text_8');
                idtext_8 = sel.value;
                var var2="unPetitMot";
xhr.send("idtext_8="+idtext_8+"&nomVar="+var2);

[AJAX] Faire une requete avec Ajax suite Onchange input text

AJAX

Discussions similaires

Partager

Partager