Coup de pouce Javascript

Fermé
salyxo Messages postés 10 Date d'inscription vendredi 7 janvier 2011 Statut Membre Dernière intervention 31 janvier 2015 - 7 janv. 2011 à 13:13
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 - 7 janv. 2011 à 17:53
Bonjour,

Bonjour,
Je programme en PHP depuis quelques années et j'ai déjà intégré du JavaScript mais sans jamais m'intéresser à ce langage que j'évite le plus possible.
Cela dit, voilà, j'intègre sur un site quelques fonctions Ajax XMLHttpRequest.
Je pars avec une page X qui lance une requête à la page Y lors d'un appel de fonction. Jusque là, tout fonctionne bien.
La page Y me retourne une variable xhr en JavaScript qui contient ceci :

<script type="text/javascript">
function request()
{
  var xhr = null;
  if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
  else
  {
	if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
	else { var mode = "php"; }
	return;
  }

  var data = document.getElementById("paysselect").value
  xhr.open("GET", "fonction3.php?data=" + data, true);
  xhr.send(null);

  xhr.onreadystatechange = function()
  {
	if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
	{
	  document.getElementById("drapeau").style.display = "inline";  alert(xhr.responseText); var affdrapeau = xhr.responseText;
	}
  }
}
</script>


Appel de fonction, envoi de la requête et récupération de la variable envoyée xhr.
Tout va toujours bien sauf sur un point... J'aimerais afficher l'image du drapeau (la variable xhr contient ceci :
<img title="Allemagne" alt="flag" src="admin/images/drapeaux/de.gif" />
(ou une autre en fonction du traitement php de la page y.

Voici le code html de la page X pour l'affichage de la variable xhr :

<span id="drapeau" style="display: none;"><script>document.write(affdrapeau);</script>Drapeau</span>


Au demeurant, l'appel à la popup alert me sert à vérifier que la variable xhr est bien réceptionnée pour mes tests. Cet appel disparaîtra sur la page définitive.
Le mot Drapeau dans le span "drapeau" me sert à vérifier qu'il passe bien inline lorsque la requête XmlHttpRequest est bien en état 4.

Bon, mon seul problème : l'image de la variable xhr ne s'affiche pas...
Alors si une bonne âme voulait m'aider...

Merci

1 réponse

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
7 janv. 2011 à 17:53
Salut.

Il ne faut pas fuir le Javascript, c'est un langage qui peut être très utile, mais il ne faut pas en abuser pour afficher des widgets inutiles.

D'où viens la variable affdrapeau ?

Si tu masques le span avec l'attribut style, tu ne sauras plus l'afficher, ou il faudra supprimer cet attribut (du moins, la partie "display:none").
Crées une classe CSS (.hide par exemple), et applique-la à ton span.

Mais ne serait-il pas plus simple que Y retourne seulement le nom du pays ("de" par exemple) ? Grâce à xhr.responseText, tu pourrais ainsi former l'URL complète de l'image. De plus, inutile d'utiliser un div : tu peux déjà mettre une balise <img /> et la masquer. Il suffira de modifier l'attribut src.

Par exemple :
<img src="" class="hide" alt="Drapeau" id="drapeau" />


Et dans le JS :
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
	document.getElementById("drapeau").style.display = "inline";
	document.getElementById('drapeau').src = "admin/images/drapeaux/"+xhr.responseText+".gif";
}
0