Formulaire assez complexe

**Raitei** · 14/06/2012, 13h28

Bonjour,

Je viens de remodifier le code avec ce que tu as envoyé, l'input ne s'autocomplète toujours pas. :s

**Torgar** · 14/06/2012, 13h49

Reposte ton code complet parce que j'ai vérifié avec un jeu d'essai en me basant sur tes champs de tables et ça fonctionnait.

Tu as pas d'erreur de javascript dans la console ? Idem si tu as firebug regarde si l'ajax fait bien ce qu'il doit faire (envoie + réponse)

**Raitei** · 14/06/2012, 16h54

ok;

fichier type_objet.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
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
<html>
    <head>
        <title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
        <script type="text/javascript" src="./jquery.min.js"></script>
        <script type="text/javascript" src="./jquery-ui.min.js"></script>
        <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
			*/
			/**
			* 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){
						var leselect = xhr.responseText;
 
						$('#autocomplete').autocomplete({
							source: eval(leselect)
						});
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax.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
				var sel = document.getElementById('type_objet');
				var idtypeobjet = sel.options[sel.selectedIndex].value;
				xhr.send("idType_objet="+idtypeobjet);
			}
        </script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>type_objet</label>
				<select name='type_objet' id='type_objet' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("paper");
						$res = mysql_query("SELECT * FROM type_objet ORDER BY name_typeobjet");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id_typeobjet"]."'>".$row["name_typeobjet"]."</option>";
						}
					?>
				</select>
				<label>objet</label>
				<div id="objet"><input type="text" id="autocomplete" /></div>
 
			</fieldset>
		</form>
	</body>
</html>

fichier ajaxObjet.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
if(isset($_POST["idType_objet"])){
    mysql_connect("localhost","root","");
    mysql_select_db("paper");
    $res = mysql_query("SELECT * FROM objet WHERE id_type_objet=".$_POST["idType_objet"]);
    while($row = mysql_fetch_assoc($res)){
        $output[] = $row["name_objet"];
    }
}
 
// Utilise l'un ou l'autre
echo json_encode($output);
?>

par contre je n'ai pas de firebug, enfin je ne sais pas étant donné que je ne l'ai jamais utilisé

Merci de l'aide

**Torgar** · 14/06/2012, 17h10

Je viens de refaire le test avec le code que tu as mis (donc le mien) et ça fonctionne. Si je tape la lettre "D" dans l'input après avoir choisi la catégorie "Ordinateurs", j'ai bien "Dell" qui m'est proposé.

Tu n'aurais pas un lien pour que l'on voit le problème ? Tu n'as pas d'erreur javascript qui remonte dans la console du navigateur ?

Sinon Firebug (google) est une extension pour Firefox qui permet pas mal de chose pour les développeurs, et notamment de voir les états des requêtes AJAX.

Si installée, tu ouvres la console, tu cliques sur l'onglet Réseau puis l'onglet XHR. Là tu choisis ta catégorie et tu peux voir dans Firebug l'état de la requête AJAX avec les données envoyées et celles reçues.

Edit : Je pense pas qu'il y ai une différence mais.... rajoute le fermeture de connexion au serveur MySQL dans le fichier AJAX.

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
if (isset($_POST["idType_objet"])){
    $link = mysql_connect("localhost","root","");
    mysql_select_db("test", $link);
    $res = mysql_query("SELECT * FROM objet WHERE id_type_objet=".$_POST["idType_objet"]);
    while($row = mysql_fetch_assoc($res)){
        $output[] = $row["name_objet"];
    }
    mysql_close($link);
}
 
// Utilise l'un ou l'autre
echo json_encode($output);
?>

**Raitei** · 18/06/2012, 10h52

Bonjour, désolé de ne répondre que maintenant, mais cette fin de semaine a été plutôt difficile pour moi, je ne vais pas en parler mais bon.

Pour ce qui est de l’accessibilité de l'appli malheureusement elle est en locale et ne verra pas le jour d'une autre façon donc je ne peux même pas la partager.

Aucun erreur niveau du navigateur tout s'execute correctement, c'est quand même bizarre que pour toi ça fonctionne mais pas pour moi...

J'ai rajouté le petit bout de code dans le Ajax, mais rien n'y change. Aucune proposition. Je vais revérifier quelques trucs pour voir...

**Torgar** · 18/06/2012, 11h00

On va voir si tu as bien un retour AJAX en insérant un alert() :

Code :

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

1
2
3
4
5
6
7
8
if(xhr.readyState == 4 && xhr.status == 200){
    alert(xhr.responseText);
    var leselect = xhr.responseText;
 
    $('#autocomplete').autocomplete({
        source: eval(leselect)
    });
}

**Raitei** · 18/06/2012, 11h39

Envoyé par Torgar

On va voir si tu as bien un retour AJAX en insérant un alert()

Je viens de l'ajouter et rien ne s'est affiché. J'ai sélectionné quelque chose dans la liste et tenté l'autocomplete mais rien d'affiché. Donc le soucis c'est ça x) je crois je vais abandonner l'auto-complétion *.*

**Torgar** · 18/06/2012, 11h53

As-tu essayé d'installer l'extension Firebug sur ton firefox ?

Avec ça tu pourras voir ce qui cloche exactement en analysant la procédure pas à pas.

Un excellent article à son sujet : http://eric-pommereau.developpez.com...l-web/firebug/

**Raitei** · 18/06/2012, 13h10

Envoyé par Torgar

As-tu essayé d'installer l'extension Firebug sur ton firefox ?

Avec ça tu pourras voir ce qui cloche exactement en analysant la procédure pas à pas.

Un excellent article à son sujet : http://eric-pommereau.developpez.com...l-web/firebug/

Bah euh, j'ai pas firefox, l'appli devra tourner sous IE, et sinon j'ai chrome d'installé sur le pc x)

(je précise que ça ne fonctionnait pas sur les deux, au cas ou ^^)

**Torgar** · 18/06/2012, 13h22

Dans Chrome,

Clic-droit sur ta page et "inspecter un élément".

Ensuite tu cliques sur "Network", tu choisis un élément de la liste déroulante (Ordinateurs|Imprimantes). Tu auras une ligne qui va s'ajouter dans le nouveau panneau.
Tu cliques dessus, tu regardes si il y a bien une partie "Form data" dans l'onglet "Headers" et qu'elle contient bien une ligne du genre : idType_objet : X

Maintenant tu regardes dans l'onglet "Response" et tu nous dit ce qu'il y a.

**Raitei** · 18/06/2012, 14h12

Bon, je suis plutôt con... J'avais pas vu que entre temps, ton fichier ajax, tu l'avais appelé ajax.php x) moi c'était ajaxObjet.php donc déjà l'erreur première venait de là.

Maintenant, j'ai les alert :

call to undefined function json_encode()

Voilà ma petite erreur.

**Torgar** · 18/06/2012, 15h13

Ah oui en effet, j'avais oublié de le changer aussi

Tu dois tourner avec une vieille version de PHP. Soit tu mets à jour ta version de PHP soit tu "rajoutes" la fonction comme indiqué dans les commentaires de la page de la fonction json_encode()

Formulaire assez complexe

JavaScript

Discussions similaires

Partager

Partager