Charger dynamiquement une requête SQL
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:
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:
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:
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:
1
2
3
4
| var infoMembre = document.getElementById("infomembre") ;
infoMembre.addEventListener('load', function({
// Le code
})); |
Cordialement,
LhommeLibre
