Discussion :

[fragmonster]

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

[Swoög]

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

Code :

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

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

[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.

[Swoög]

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

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

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
<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 ^^

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

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

1
2
 
<img src="toto.jpg?5432564">

La solution est d'ailleurs présentée dans la
http://javascript.developpez.com/faq...#navig.nocache

[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

[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

[fragmonster]

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

[titoumimi]

Code :

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

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)

[denisC]

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....

[fragmonster]

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.

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

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

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+

[jack_1981]

c'est bon ce sujet