Bonsoir,

Je rencontre un probl�me dans la situation suivante. Le but initial est � partir d'un input type button de g�n�rer un formulaire via une requ�te AJAX qui va chercher le dit formulaire dans un fichier php dont le code est le suivant :

Code php : 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
 
<!DOCTYPE html>
<?php
$notes = array('Do' => 'C', 'Ré' => 'D', 'Mi' => 'E', 'Fa' => 'F', 'Sol' => 'G', 'La' => 'B', 'Si' => 'B');
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    if(empty($_POST['note_classique']) or ($_POST['note_classique'] == 'Faites votre choix')){
        $result = 'Aucune note choisie ! ';
    }
    else{
        $note = $_POST['note_classique'];
        $result = 'La note classique \'' .$note. '\' correspond à la note américaine ' .$notes[$note]. '.';
    }
}
?>
 
 
<html lang='fr'>
<head>
    <meta charset="UTF-8">
    <title> Une histoire du notes ...</title>
    <script src="demande_3.js" type="text/javascript"> </script>
</head>
    <body>
        <form id="formulaire" method="POST" action="devoir_2_demande_3.php">
            <fieldset>
                <legend> Correspondance des notes de musique </legend>
                <select name="note_classique">
                    <option value=''> Faites votre choix </option>
                    <?php
                        foreach($notes as $note_classique => $note_americaine){
                            echo '<option value="'.$note_classique.'">' .$note_classique. '</option>';
                        }
                    ?>
                </select><br />
                <p><input type='button' id='fermer' value='Close' /></p>
            </fieldset>
 
        </form>
    </body>
</html>

Une fois le formulaire affich�, un bouton close doit permettre de cacher le formulaire et faire r�appara�tre le premier bouton "Notation". Enfin, si on reclique sur ce bouton notation, on doit faire r�appara�tre le formulaire s'il existe ou relancer une requ�te AJAX.

J'ai essay� de quantifier tout cela dans un fichier javascript de code :

Code javascript : 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
 
(function() {
    var exemple = {
        init : function(){
            window.addEventListener('load',function(event){
                var bouton = document.getElementById('bouton');
                bouton.addEventListener('click',function(event){
                    if(!document.getElementById('formulaire')){
                    this.style.visibility='hidden';
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.addEventListener('readystatechange',function(event){
                    if(xmlhttp.readyState == 4){
                    if(xmlhttp.status == 200){
                        document.getElementById('affichage').innerHTML = xmlhttp.responseText;
                        var fermer = document.addEventListener('click',function(event){
                            bouton.style.visibility = 'visible';
                            document.getElementById('formulaire').style.visibility = 'hidden';
 
                        bouton.addEventListener('click',function(event){
                            if(document.getElementById('formulaire').style.visibility == 'hidden'){
                                document.getElementById('formulaire').style.visibility = 'visible';
                                bouton.style.visibility='hidden';
                            }
                            else{
                                bouton.style.visibility='hidden';
                                var xmlhttp = new XMLHttpRequest();
                                xmlhttp.addEventListener('readystatechange',function(event){
                                if(xmlhttp.readyState == 4){
                                if(xmlhttp.status == 200){
                                    document.getElementById('affichage').innerHTML = xmlhttp.responseText;
                                }
                                else{
                                    alert('error code : ' + xmlhttp.status + ' : ' + xmlhttp.statusText);
                                }
                                }
                                });
                                xmlhttp.open('GET', 'devoir_2_demande_3.php', true);
                                xmlhttp.send()
                            }
                        });
                            });
                    } // fin de la première requête ajax
                    else{
                        alert('error code : ' + xmlhttp.status + ' : ' + xmlhttp.statusText);
                    }
                }
                });
                xmlhttp.open('GET', 'devoir_2_demande_3.php', true);
                xmlhttp.send()
                    }
                });
            }); // Chargement de la page !
        }
    };
    exemple.init();
})();


Enfin le code html qui permet de g�n�rer le bouton "Notation" du d�part :

Code html : 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
 
<!DOCTYPE html>
<html lang='fr'>
<head>
    <meta charset="UTF-8">
    <title> Une histoire du notes ...</title>
    <script src="demande_3.js" type="text/javascript"> </script>
</head>
    <body>
        <div id="bouton">
            <input type="button" name="bouton" value="Notation" />
        </div>
        <div id='affichage'>
        </div>
    </body>
</html>


Mon code javascript ne me donne pas le comportement souhait�. Dans un premier temps, le clic sur le bouton notation conduit bien � l'apparition du formulaire et le clic sur le bouton "Close" conduit bien � la r�apparition du bouton "Notation". Mais lorsque je reclique sur notation, il ne r�affiche pas le formulaire cach�. Pourquoi ?

Un grand merci de m'avoir lu et de proposer des pistes.


Bonne soir�e � toutes et � tous.