Charger dynamiquement une requête SQL

**LhommeLibre** · 04/05/2020, 22h47

Bonjour,

J'aimerais lorsque je clique sur une liste déroulante pouvoir charger dynamiquement une requête SQL dans une balise <div>. Pour cela, je combine le Ajax et le jquery.

Pour une raison que j'ignore, mon code en jquery ne fonctionne qu'une fois sur deux. Je n'arrive pas à comprendre comment je pourrais régler le problème. Pourriez-vous, s'il vous plaît m'aiguiller vers des méthodes à suivre pour comprendre d'où vient le problème ?

Je vous laisse voir mon code :

Body :

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
<body>
  <div id="content">
    <h1>Infos sur les sous-domaines</h1>
 
    <div style="float:left;">
      <p>Numéro de page</p>
      <select name="nbPage" id="nbPage" >
        <!-- The options are set by the script -->
      </select>
    </div>
    <div id="infomembre" onload="listeSubDomainName()" style="display:grid;">
    </div>
 
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="Javascript/membres.js"></script>
<script type="text/javascript" src="Javascript/click.js"></script>
</head>

Membre.js

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
(function listeSubDomainName(){
   var infoMembre = document.getElementById("infomembre") ;
   var xhr = new XMLHttpRequest() ;
 
   var xh = new XMLHttpRequest();
   var select = document.getElementById("nbPage");
 
   // Premiere requete Ajax
   xh.open("GET","mysql.php?count",true); // compte le nombre de ligne dans la base de données
 
   xh.addEventListener("readystatechange", function() {
      if(xh.readyState === 4 && xh.status === 200) {
	 for ($i=1; $i <= Math.floor(xh.responseText /25) + 1 ; $i++ ) {
	    var option = select.appendChild(document.createElement('option'));
	    option.innerHTML = $i ;
            option.value = $i ;
            option.classList.add("option") ;
	 }
 
      }
   }) ;
 
   xh.send(null);
 
   // Deuxième requete Ajax
   xhr.open("GET","mysql.php?limit=1",true); // limit=1 signifie qu'on va prendre les 0*25 à 1*25 ième lignes de la base de données
 
   xhr.addEventListener("readystatechange", function() {
      if(xhr.readyState === 4 && xhr.status === 200) {
         infoMembre.innerHTML = xhr.responseText ;
      }
   });
 
   xhr.send(null);
}
 
 
 
)();

click.js

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
$(document).ready(function(){
   $(".option").ready(function(){
      $(".option").on('click',function(){
         listMembre($(this).val()); // M'affiche à chaque fois 1. Je me concentre néanmoins pour l'instant à faire en sorte que ce code fonctionne tout le temps
         alert($(this).val()); // Me permet de vérifier si l'évènement est bien déclenché
      });
   });
});
 
function listMembre(p) {
 
   var infoMembre = document.getElementById("infomembre") ;
   var xhr = new XMLHttpRequest() ;
 
   xhr.open("GET","mysql.php?limit=" + encodeURIComponent(p),true); // limit=p signifie qu'on va prendre les (p-1)*25 à p*25 ième lignes de la table 
                                                                                             // dans la base de données
 
   xhr.addEventListener("readystatechange", function() {
      if(xhr.readyState === 4 && xhr.status === 200) {
         infoMembre.innerHTML = xhr.responseText ;
      }
   });
 
   xhr.send(null);
 
}

Je tiens à préciser que j'ai utilisé "onload" dans la balise <div id="infoMembre" ></div> car lorsque je rajoutais un addEventListener en fin de chargement cela ne fonctionnait pas même si je faisais par exemple :

Code :

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

1
2
3
4
var infoMembre = document.getElementById("infomembre") ;
infoMembre.addEventListener('load', function({
     // Le code 
}));

Cordialement,

LhommeLibre

Invité · 05/05/2020, 10h11

Bonjour,

Envoyé par LhommeLibre

...j'ai utilisé "onload" dans la balise <div id="infoMembre" ></div>...

1- Avec jQuery, tu peux utiliser :

Code :

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

1
2
3
$(window).on( 'load', function(){
   listeSubDomainName();
});

2- Par contre, je ne vois pas de jQuery dans la function listeSubDomainName() (codée en JavaScript pur) !

3-

Code :

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

 	    var option = select.appendChild(document.createElement('option'));

On voit ici que les <option> sont créées dynamiquement.

$(".option").on('click',function(){ ne peut pas fonctionner, car elles n'existent pas dans le DOM au chargement.

Il faut écrire :

Code :

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

$("#nbPage").on('click', ".option", function(){

Car <select id="nbPage"...> est présnt dans le DOM dès le chargement.

4- Pour le reste, merci de donner un minimum d'explications.

**LhommeLibre** · 06/05/2020, 19h40

Bonjour,

Tout ce met à fonctionner correctement, je n'ai aucun soucis. J'avais des bugs dans mon code et je pense que ça a dû jouer. Honnêtement, je n'ai pas compris. Je remercie cependant jreaux62 de m'avoir répondu

Charger dynamiquement une requête SQL

jQuery

Discussions similaires

Partager

Partager