Jump to content
Sign in to follow this  
dimi3

appels multiples au serveur par Ajax

Recommended Posts

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.

Share this post


Link to post
Share on other sites

Bonjour,

Qu'utilises tu? Jquery? ou autre?

Mets un bout de ton code pour voir.

Portekoi

Share this post


Link to post
Share on other sites

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>";
?>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...