[AJAX] Remplissage de champs automatique

**Ben-o** · 18/01/2010, 15h44

Merci beaucoup, j'ai encore quelques questions.

J'ai supprimé la fonction go.
Puis-je également supprimer la fonction getXhr ?
Le premier code que tu m'as donné correspond-t-il à la fonction Ajax.Refresh ? Car la fonction appelée est "Ajax.Request".

Dans cette fonction, il me faut remplacer XXXXXX par la valeur de "nom", mais comment récupérer la valeur d'un input "autocomplété" ?

**emmanuel.remy** · 18/01/2010, 16h31

Envoyé par Ben-o

Merci beaucoup, j'ai encore quelques questions.

J'ai supprimé la fonction go.
Puis-je également supprimer la fonction getXhr ?

Oui

Le premier code que tu m'as donné correspond-t-il à la fonction Ajax.Refresh ? Car la fonction appelée est "Ajax.Request".

C'est bien Ajax.request

Dans cette fonction, il me faut remplacer XXXXXX par la valeur de "nom", mais comment récupérer la valeur d'un input "autocomplété" ?

Code :

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

<input type="text" name="nom" id="nom" ...

donc XXXX vaut document.getElementById("nom").value

ERE

**Ben-o** · 18/01/2010, 17h44

Merci, voici donc à quoi ressemble ma page HTML :

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
 
...
 
<script type="text/javascript" src="../../scripts/prototype.js"></scrip>
<script type="text/javascript" src="../../scripts/scriptaculous.js"></scrip>
 
</head>
 
<body>
	<form>
		<fieldset>
			<legend>Champs liés</legend>
				<label>Nom contact</label>
					<input type="text" name="nom" id="nom" onchange='goPrenom()' />
						<div id="auto_noms"></div>
							<script type="text/javascript">
								new Ajax.Autocompleter (
									'nom',
									'auto_noms',
									'autocompleter_noms.php',
									{method: 'post', paramName: 'nom'}
								);
							</script>
 
				<label>Prénom contact</label>
					<input type="text" name="prenom" id="prenom" />
						<div id='auto_prenom'>
							<script type="text/javascript">
								new Ajax.Request('ajax_autocomplete2.php', {
									method: 'post',
									parameters : "nom_contact=" + document.getElementById("nom").value
									onSuccess: function(transport) {
										//transport.responseText est le texte récupéré par l'appel
										//Inscrire le prenom dans la zone de texte  
									});
								});
							</script>
						</div>
		</fieldset>
	</form>
</body>

Ca ne fonctionne toujours pas. Il me manque à renseigner le onSuccess, mais comment ?

Le boulet ^^

**emmanuel.remy** · 18/01/2010, 18h37

Certainement ainsi:

Code :

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

document.getElementById("prenom").value=transport.responseText

ERE

**Ben-o** · 19/01/2010, 10h56

Merci.

Il doit me manquer quelque chose, le prénom n'est pas récupéré

Fichier test_autocomplete.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
30
31
32
33
34
35
<script type="text/javascript" src="../../scripts/prototype.js"></script>
<script type="text/javascript" src="../../scripts/scriptaculous.js"></script>
 
</head>
 
<body>
	<form>
		<fieldset>
			<label>Nom contact</label>
				<input type="text" name="nom" id="nom" onchange='goPrenom()' />
					<div id="auto_noms"></div>
						<script type="text/javascript">
								new Ajax.Autocompleter (
								'nom',
								'auto_noms',
								'autocompleter_noms.php',
								{method: 'post', paramName: 'nom'}
							);
						</script>
 
			<label>Prénom contact</label>
				<input type="text" name="prenom" id="prenom" />
					<script type="text/javascript">
						new Ajax.Request('ajax_autocomplete.php', {
							method: 'post',
							parameters : "nom_contact=" + document.getElementById("nom").value
							onSuccess: function(transport) {
document.getElementById("prenom").value=transport.responseText
								});
							});
						</script>
					</div>
	</fieldset>
</form>
</body>

Fichier ajax_autocomplete.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php
 
	if(isset($_POST["nom_contact"])) {
		include ('../fonction_connexion.php');
		$res = mysql_query("SELECT * FROM t_gestion_contacts WHERE nom_contact = ".$_POST["nom_contact"]."");
		while($row = mysql_fetch_assoc($res)) {
			//echo "<input type='text' value='".$row["prenom_contact"]."' />";
			echo $row["prenom_contact"];
			break; //peut pas avoir plusieurs prénoms sinon 1 N aberrant		
		}
	}
?>

**emmanuel.remy** · 19/01/2010, 11h08

Ton script php est il au moins appelé ?

ERE

**Ben-o** · 19/01/2010, 11h25

Il est appelé dans le Ajax.Request non ?

**emmanuel.remy** · 19/01/2010, 11h35

Oui, mais est il réellement appelé sur ton server ?

**Ben-o** · 19/01/2010, 12h00

Le script ne me récupérait rien en effet, une erreur au niveau de la syntaxe de la requête.
J'ai rectifié et testé, le prénom est bien récupéré par la requête maintenant, par contre toujours pas dans mon champ prénom

**emmanuel.remy** · 19/01/2010, 12h21

