Liste déroulante : modification en appuyant sur bouton

**69Pierre** · 15/09/2015, 15h51

Bonjour.
Avec l'aide du net, j'ai fait un script JS qui fait ce que je voulais.
Une page HTML (PHP) affiche une liste déroulante complète au chargement qui réduite lors du click sur des boutons qui provoque d'autres requêtes en passant par un script pHp.
Je ne comprends pas pourquoi je dois créer la div

Code html :

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

<div  id="menuDer">	</div>

l'id fileContent devrait pouvoir servir aux 2 fonctions ?.
Est ce que quelqu'un peut m'aider à commenter plus précisément les scripts ?
Comment refaire ceci en jQuery ?

Merci de votre aide.

La partie formulaire :

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
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
	</head>
 
	<body onload="init()">
		<div>	
			<form name="formulaire" method="post" action="<?php echo SAISIE2; ?>">
				<p id="fileContent"></p>
 
				<td><button type="button" name="liste"  value=<?php echo REQUETES2."?param1=V&param2=N"; ?> >Vélo</button></td>
				<td><button type="button" name="liste"  value=<?php echo REQUETES2."?param1=C&param2=N" ; ?>>Course à P</button></td>
				<td><button type="button" name="liste"  value=<?php echo REQUETES2."?param1=V&param2=O" ; ?>>Vélo Court</button></td>
				<td><button type="button" name="liste"  value=<?php echo REQUETES2."?param1=C&param2=O"; ?> >Course à P Court</button></td>
 
			<div  id="menuDer">	
			</div>
 
				<div align="center">
					<input type="submit" name="Submit" value="Envoyer">
				</div>
			</form> 
		</div>
 
	</body>
<script src="../JS/onload.js"></script>
</html>

Le code JSavec la fonction au chargement de la page et la fonction pour l’événement click :

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
/*AJAX*/
function loadFile(file) {
 
    var xhr = new XMLHttpRequest();
 
    // On souhaite juste récupérer le contenu du fichier, la méthode GET suffit amplement :
    xhr.open('GET', file);
 
xhr.addEventListener('readystatechange', function() { // On gère ici une requête asynchrone
 
    if (xhr.readyState == 4 && xhr.status == 200) { // Si le fichier est chargé sans erreur
 
        document.getElementById('fileContent').innerHTML =  xhr.responseText ; // On l'affiche !
 
    } else if (xhr.readyState == 4 && xhr.status != 200) { // En cas d'erreur !
 
        alert('Une erreur est survenue !\n\nCode :' + xhr.status + '\nTexte : ' + xhr.statusText);
 
    }
 
}, false);
 
    xhr.send(null); // La requête est prête, on envoie tout !
 
}
 
function init(file) { // Comme d'habitude, une IIFE pour éviter les variables globales
    document.getElementById("menuDer").style.display = "none";
    var inputs = document.getElementsByName('liste'),
        inputsLen = inputs.length;
 
    for (var i = 0 ; i < inputsLen ; i++) {
 
        inputs[i].addEventListener('click', function() {
            loadFile(this.value); // À chaque clique, un fichier sera chargé dans la page
        }, false);
 
    }
 
	loadFile("../MYSQL/requete_parcours.php?param1=T&param2=N");
 
};

Invité · 15/09/2015, 18h32

Bonjour,

Code :

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

1
2
function init(file) { // Comme d'habitude, une IIFE pour éviter les variables globales
    document.getElementById("menuDer").style.display = "none"; // (cette ligne !)

Le script fait appel ici à l'id "menuDer", sans qu'on sache à quoi ça sert...

Si ça ne sert vraiment à rien, (?), supprime la ligne du script ainsi que la <div>.

**danielhagnoul** · 15/09/2015, 18h34

Le titre et l'introduction du problème sont difficile à comprendre. On ne peut rien faire avec du code serveur (PHP) dans un forum JS.

Je crois comprendre (mais je peux me tromper) que vous essayez de charger du code HTML dans une division. Voici un exemple en jQuery.

Le fichier "content.html" contient l'information dans des divisions (chaque division doit avoir un ID).

Le fichier principal charge le contenu d'une division en fonction du bouton cliqué par l'utilisateur.

Fichier content.html :

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
17
18
19
20
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="velo">
    <p>Un vélo est un véhicule terrestre, entrant dans la catégorie des cycles.</p>
  </div>
  <div id="courseP">
    <p>La course à pied est un mode de locomotion de l'homme.</p>
  </div>
  <div id="veloCourt">
    <p>Bla bla bla...</p>
  </div>
  <div id="coursePCourt">
    <p>Et patati et patata...</p>
  </div>
</body>
</html>

Fichier principal :

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
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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.min.css">
  <style>
    
  </style>
</head>
<body>
 
  <!-- Attention dans "content.html #velo" l'espace entre l'URL et l'ID est obligatoire -->
 
  <button type="button" name="liste" value="content.html #velo">Vélo</button>
  <button type="button" name="liste" value="content.html #courseP">Course à P</button>
  <button type="button" name="liste" value="content.html #veloCourt">Vélo Court</button>
  <button type="button" name="liste" value="content.html #coursePCourt">Course à P Court</button>
 
  <div id="content"></div>
 
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
    "use strict";
    
    $( function(){ // forme abrégée de $(document).ready( function( ){      
      
      $( "button[name='liste']" ).on( "click", function( event ){
        $( "#content" ).load( $( event.target ).val() );
      });
 
    });
 
    $( window ).load( function(){
      
    });
  </script>
</body>
</html>

**69Pierre** · 16/09/2015, 11h12

bonjour et merci de me répondre.
Effectivement, je n'arrive pas à décrire mieux ce que je veux faire.
J'ai une page principale, l'IHM, la vue, la seule que voit l'utilisateur.
Il y a 2 choses sur cette vue.
un menu déroulant issu d'une requête myqsl : js init() qui appelle la fonction loadfile()
4 boutons qui permettent de modifier cette même liste : js loadfile()

Le jQuery proposé correspond à ce que je cherche merci mais comment passer value=<?php echo REQUETES2."?param1=V&param2=N"; ?> en argument de $( "#content" ).load( $( event.target ).val() );

NB : si j'enlève <div id="menuDer"> </div> , je n'ai plus mon menu déroulant

**danielhagnoul** · 18/09/2015, 19h54

Le PHP s'exécute sur le serveur, le code JS sur le navigateur du client. Lorsque le JS s'exécute, il ne peut communiquer avec le serveur qu'au travers d'une transaction AJAX.

Voir le lien vers ma FAQ dans ma signature.

Liste déroulante : modification en appuyant sur bouton

jQuery

Discussions similaires

Partager

Partager