Formulaire assez complexe

Version imprimable

08/06/2012, 14h32
Raitei

Formulaire assez complexe

Bonjour à tous, voici plusieurs jours que je planche sur un problème.

Je m'explique, je dois faire une appli web pour mon stage. Dans l'esprit elle est simple c'est un formulaire qui récupère des valeurs dans une BDD les propose et les enregistre dans une nouvelle table ensuite.

Or, beaucoup de fonctionnalités doivent être ajoutées pour respecter ce que mon tuteur me demande. Je m'explique :

Le formulaire va être composé de plusieurs input, pour l'instant rien de bien difficile. Mais aussi d'une liste déroulante (dont les valeurs sont tirées d'une table, ça j'ai réussi), cette liste est liée à un input en autocomplétion. J'ai réussi à faire ça en PHP mais j'ai un soucis c'est que pour que ça fonctionne la page est obligée d'être rechargée. Donc possible perte des données (même sûr car j'ai déjà testé ^^). J'ai donc cherché une méthode pour éviter ça car me direz vous si il n'y a qu'une liste + input c'est bon, on sélectionne en premier et basta, mais là il doit y avoir au moins 2 liste + input (en autocomplete). Donc j'ai trouvé du javascript, chose que je n'avais jamais vu avant, j'essaye de m'y faire tant bien que mal.

Avec de l'adaptation de code trouvés, j'ai réussi à faire correspondre une liste à une autre liste sans actualiser la page. Mais quand je veux faire comme en PHP avec un input autocomplete, là c'est un tout autre problème car PHP étant interprété en local et javascript par le serveur (normalement je dis pas de bétise) le PHP s’exécute en premier et donc impossible de récuperer les valeurs de la liste...

Ca me pose vraiment un gros problème car c'est le centre même de mon projet, de plus même si c'était que des listes on pourrait s'arranger pour sélectionner les listes en premières et ensuite saisir les informations. Mais le soucis c'est que je dois trouver un moyen d'ajouter le formulaire plusieurs fois et donc quand on va sélectionner les nouvelles listes, cela va réactualiser la page et perdre les valeurs...

Ce formulaire a beaucoup de champs liés c'est pour ça que c'est un peu galère, pour ça je dois utiliser du javascript ce qui est plutôt chaud quand on en a jamais fait mais j'arrive à m'en sortir avec la multitude de script/forum sur la toile, mais je n'ai pas réussi à trouver de solution à ce problème de taille.

Donc je m'adresse aujourd'hui à vous pour vous demander un peu d'aide et m'aiguiller svp :)

Merci d'avance.

Raitei.
08/06/2012, 14h41
Invité
salut,

Citation:

car PHP étant interprété en local et javascript par le serveur (normalement je dis pas de bétise)

si.

Ya ton navigateur (genre firefox).
Tu tapes www.toto.com/mapage.php

Le serveur execute le script php.
Et te renvoi du contenu genre:
Code:

1 2 3 4 <html> kikooolol <script>alert('hello')</script> </html>
Ton navigateur lis le contenu.
et execute le javascript.

Donc php est cote serveur.
et javascript cote client. (ou local mais preferes le mot client)
08/06/2012, 14h53
Raitei

Ok j'ai juste inversé c'est cool de ta part de me reprendre, j'ai inversé sans m'en rendre compte fin bref. répondre juste pour reprendre je vois pas l'intérêt.

Sinon quelqu'un a une idée pour m'orienter ? :s
08/06/2012, 15h09
Invité

Citation:

répondre juste pour reprendre je vois pas l'intérêt.

ben au contraire c'est plutot important.

Quand tu es clair. Et qu'on te reprends, tu sais que t'as tord et tu corriges. Donc tu etais pas sur de toi, maintenant oui.

Le deuxieme point, c'est que si tu construis une argumentation sur un truc bancal, ca sert a rien d'aller plus loin. Donc oui, quand je vois une erreur qui potentiellement influe le reste, je vais pas chercher plus loin.

Maintenant, j'ai du mal a te lire, et j'ai horreur de dechiffrer et de jouer a devinettes, donc je passe la main, et je ne doute absolument pas que les gens plus chaleureux t'aideront :roll:
08/06/2012, 15h16
Darkyl

