Double mise à jour d'éléments html
Bonjour à tous,
Je développe un site perso pour publier mes articles, avec une section commentaires par rapport à chaque article.
Voici la logique que j'essaye d'implémenter:
- L'utilisateur ouvre une page article
- Il scroll à la fin et veut commenter
- Il doit remplir un test de calcul pour se différencier d'un robot
- Le calcul est vérifié par la fonction javascript loadResult(), qui de plus, met à jour un <span> par AJAX pour indiquer l'état de la vérification
- J'aimerais ajouter l'activation du bouton "Submit comment" dans cette même fonction loadResult(), ou une autre peut être, permettant à l'utilisateur d'envoyer son commentaire. Je n'y arrive pas.
Dès que je fais deux POST AJAX, un pour mettre à jour l'élément "einstein", et le deuxième pour activer le bouton "Submit comment", XMLHttpRequest ne fait plus rien; aucune mise à jour ne se produit.
Si je fais la première mise à jour de l'élément "einstein" seulement, tout se passe bien.
Seulement, j'ai aussi besoin d'activer le bouton "Submit comment". Je n'ai peut être pas la bonne solution conceptuelle, challengez moi svp.
Voici le code js AJAX:
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
| function loadResult(val_in, sum) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("einstein").innerHTML = this.responseText;
}
};
var url = "";
if (val_in == sum) {
url = "../ajax/einstein.html";
} else {
url = "../ajax/sum_err.html";
}
xhttp.open("POST", url, true);
xhttp.send();
var xhttp2 = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("submitb").innerHTML = this.responseText;
}
};
var url2 = "";
if (val_in == sum) {
url2 = "../ajax/submit_button.html";
} else {
return;
}
xhttp2.open("POST", url2, true);
xhttp2.send();
}; |
les éléments html référencés dans la page principale:
Code:
1
2
3
4
| <span id="einstein"></span>
...
<input id="submitb" type="submit" value="Submit comment" style="color:grey"
data-toggle="tooltip" data-placement="top" title="Calculation verification needed" disabled/> |
Si quelqu'un a une idée de piste, ce serait un beau cadeau de Noel :-))
bonnes fêtes à vous,
cr!ptal
