[AJAX] Apparition de fenêtres d'avertissement [Résolu]

slaborde · 16/05/2006, 23h04

Je me lance dans le très à la mode AJAX et autre XMLHttpRequest. J'ai trouvé ce tutoriel de siddh sur developpez.com.

J'ai une base de donnée MySQL nommée "test" sur laquelle je veux tester (bah oui) les script proposés dans ce tutoriel. Pour ceux qui n'ont pas envie de le relire, je copie/colle les codes sources concernés.

La base est créée/remplit avec les requêtes SQL suivantes :

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
CREATE TABLE `auteur` (
  `id` tinyint(4) NOT NULL auto_increment,
  `nom` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
);

insert into `auteur` values 
(1,'Clive Cussler'),
(2,'Harlan Coben'),
(3,'Franck Herbert'),
(4,'Pierre Bordages');

CREATE TABLE `livre` (
  `id` tinyint(4) NOT NULL auto_increment,
  `titre` varchar(50) NOT NULL,
  `idAuteur` tinyint(4) default NULL,
  PRIMARY KEY  (`id`)
) ;

insert into `livre` values 
(1,'Odyssee',1),
(2,'Sahara',1),
(3,'Dragon',1),
(4,'Une chance de trop',2),
(5,'Ne le dis a personne',2),
(6,'Disparu à jamais',2),
(7,'Dune',3),
(8,'La barriere de santaroga',3),
(9,'Les guerriers du silence',4),
(10,'La citadelle hyponeros',4),
(11,'Terra mater',4);

J'utilise ensuite les scripts auteurs.php et ajaxLivre.php.

Lorsque je me place sur la page auteurs.php, je vois bien ce qui est prévu, à savoir deux listes déroulantes avec les noms des auteurs dans la première et "choisir un auteur dans la seconde".

C'est lorsque je choisis un auteur que tout va de travers...

Une fois que j'ai sélectionné un auteur, il se passe les choses suivantes :

il apparait une petite fenêtre d'avertissement (comme avec un window.alert en javascript) avec le chiffre "1" comme unique texte. Je clique sur "OK"
un autre "1" (dans une autre fenêtre d'avertissement)
puis un "2" (dans une autre fenêtre d'avertissement)
puis un "3" (dans une autre fenêtre d'avertissement)
puis un "4" (dans une autre fenêtre d'avertissement)

Voila une capture d'écran de la première fenêtre :

Je comprends pas pourquoi...

Pour ceux qui ont la flemme d'aller lire le tutoriel, je colle ici les 2 scripts PHP :

auteurs.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
<html>
    <head>
        <title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
        <script type='text/javascript'>
            var xhr = null; 
     
            function getXhr(){
                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; 
                } 
            }
            
            /**
            * Méthode qui sera appelée sur le click du bouton
            */
            function go(){
                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('livre').innerHTML = leselect;
                    }
                }

                // Ici on va voir comment faire du post
                xhr.open("POST","ajaxLivre.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('auteur');
                idauteur = sel.options[sel.selectedIndex].value;
                xhr.send("idAuteur="+idauteur);
            }
        </script>
    </head>
    <body>
        <form>
            <fieldset style="width: 500px">
                <legend>Liste liées</legend>
                <label>Auteurs</label>
                <select name='auteur' id='auteur' onchange='go()'>
                    <option value='-1'>Aucun</option>
                    <?
                        mysql_connect("localhost","root","root");
                        mysql_select_db("test");
                        $res = mysql_query("SELECT * FROM auteur ORDER BY nom");
                        while($row = mysql_fetch_assoc($res)){
                            echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
                        }
                    ?>
                </select>
                <label>Livres</label>
                <div id='livre' style='display:inline'>
                <select name='livre'>
                    <option value='-1'>Choisir un auteur</option>
                </select>
                </div>
            </fieldset>
        </form>
    </body>
</html>

ajaxLivre.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
    echo "<select name='livre'>";
    if(isset($_POST["idAuteur"])){
        mysql_connect("localhost","root","root");
        mysql_select_db("test");
        $res = mysql_query("SELECT id,titre FROM livre 
            WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre");
        while($row = mysql_fetch_assoc($res)){
            echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";
        }
    }
    echo "</select>";
?>

Je ne maîtrise pas du tout (pour l'instant) l'objet XMLHttpRequest, du coup je suis un peu perdu là...

Qq1 a une idée du pourquoi du comment ?

NB: Firefox 1.5.0.3 sous mandriva LE 2005

nihao · 17/05/2006, 12h10

bonjour,

le code que tu copies dans ton message n'est pas celui que l'on télécharge !!

A l'origine on a dans le fichier auteurs.php (je ne mes que le bout qui est à modifier) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function change(){
                
                getXhr();
                    
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    alert(xhr.readyState); 
                    // 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)
                    {
                        di = document.getElementById('livre');
                        di.innerHTML = xhr.responseText;
                    }

c'est l'instruction en rouge qui génère les fenêtres qui te gênent.

cordialement

slaborde · 17/05/2006, 13h20

Ah oui, je n'avais pas fait attention que le code téléchargé et le code sur le tutoriel n'était pas le même.

Merci.
Maintenant, je comprends ce que ces chiffres signifient.

a+

17/05/2006, 13h20	#3
slaborde Candidat au titre de Membre du Club Inscription : décembre 2002 Messages : 19 Détails du profil Informations personnelles : Âge : 33 Informations forums : Inscription : décembre 2002 Messages : 19 Points : 10 Points : 10	merci Ah oui, je n'avais pas fait attention que le code téléchargé et le code sur le tutoriel n'était pas le même. Merci. Maintenant, je comprends ce que ces chiffres signifient. a+
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email