Citation:

car PHP étant interprété en local et javascript par le serveur (normalement je dis pas de bétise)

galerien69 a raison, si tu dis cela à un entretien d'embauche, tu vas te faire remercier directe donc merci galerien69 de prendre le temps de corriger les petites erreurs qui peuvent couter cher.

donc quand tu pense cela:

Citation:

donc impossible de récuperer les valeurs de la liste...

tu n'as pas encore trouver le pourquoi du problème. Sans pourquoi, pas de comment...
08/06/2012, 15h17
Raitei

Ok c'est cool de ta part, je vais pas m'attarder la dessus je vois pas l'intérêt, je suis là pour régler un problème que j'ai eu et non me prendre la tête pour une inversion. Après le mec qui fait les sujets juste pour corriger ça fait un peu rire quand même, c'est sûr que c'est bien de corriger les erreurs des gens mais si ça apporte quelque chose, là dans mon cas rien du tout.

Enfin bref, y'a rien à déchiffrer, si tu comprends pas ce que j'ai écris tant pis.

Oulah, je suis pas en entretient là, je viens juste demander de l'aide pour mon soucis...

Citation:

Envoyé par Darkyl

donc quand tu pense cela:

tu n'as pas encore trouver le pourquoi du problème. Sans pourquoi, pas de comment...

Me semble avoir dis que je m'étais trompé. Je cherche justement un moyen pour récupérer la valeur et la passer dans ma requête SQL pour avoir les différents mots en auto-complétion.
08/06/2012, 15h18
Darkyl

calmos, galerien69 m'a déjà bien aider sur des topic et son but n'est pas de faire l'interessant mais réellement de corriger ce qui peut porter préjudice.

Citation:

Avec de l'adaptation de code trouvés

et si tu te sers pas de code tout fait? T'y arrive?

Attention: ce n'est pas une critique, juste que des fois, si on refais tous soit même, le problème disparait et on comprend mieux...

Je sais pas si cela à un rapport, j'ai pas tout compris a ton problème mais sache juste que pour exécuter du php, il faut recharger le code, pas de recharche->pas d'éxécution.... Donc soit tu appel une page pour le traitement et là tu vas te coltiner les problèmes récurrents de formulaire chez les amateurs, soit tu fais autrement, par ajax par ex...
08/06/2012, 15h25
Raitei

Citation:

Envoyé par Darkyl

et si tu te sers pas de code tout fait? T'y arrive?

Attention: ce n'est pas une critique, juste que des fois, si on refais tous soit même, le problème disparait et on comprend mieux...

Les codes trouvés ne sont que pour deux listes liées, un en javascript et l'autre 100% PHP.

Comme dit dans le sujet, en PHP j'avais réussi très bien mais problème d'actualisation de page. Alors que pour le javascript, je ne trouve pas le moyen de récupérer la valeur du select sans passer par l'actualisation pour l'envoi de cette valeur.

Citation:

Envoyé par Darkyl

Je sais pas si cela à un rapport, j'ai pas tout compris a ton problème mais sache juste que pour exécuter du php, il faut recharger le code, pas de recharche->pas d'éxécution.... Donc soit tu appel une page pour le traitement et là tu vas te coltiner les problèmes récurrents de formulaire chez les amateurs, soit tu fais autrement, par ajax par ex...

Merci je sais encore comment exécuter du PHP le javascript ne m'a pas encore achevé. Justement je ne vois pas comme faire...

Peut-être devrais-je découper le problème :

En gros, j'ai une liste déroulante dont les options sont tirées d'une table dans une BDD j'ai un input de type texte où l'utilisateur va saisir un texte et celui-ci doit être en autocomplétion en fonction de l'option choisie.

Exemple concret :

Liste déroulante de type d'objet : ordinateur, imprimantes
Selon le choix devront apparaître en autocomplétion :
pour l'ordinateur : macbook, asus, dell, etc.
pour l'imprimantes : hp, epson, etc.

Mais le soucis c'est que je vois pas comment faire pour interagir entre les deux, vu qu'il faut faire une requête après avoir sélectionné l'option.

Est-ce un peu plus claire ?
08/06/2012, 15h35
Darkyl

