[AJAX] bloquer apres adaptation du tutoriel web2.0

**tazcox** · 10/06/2010, 11h42

bonjour,
j'ai suivit le tutoriel "Web 2.0, allez plus loin avec AJAX et XMLHttpRequest"
il fonctionne a merveille .
j'ai voulus l'adapter pour d'autre table , histoire de voire si j'avais bien compris, et ben non
j'ai un soucis :
contexte :
j'ai deux table mysql nagios_services et nagios_hosts
dans nagios_hosts je veux recuperer l'alias et le host_object_id
et je veux que en fonction de l'alias il m'affiche les services associé .
donc dans nagios_services .
(select display_name from nagios_services where host_object-id="valeur poster de host_object_id@nagios_hosts)

voici le code oui j'ai meme pas changer le nom du script

:
auteurs2.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
[root@redoracle html]# cat auteurs2.php
<html>
        <head>
                <title>Tutoriel Ajax (XHTML + JavaScript + XML)</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Ã©ar le navigateur
                                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                                   xhr = false;
                                }
                                return xhr;
                        }
 
                        /**
                        * MÃ©ode qui sera appelÃ©sur le click du bouton
                        */
                        function go(){
                                var xhr = getXhr();
                                // On dÃ©ni ce qu'on va faire quand on aura la rÃ©nse
                                xhr.onreadystatechange = function(){
                                        // On ne fait quelque chose que si on a tout reÃ§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('Object').innerHTML = leselect;
                                        }
                                }
 
                                // Ici on va voir comment faire du post
                                xhr.open("POST","ajaxlivre2.php",true);
                                // ne pas oublier Ã§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('alias');
                                alias = sel.options[sel.selectedIndex].value;
                                xhr.send("alias="+alias);
                        }
                </script>
        </head>
        <body>
<form>
                        <fieldset style="width: 500px">
                                <legend>Liste </legend>
                                <label>Server</label>
                                <select name='alias' id='alias' onchange='go()'>
                                        <option value='-1'>Aucun</option>
                                        <?
                                                mysql_connect("localhost","root","");
                                                mysql_select_db("centstatus");
                                                $res = mysql_query("SELECT distinct(alias),host_object_id FROM nagios_hosts ORDER BY alias");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["host_object_id"]."'>".$row["alias"]."</option>";
 
                                                }
                                        ?>
                                </select>
                                <label>Services</label>
                                <div id='"host_object_id"' style='display:inline'>
                                <select name='"Object"'>
                                        <option value='-1'>Choisir un Object</option>
                                </select>
                                </div>
                        </fieldset>
                </form>
 
        </body>
</html>

ajaxlivre2.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
        echo "<select name='Object' >";
        if(isset($_POST["alias"])){
                mysql_connect("localhost","root","");
                mysql_select_db("centstatus");
                $res = mysql_query("SELECT host_object_id, display_name FROM nagios_services
                        WHERE where host_object_id=".$_POST["alias"]." );
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["host_object_id"]."'>".$row["display_name"]."</option>";
                }
        }
        echo "</select>";
?>

et avec firebug j'ai cette erreur :
-document.getElementById(
onreadystatechange()
document.getElementById('Object').innerHTML = leselect;

quelqu'un pourrais m'aider je voie pas ou je me suis planter ?

Merci

**E.Bzz** · 10/06/2010, 11h53

Bonjour,
je pense que le message de firebug peut avoir 2 causes :

"Object" est un terme résevé du langage et ne doit donc pas être utilisé comme identifiant
Tu cibles un id "Object" alors qu'il n'existe pas : c'est un name. Seul IE mélange les deux !

En tous cas, ça fait 2 changement à effectuer : trouver un autre identifiant que "Object" + ajouter un id.

Ceci dit, il y a un autre problème (enfin ... qui ne posera problème qu'à IE cette fois

) : tu essayes de modifier le innerHTML du select à mettre à jour. Or sous IE ça ne fonctionne pas. D'ailleurs le script est bien prévu dans ce sens puisque le PHP génère aussi les balises <select> et plus des <option>.

c'est le innerHTML de

Code :

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

<div id='"host_object_id"' ...>

qu'il faut que tu modifies dans le onreadystatechange

Un truc que je comprends pas : pourquoi surcharges-tu les doubles-quottes par des simples dans tes attributs HTML ?

A+

**tazcox** · 10/06/2010, 12h03

voila j'ai modifier "Object" par "service"

Code :

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

1
2
3
4
5
6
7
8
 xhr.onreadystatechange = function(){
                                        // On ne fait quelque chose que si on a tout reÃ§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('service').innerHTML = leselect;
                                        }
                                }

pour l'id j'ai pas bien compris ..

j'ai modifier egalement le

Code :

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

<div id='"service"' style='display:inline'>

mais ca change rien ... j'ai encore louper quelque chose le pire c'est que dans firebug je voie le post de mon script ajaxlivre2.php et j'ai ma valeur .

**tazcox** · 10/06/2010, 12h08

j'ai retirer la surcharge (je nigo moi )

et maintenant j'ai plus d'erreur j'ai mon alias qui s'affiche
mais par contre j'ai rien comme liste (retour de ma sql de ajaxlivre2.php)
pourtant le POST dans firebug voie bien

Parametres
alias 74

source
alias=74

bizzard

**tazcox** · 10/06/2010, 12h12

sinon j'ai ca comme erreur dans httpd.conf
ca peus aider ?
[Thu Jun 10 12:12:08 2010] [error] [client 169.31.113.154] PHP Parse error: syntax error, unexpected T_STRING in /var/www/html/ajaxlivre2.php on line 9, referer: http://169.31.113.154:8080/auteurs2.php

**tazcox** · 10/06/2010, 12h19

ma requette fonctionne car si je fait :

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
mysql> SELECT host_object_id, display_name FROM nagios_services
    ->                         WHERE host_object_id=74;
+----------------+--------------+
| host_object_id | display_name |
+----------------+--------------+
|             74 | Disk-/       |
|             74 | Disk-/apps   |
|             74 | Disk-/home   |
|             74 | Disk-/opt    |
|             74 | Disk-/tmp    |
|             74 | Disk-/usr    |
|             74 | Disk-/var    |
|             74 | Load Average |
|             74 | Memory AIX   |
|             74 | Ping         |
|             74 | Disk-/       |
|             74 | Disk-/apps   |
|             74 | Disk-/home   |
|             74 | Disk-/opt    |
|             74 | Disk-/tmp    |
|             74 | Disk-/usr    |
|             74 | Disk-/var    |
|             74 | Load Average |
|             74 | Memory AIX   |
|             74 | Ping         |
+----------------+--------------+
20 rows in set (0.00 sec)
 
mysql>

mais je n'ai pas de liste cree par cette requettes .
est ce qu'il y a un moyen de faire un echo de la requettes avans execution pour voire si le POST est bien passé ?
Merci de ton aide

**E.Bzz** · 10/06/2010, 12h21

Envoyé par tazcox

ca peus aider ?

Y a des "chances" (mais moi, par contre, je peux pas t'aider pour ce qui est PHP)

Un test classique : entre l'url appelée via Ajax (avec un "alias" valide en paramètre) directement dans la barre d'adresse du nav. Une fois validée, tu auras dans le "code source de la page", la réponse exacte du serveur

EDIT : Idem après avoir lu ton post ci-dessus ...

A+