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