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

Version imprimable

15/09/2010, 17h04
skins

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

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 ? :roll:
15/09/2010, 19h49
andry.aime

Bonsoir,

Le tutoriel :fleche: Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

A+.
15/09/2010, 19h56
skins

Citation:

Envoyé par andry.aime

Bonsoir,

Le tutoriel :fleche: 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 :roll:
15/09/2010, 19h59
andry.aime

Citation:

Envoyé par skins

mais pour le mien ça bloc :roll:

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

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

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
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:

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

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 !

Citation:

Envoyé par skins

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
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>
...

Citation:

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:

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:

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:

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

16/09/2010, 11h25
Bovino

Citation:

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 ?
16/09/2010, 11h39
skins

1 pièce(s) jointe(s)

Citation:

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 :roll:, ce que je sais c'est que rien ne se passe sur la page

Citation:

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

Citation:

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
16/09/2010, 11h51
gwyohm

Citation:

Envoyé par skins

Comment je peut le vérifier :roll:

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é...

Citation:

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 ?
16/09/2010, 12h10
skins

Citation:

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 :ccool:

Citation:

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 ?
16/09/2010, 16h48
skins

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

Code:

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