Citation:

mais problème d'actualisation de page

alors tu ne vois pas

Citation:

comment exécuter du PHP

Ecoute, c'est pourtant simple, va lire un cours ou deux sur php, notamment l'ajax si tu veux de l'éxécution sans rechargement de page.

La, j'avoue ne pas comprendre où est ton problème avec javascript... Sii tu veux passer une variable javascript à php, tu est obliger de la passer par l'url et de la récupérer dans une page, puis traiter...

Tu vois par exemple pour l'autocomplétion j'utilisais ceci :
Code:

1 2 3 4 5 6 7 8 9 <script> $(document).ready(function() { $("input#autocomplete").autocomplete({ source: [ ] }); }); </script>
Dans le "source" doit se trouver un tableau avec des valeurs sous la forme 'blabla', 'blabla2', 'blabla3', etc.
En php ça passait car en rechargeant j'avais le value de la liste déroulante et donc je faisait du php qui se ré-exécutait à ce moment là. Mais maintenant...

08/06/2012, 16h09
Torgar

Je te renvoie vers ce sujet qui traite le problème comme il faut et apporte toutes les réponses à cette question maintes fois posée.

http://www.developpez.net/forums/d59...s-liees-entre/

Bonne lecture.
08/06/2012, 18h15
Darkyl

Mais si tu comprend pa quelques choses, hésite pas...

Bonjour, désolé de la réponse tardive, mais je n'ai pas eu accès au net ce week-end.

Donc, déjà merci pour le lien. Je l'ai regardé (http://siddh.developpez.com/articles/ajax/#LIV-A) mais il y a quelque chose que j'arrive pas à faire, même avec cet exemple. Car tout ce que j'ai trouvé, y compris cet exemple parle d'insérer du code html dans la page lors de la sélection de l'option de la liste déroulante. Or, moi je cherche à trouver les valeurs qui correspondent à celle-ci et les mettre sous la forme 'val1', 'val2', 'valx', ...
dans le source de cette fonction qui permet l'autocomplétion :

Code:

1
2
3
4
5
6
7
8
 
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: [
 
]
}); 
});

J'ai donc essayé en modifiant le code proposé avec mes nom de variables :

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
Fichier type_objet.php
 
 
<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
			*/
			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('objet').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxObjet.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('type_objet');
				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' style='display:inline'>
				<input id="autocomplete" name="objet"/>
				</div>
			</fieldset>
		</form>
	</body>
</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
 
fichier ajaxObjet.php
 
 
<script>
   $(document).ready(function() {
						$("input#autocomplete").autocomplete({
							source: [
							<?php
							if(isset($_POST["idType_objet"])){
								mysql_connect("localhost","root","");
								mysql_select_db("paper");
								$res = mysql_query("SELECT id_objet,name_objet FROM objet WHERE id_typeobjet=".$_POST["idType_objet"]." ORDER BY name_objet");
								while($row = mysql_fetch_assoc($res)){
									echo '"'.$row["name_objet"].'",' ;
								}
							}
							?>
							]
						});	
					});
</script>
<?php echo "<input id=\"autocomplete\" name=\"objet\"/>"; ?>

Malheureusement, ceci ne fonctionne pas, j'avais réussi à avoir les deux listes liées entre elles. Mais lorsque je veux rajouter mon autocomplétion ça ne fonctionne pas :s

