Discussion :

[cr1ptal]

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:

1. L'utilisateur ouvre une page article
2. Il scroll à la fin et veut commenter
3. Il doit remplir un test de calcul pour se différencier d'un robot
4. 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
5. 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 :

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
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 HTML :

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

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

[cr1ptal]

J'ai fait une erreur de frappe à la ligne 18 du premier bloque CODE, il faut lire:

Code :

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

1
2
xhttp2.onreadystatechange = function() {

Après correction, ça ne change rien au résultat; le boutton "Submit comment" reste disabled, son innerHtml n'est pas mis à jour par Ajax.
/cr!ptal

[NoSmoking]

Bonjour,
il y a une incohérence dans ton code

Code html :

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

1
2
<input id="submitb" type="submit" value="Submit comment" style="color:grey"
	data-toggle="tooltip" data-placement="top" title="Calculation verification needed" disabled/>

Code :

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

document.getElementById("submitb").innerHTML = this.responseText;

Il ne te sert à rien de modifier le innerHTML d'un élément <input> qui par défaut n'en à pas !

Au retour de ta requête joue plutôt sur ses attributs disabled, class ...

Pas regardé le reste !

[cr1ptal]

Merci @NoSmoking, j'ai compris mon erreur! Je dois avouer que je suis plutot "artiste" cote js, j'ai jamais vraiment appris; là, j'en ai besoin pour un site perso...
Si jamais ça intéresse quelqu'un voici le code de la fonction js corrigée:

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
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";
		  document.getElementById("submitb").disabled = false;
	  } else {
		  url = "../ajax/sum_err.html";
	  }
	  xhttp.open("POST", url, true);
	  xhttp.send();	  
};