[AJAX] Rafraichir une image

Version imprimable

20/04/2006, 09h34
fragmonster

[AJAX] Rafraichir une image

Est il possible, en utilisant ajax, de rafraichir une image générée via un script php?

Auriez vous des pistes à me proposer, ou des scripts? J'utilise déjà Ajax et je connais un peu, mais je n'arrive pas à rafraichir une image.

Merci

ça vaut ce que ça vaut, mais utilisé AJAX, pourquoi pas un truc comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
<img src="monimg.jpeg" id="to_refresh"/>
<script type="text/javascript">
function refresh(var ID)
{
   var D = new Date();
   document.getElementById(ID).setAttribute('src', document.getElementById(ID).getAttribute('src') + '?' + D.getTime());
/* éventuellement remplacer le ? par un &amp; ou kkchose comme ça si des paramètres GET sont déjà présents ^^ */
}
</script>
<input type="button" onclick="refresh(to_refresh)" value="rafraichir l'image"/>

;)

PS : AJAX c'est du JavaScript, dans le cas présent, rien à voir avec XML/XSL/SOAP ;)

20/04/2006, 10h58
fragmonster

J'utilise AJAX car en fait j'appelle un fichier PHP qui génère une image en fonction de paramètres qui lui sont passés via un formulaire.

Jusqu'à présent l'utilisateur saisissait le formulaire puis validait. La page se rechargeait et l'image était générée en fonction de la saisie de l'utilisateur.

Je voudrais utliser AJAX pour éviter de recharger la page.

Or, lorsque j'envoie une requete http vers mon fichier PHP, celui-ci me retourne le code source de mon image PNG et je ne sais pas quoi en faire.

En gros, comment faire afficher l'image plutôt que son code source.

dans ce cas, il est inutile d'utiliser AJAX, je pense...

il faut juste que tu fasse un truc de ce style :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<img src="image.php" id="IMG"/>
<form onsumit="chge_img(this, IMG); return false;">[...]</form>
<script type="text/javascript">
function chge_img(var form, var ID)
{
   var src = "";
   var variables = new Array();
   for(var i = 0; i &lt; form.getElementsByTagName('input').length; ++i)
   {
       if((form.getElementsByTagName('input')[i].type == "radio" || form.getElementsByTagName('input')[i].type == "checkbox") &amp;&amp; form.getElementsByTagName('input')[i].checked)
         variables.push(form.getElementsByTagName('input')[i].name + "=" + form.getElementsByTagName('input')[i].value);
       else if(form.getElementsByTagName('input')[i].type == "text" || form.getElementsByTagName('input')[i].type == "password")
         variables.push(form.getElementsByTagName('input')[i].name + "=" + form.getElementsByTagName('input')[i].value);
       /* autres traitements éventuels */
   }
   /* traitement pour select et textarea */
  document.getElementById(ID).setAttribute("src", "image.php?" + implode("&amp;", variables));
}

bon, le script n'est pas complet, il faut aussi vérifier implode, je ne suis pas sûr que la fonction soit vraiment celle là, par contre je suis sûr qu'elle existe ;)

j'espère que tu vois ce que ça fait et que ça t'aidera ^^

20/04/2006, 11h12
titoumimi
pour rafraichir une image, sans aller voir, il suffit de lui passer un paramêtre aléatoire.

Donc en jouant avec un petit random, tu affichera tes images comme suit :
Code:

1 2 <img src="toto.jpg?5432564">
La solution est d'ailleurs présentée dans la :faq:
http://javascript.developpez.com/faq...#navig.nocache
20/04/2006, 11h16
fragmonster

Oui, c'est une solution que j'ai déjà testée. Ca marche. Mais j'ai simplifié ma question pour ne pas vous embrouiller, mais en fait je fais d'autres choses sur cette page et en particulier un aller/retour Ajax pour sauvegarder des infos en base de données sans recharger la page.

Je voulais donc profiter de cet aller/retour pour regénérer mon image.

Mais je vais me débrouiller avec ta solution ^^

Merci
20/04/2006, 11h21
titoumimi

un p'tit bout de code qui te gère ca :

http://titoumimi.free.fr/rafraichir_image.zip

Pendant ton aller / retour AJAX, tu effectues tes opérations sur ton image, il te suffit de placer ton image dans un div, et au retour d'ajax, de modifier le contenu de ce div avec un innerHTML et un p'tit coup de random pour mettre à jour ton image ;)
20/04/2006, 11h32
fragmonster

Oui, mais Ajax ne me retourne pas du HTML, mais le code de l'image.

Code:

1 2 document.getElementById('ton_div_cible').innerHTML = '<img src="ton_image.xxx?'++new Date().getTime()+'">'
?

(j'utilise juste un newdate à la place du random)

20/04/2006, 11h53
denisC

Citation:

Envoyé par fragmonster

Oui, mais Ajax ne me retourne pas du HTML, mais le code de l'image.

Ajax, n'a absolument rien à voir avec le rafraichissement d'une image (ça c'est sur).

Si tu veux rafraichir une image, la solution t'a été donné.

Si maintenant, tu veux la rafraichir après un appel Ajax, il faut que tu nous donnes plus d'élements sur le pourquoi et le comment.
J'ose esperer que la requete Ajax ne ramene pas le code de l'image comme tu le dis, parcequ'Ajax, ça ne marchera jamais qu'avec du texte, pas avec du binaire....
20/04/2006, 14h28
fragmonster

Citation:

Envoyé par denisC

Ajax, n'a absolument rien à voir avec le rafraichissement d'une image (ça c'est sur).

Merci, j'avais compris ça. Je me demandais juste si il n'y avait pas des solutions basée sur Ajax pour répondre à mon problème. En creusant un peu ici et là j'ai vu que non. Donc mon problème est réglé : je vais passer par la solution faisant appel à du javascript/DOM donnée plus haut par Swoög.

L'appel Ajax que je fais dans ma page insère des données en base et me retourne un flux XML que j'utilise via DOM pour raffraichir un tableau (ce pour quoi Ajax est prévu). Je me demandais si je ne pouvais pas étendre un peu peu plus le champ d'action de mon script. La réponse est non.
12/06/2006, 17h41
sirt
Bonjour

J'ai le m^me problème de rafraichissement d'image dans une jsp c'est thoujours l'ancienne qui s'affiche.

J'ai pris lme modèle de la faq de Spacefog
Code:

1 2 MonImage.src='fichierImage.jpg?'+new Date()*Math.random()
mais à la compilation j'ai l'erreur suivante

erreur N° 375 Operatur ne peut pas être appliqué a Java.util.date, double)

merci de vos reponse A+
01/11/2006, 13h13
jack_1981

c'est bon ce sujet