[AJAX] Remplissage de champs automatique

Version imprimable

Voir 40 message(s) de cette discussion en une page

18/01/2010, 15h44
Ben-o

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é" ?
18/01/2010, 16h31
emmanuel.remy

Citation:

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

Citation:

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

Citation:

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:

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

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

ERE

Merci, voici donc à quoi ressemble ma page HTML :

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

18/01/2010, 18h37
emmanuel.remy

Certainement ainsi:

Code:

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

ERE

Merci.

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

Fichier test_autocomplete.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
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:

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		
		}
	}
?>

19/01/2010, 11h08
emmanuel.remy

Ton script php est il au moins appelé ?

ERE
19/01/2010, 11h25
Ben-o

Il est appelé dans le Ajax.Request non ?
19/01/2010, 11h35
emmanuel.remy

Oui, mais est il réellement appelé sur ton server ?
19/01/2010, 12h00
Ben-o

:boulet:

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 :roll:
19/01/2010, 12h21
emmanuel.remy

Zen...

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

ERE

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

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 ?

19/01/2010, 12h42
emmanuel.remy

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

ERE
19/01/2010, 14h10
Ben-o

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.

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

Code:

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

19/01/2010, 15h19
E.Bzz
Bonjour,
désolé si j'enfonce des portes ouvertes (j'ai pas absolument tout lu en détail :oops: ) 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 :aie:

A+

Effectivement, je viens de me rendre compte de cela.

J'ai donc essayé ça :

Code:

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

19/01/2010, 15h49
emmanuel.remy

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

@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

Voici donc la page test_autocomplete2.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
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:

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           
                }
        }
?>

19/01/2010, 16h36
emmanuel.remy

Si c'est celle-là la balise form n'a ni submit ni rien ?

ERE
19/01/2010, 16h39
Ben-o

J'ai mis une balise <form> vide pour les tests en effet. C'est ça qui bloque tu crois ?

Voir 40 message(s) de cette discussion en une page