Edit : J'ai l'impression que ça n'éxécute même pas le code de ajaxObjet.php. Car j'ai testé de mettre 'test' dans le source, ça ne fonctionne pas non plus. Alors que si je migre le code dans type_objet.php, ça fonctionne (en mettant un numéro pour l'id bien sûr et en enlevant la condition). Quelqu'un aurait une idée ?

Vraiment je pète un cable, je n'arrive pas du tout à utiliser la fonction qui est dans le 2eme fichier, alors que si je la déplace dans le premier elle fonctionne :s

type_objet.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
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
83
84
85
86
87
88
89
<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
            */
            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;
 
                        var scripts = "";
 
                        while(leselect.indexOf('<script>')!==-1){
                            var provisoire = leselect.substr(leselect.indexOf('<script>')+8);
                            scripts += provisoire.substr(0,provisoire.indexOf('</script>'));
                            leselect = leselect.substr(0,leselect.indexOf('<script>'))+leselect.substr(leselect.indexOf('</script>')+9);
                        }
 
                        eval(scripts);
 
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('objet').innerHTML = leselect;
                    }
                }
 
                // Ici on va voir comment faire du post
                xhr.open("POST","ajaxObjet.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('type_objet');
                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' style='display:inline'>
                <input id="autocomplete" name="objet"/>
                </div>
            </fieldset>
        </form>
    </body>
</html>

ajaxObjet.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
<?php
$output = '<script>';
$output .= '$(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: [';
 
 
if(isset($_POST["idType_objet"])){
    mysql_connect("localhost","root","");
    mysql_select_db("paper");
    $res = mysql_query("SELECT id_objet,name_objet FROM objet WHERE id_typeobjet=".$_POST["idType_objet"]." ORDER BY name_objet");
    while($row = mysql_fetch_assoc($res)){
        $output .= '"'.$row["name_objet"].'",' . "\n";
    }
}
 
$output .= ']
        });    
    });
</script>';
$output .= '<input id="autocomplete" name="objet" />';
 
// Utilise l'un ou l'autre
//echo $output;
return $output;
?>

Si toutefois la boucle qui parse la réponse contenant le code javascript qui doit être exécuté ne fonctionne pas, regarde la fonction live de jQuery (v1.3).

13/06/2012, 14h10
Raitei

Bonjour, merci de ta réponse.

Je viens de l'essayer, mais celle-ci m'affiche un message en haut de page

Code:

')); leselect = leselect.substr(0,leselect.indexOf('')+9); } eval(scripts); // On se sert de innerHTML pour rajouter les options a la liste document.getElementById('objet').innerHTML = leselect; } } // Ici on va voir comment faire du post xhr.open("POST","ajaxObjet.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('type_objet'); idtypeobjet = sel.options[sel.selectedIndex].value; xhr.send("idType_objet="+idtypeobjet); }

je suis en train de chercher la raison de ceci ^^'
13/06/2012, 14h22
Torgar

Si c'est ce que tu as posté le message d'erreur, tu as du mal intégrer le code. En plus je vois pas pour quelle raison la presque totalité du code soit sur une ligne.
13/06/2012, 14h27
Raitei

Bah j'ai recopié exactement les deux fichiers que tu m'as mis dans le forum.

Ensuite je suis allez en local sur la page type_objet.php et elle m'a affiché le message puis le fieldset contenant la liste et l'input (qui ne fonctionne pas actuellement normal si message d'erreur)

Essaye peut-être en échappant les /

Code:

1
2
3
4
5
while(leselect.indexOf('<script>')!==-1){
    var provisoire = leselect.substr(leselect.indexOf('<script>')+8);
    scripts += provisoire.substr(0,provisoire.indexOf('<\/script>'));
    leselect = leselect.substr(0,leselect.indexOf('<script>'))+leselect.substr(leselect.indexOf('<\/script>')+9);
}

13/06/2012, 14h50
Raitei

L'erreur venait de là. Mais par contre toujours pareil, aucun valeur suggérée dans l'input... :s

Bon bon bon,

Coté javascript, la function go() devient :

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
/**
* 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);
}

Je remets l'html pour être sûr.

Code:

<div id="objet"><input type="text" id="autocomplete" /></div>

Et le fichier ajax.php

Code:

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("test");
    $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);
?>

14/06/2012, 12h28
Raitei

Bonjour,

Je viens de remodifier le code avec ce que tu as envoyé, l'input ne s'autocomplète toujours pas. :s
14/06/2012, 12h49
Torgar

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)

ok;

fichier type_objet.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
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:

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

Merci de l'aide :)

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:

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); ?>

18/06/2012, 09h52
Raitei

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

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

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

Code:

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)
    });
}

18/06/2012, 10h39
Raitei

Citation:

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 *.*
18/06/2012, 10h53
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/
18/06/2012, 12h10
Raitei

Citation:

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 ^^)
18/06/2012, 12h22
Torgar

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.
18/06/2012, 13h12
Raitei

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.
18/06/2012, 14h13
Torgar

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

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()