Zen...

Dans le onSuccess mets un alert(transport.responseText); pour vérifier que tu récupères bien le prénom.

ERE

**Ben-o** · 19/01/2010, 12h35

J'ai rajouté l'"alert" de cette manière :

Code :

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

1
2
3
4
5
6
7
8
new Ajax.Request('ajax_autocomplete2.php', {
	method: 'post',
	parameters : "nom_contact=" + document.getElementById("nom").value
	onSuccess: function(transport) {
		document.getElementById("prenom").value=transport.responseText;
		alert(transport.responseText);
	});
});

mais il ne m'affiche rien, le prénom n'est donc pas récupéré.
Qu'est-ce qui peut clocher ?

**emmanuel.remy** · 19/01/2010, 12h42

Mets le alert avant le document.get..., parce que si c'est lui qui fait planter...

ERE

**Ben-o** · 19/01/2010, 14h10

Pas de message non plus en mettant le alert avant le document.get

Sinon c'est normal qu'il y ait une parenthèse entre l'accolade et le point virgule pour fermer le onSuccess ? Parce qu'il y en a déjà une (de parenthèse) pour fermer le new Ajax.Request.

**emmanuel.remy** · 19/01/2010, 14h41

Non...et manque une virgule sur la ligne parameters ... c'est sûr que cela fonctionne moins bien.

Code :

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

1
2
3
4
5
6
7
8
9
new Ajax.Request('ajax_autocomplete2.php', {
	method: 'post',
	parameters : "nom_contact=" + document.getElementById("nom").value,
	onSuccess: function(transport) {
		alert(transport.responseText);
		document.getElementById("prenom").value=transport.responseText;
	} //onSuccess
       } //options
); //Ajax.Request

ERE

**E.Bzz** · 19/01/2010, 15h19

Bonjour,
désolé si j'enfonce des portes ouvertes (j'ai pas absolument tout lu en détail

) mais :

les dernières versions du scripts font toujours référence à une fonction goPrenom() alors que sa déclaration n'est présente nulle part
Dans le Ajax.Request() associé au prénom, rien ne semble indiquer, justement, l'association avec un évènement de l'input "prenom". Alors que c'est bien le cas dans les paramètres du Ajax.Autocompleter () associé au "nom"

Mais bon, je n'utilise pas ces librairies

A+

**Ben-o** · 19/01/2010, 15h29

Effectivement, je viens de me rendre compte de cela.

J'ai donc essayé ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
	function goPrenom(){
		new Ajax.Request('ajax_autocomplete2.php', {
			method: 'post',
			parameters: "nom_contact=" + document.getElementById("nom").value,
			onSuccess: function(transport) {
				alert(transport.responseText);
				document.getElementById("prenom").value=transport.responseText;
			} // onSuccess
		} // options
		); // Ajax.Request
	} // function goPrenom
</script>

J'ai bien l'alerte qui s'affiche (uniquement quand j'actualise la page) mais vide

**emmanuel.remy** · 19/01/2010, 15h49

@E.Bzz: merci je n'avais pas vérifié cette partie

@Ben-o: publie l'état de tes scripts car si tu as fait une fonction goPrenom je ne suis pas persuadé que tu l'appelles correctement

ERE

**Ben-o** · 19/01/2010, 16h24

Voici donc la page test_autocomplete2.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script type="text/javascript" src="../../scripts/prototype.js"></script>
<script type="text/javascript" src="../../scripts/scriptaculous.js"></script>
 
</head>
 
<body>
	<form>
		<fieldset>
			<legend>Champs liés</legend>
				<label>Nom contact</label>
					<input type="text" name="nom" id="nom" onchange='goPrenom()' />
						<div id="auto_noms"></div>
							<script type="text/javascript">
								new Ajax.Autocompleter (
									'nom',
									'auto_noms',
									'autocompleter_noms.php',
									{method: 'post', paramName: 'nom'}
								);
							</script>
 
				<label>Prénom contact</label>
					<input type="text" name="prenom" id="prenom" />
						<div id='auto_prenom'>
							<script type="text/javascript">
								function goPrenom(){
									new Ajax.Request('ajax_autocomplete2.php', {
										method: 'post',
										parameters: "nom_contact=" + document.getElementById("nom").value,
										onSuccess: function(transport) {
											alert(transport.responseText);
											document.getElementById("prenom").value=transport.responseText;
										} // onSuccess
									} // options
									); // Ajax.Request
								} // function goPrenom
							</script>
						</div>
		</fieldset>
	</form>
</body>
 
</html>

et la page ajax_autocomplete2.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
<?php
 
$nom_contact_recupere = $_POST["nom_contact"];
 
        if(isset($nom_contact_recupere)) {
                include ('../fonction_connexion.php');
                $res = mysql_query("SELECT * FROM t_gestion_contacts WHERE nom_contact = '$nom_contact_recupere'");
                while($row = mysql_fetch_assoc($res)) {
                        //echo "<input type='text' value='".$row["prenom_contact"]."' />";
                        echo $row["prenom_contact"];
                        break; //peut pas avoir plusieurs prénoms sinon 1 N aberrant           
                }
        }
?>