appels multiples au serveur par Ajax

[dimi3]

Bonjour,

Pour obtenir de l'aide sur une page web, l'utilisateur clique sur un lien qui va appeler via Javascript/Ajax un texte sur le serveur. Ce texte va s'afficher dans un <div>. A la fin de l'affichage du texte un bouton [Fermer le message d'aide] permet à l'utilisateur de cacher le <div> encombrant. Mais si l'utilisateur souhaite réafficher le message d'aide, un nouveau clic sur le lien d'ouverture ne renouvelle pas l'affichage. Comment puis-je faire pour que le clic soit toujours fonctionnel, durant toute la durée d'affichage de la page à l'écran ?

Je vous remercie de vos idées.

[Portekoi]

Bonjour,

Qu'utilises tu? Jquery? ou autre?

Mets un bout de ton code pour voir.

Portekoi

[dimi3]

Merci de votre attention.

Lien d'appel :

<A href="javascript:aide()">Aide</A>
<br><br>
<div id="resultat"></div>

Fonctions dans le head :

function affCache(idpr)
{
	var pr = document.getElementById(idpr);
	if (pr.style.display == "") {
		pr.style.display = "none";
	}
else {
		pr.style.display = "";
	}
}

function aide()
{
obj = document.getElementById("resultat");
obj.innerHTML = "";
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);

xhr_object.onreadystatechange = function()
{ 
if(xhr_object.readyState == 4)
{
if(xhr_object.status == 200) 
obj.innerHTML += "" + xhr_object.responseText; 
else 
obj.innerHTML +="Error code " + xhr_object.status;
}
}; 

xhr_object.open("GET", "http://...chemin.../aide.php", true);
xhr_object.send(null);
}

Fichier d'aide :

<?php
echo "<table border = 1 cellpadding = 15><tr><td><center><u>Aide</u></center><br>... bala bla bla ... ";
echo "<br><br><center><input type=\"button\"  value=\"Cacher l'aide\" onclick=\"affCache('resultat');\"></center></tr></td></table><br>";
?>

[Portekoi]

Bonjour,

Utilise jQuery. Tu as tout se qu'il faut pour gérer cela.

La fonction en jQuery est .live avec .Ajax.

Regarde sur Google, tu trouveras des exemples

Portekoi

[Ernestine]

C'est normal : ta fonction affCache met le div "resultat" en display none, du coup il reste masqué...

Plutôt que de le masquer, il suffirait de le vider de son contenu.

Remplacer

function affCache(idpr)
{
        var pr = document.getElementById(idpr);
        if (pr.style.display == "") {
                pr.style.display = "none";
        }
else {
                pr.style.display = "";
        }
}

par :

function affCache(idpr)
{
        var pr = document.getElementById(idpr);
        pr.innerHTML = "";
}

Et ça devrait marcher (par contre du coup la fonction affCache ne fait plus la même chose, donc si tu l'utilises ailleurs dans la page, attention).

Utilise jQuery. Tu as tout se qu'il faut pour gérer cela.

On ne peut quand même pas demander à quelqu'un de passer sous jQuery dès qu'il y a le moindre petit problème javascript Même si c'est sûr qu'encore une fois, jQuery faciliterait beaucoup la chose, que ce soit pour l'appel AJAX ou pour l'affichage/masquage du div.

[captain_torche]

Personnellement, c'est le display='' qui me perturbe.

Tu peux essayer de voir si ça marche avec du display="block" ?

[Portekoi]

Re,

Je suis d'accord avec toi mais il gagnerait du temps à passer par jQuery.

Mais il est vrai que l'on ne peut migrer comme ça sur cet outil

Portekoi

[dimi3]

Bonjour,

Utilise jQuery. Tu as tout se qu'il faut pour gérer cela.

La fonction en jQuery est .live avec .Ajax.

Regarde sur Google, tu trouveras des exemples

Portekoi

Merci.

J'ai fait ça :

$("p").live("click", function(){
	$(this).after("<p><table border = 1 cellpadding = 15><tr><td><center><u>Aide</u></center><br>... bla...bla...bla...<br><br><center><input type=\"button\"  value=\"Cacher l'aide\" onclick=\"affCache('resultat');\"></center></tr></td></table><br></p>");
 });

et :

<p>Aide</p>

Le résultat est plus mauvais que la solution Ajax car le clic sur le bouton [Cacher l'aide] , au lieu de faire disparaître l'aide, il la multiplie.

Quant à lier les fonctions .live et .Ajax, ça je ne sais pas faire.

Plutôt que de le masquer, il suffirait de le vider de son contenu.

Remplacer

par :

function affCache(idpr)
{
        var pr = document.getElementById(idpr);
        pr.innerHTML = "";
}

Ca marche nickel ! Mille mercis !