cache : vider le cacher sans rechargement

**Navyel** · 20/03/2007, 15h31

Bonjour à tous !

Ceci est mon premeir message dans ce forum et après beaucoup de recherches sans réponses, j'espere ne pas enfreindre de règles.

Je developpe actuellement une application de galerie d'image en ajax (avec php comme langage serveur).

tout marche bien, excepté, un problème lors de la suppression d'images. Lorsque je supprime l'image (en ajax) la page ne se recharge pas (c ce que je veux c pour ca que je le fais en ajax) mais si l'image est correctement supprimée, elle n'est pas supprimée de la mémoire cache. Je suis obligé de réactualiser la page, malgré les balise header() permettant de vider le cache pour que la suppression soit prise en compte à l'oeil de l'internaute.

autrement, l'image supprimée semble toujorus présente pour l'internaute, ce qu iest problématique.

autrement dit, le but serait de vider le cache dynamiquement, sans avoir a recharger toute la page. est-ce possible ? si oui, comment ?

j'espere avoir été assez clair, et je vous remercie de vos réponses !

**magnus2005** · 20/03/2007, 15h52

Quel est ton probleme fonctionelle ?

Au niveau technique :

Code :

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

but serait de vider le cache dynamiquement, sans avoir a recharger toute la page. est-ce possible ? si oui, comment ?

Non pas explicitement et pas en javascript et/ou en HTML

Au niveau technique pour contourner le probleme c est en generale d ajouter un timestamp a tes resources, mais la je vois pas quelle est le souci pour l'utilisateur ?

Il revoit une ancienne image dans son browser ?

**SpaceFrog** · 20/03/2007, 16h15

envoie ta requete avec un timestamp ...

**Navyel** · 20/03/2007, 16h51

Envoyé par magnus2005

Au niveau technique pour contourner le probleme c est en generale d ajouter un timestamp a tes resources, mais la je vois pas quelle est le souci pour l'utilisateur ?

Il revoit une ancienne dans son browser ?

Exactement. En fait, lorsqu'un utilisateur supprime une de ses photos, je renomme la derniere photo de la base de données du même album avec omme nouveau nom le nom de la photo supprimée et je supprime la dernière entrée de la table dans ma base de données.

Rien ne vaut un peu de code :

Voici la requete ajax :

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
19
20
21
22
23
24
25
26
27
28
29
 
//On instancie l'objet Xhr
var req_delete_photo = getHttpObject();
 
// Suppression de la photo
function delete_photo(photo, defaut)
{
	req_delete_photo.open('GET', 'modules/photos/delete_photo.php?photo=' + photo,true); //on passe la photo en parametre dans l'url
	req_delete_photo.onreadystatechange = resp_delete_photo;
	req_delete_photo.send(null);
}
 
function resp_delete_photo()
{
	$("photo_plus").style.display = "block"; //on rend le bloc "photo_plus" visible"
	if (req_delete_photo.readyState == 4)
	{
		if (req_delete_photo.status == 200)
		{	
			$("photo_plus").innerHTML = req_delete_photo.responseText; //affichage de la reponse du serveur dans "photo_plus"
			setTimeout("display_photo(0,-1)",100); //reafichage de la photo
		}
		else
			$("photo_plus").innerHTML = "Suppression impossible en raison d'une erreur serveur";
	}
	else
		$("message").innerHTML = "Suppression en cours...";
 
}

Et voici une petite partie du code php du fichier delete_photo.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
 
$photo = $_GET['photo']; //photo correspond à l'url de la photo
$last_photo = $photos[sizeof($photos)-1]->url; //last_photo est la derniere photo de l'album du même user
 
unlink($photo); //on supprime la photo
rename($last_photo,$photo); //on renomme la derniere photo
 
$sql="DELETE FROM photos WHERE photos.id_user='$id' AND photos.url = '$last_photo'";
$delete=db_query($sql);
 
?>

Donc voila effectivement un timestamp peut être la solution mais comment l'intégrer ?

Merci pour vos réponses !

**SpaceFrog** · 20/03/2007, 16h55

Code :

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

	req_delete_photo.open('GET', 'modules/photos/delete_photo.php?photo=' + photo+'& '+new Date(),true);

**magnus2005** · 20/03/2007, 16h56

Pour le timestamp suffit de mettre du code bidon mais créeant une URL unique :

Code :

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

1
2
3
var date = new Date();
var myurl ="modules/photos/delete_photo.php?photo=" + photo +"&timestamp=" + date.getTime();
xhr.open("GET",myurl,true);

**Navyel** · 20/03/2007, 17h10

Je vous remercie, malheureusement ca ne marche toujours pas.

J'ai rajouté le timestamp, mais malgré tout il ne vide pas le cache. aurais-je un problème avec mes header ?

Code :

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

1
2
3
4
 
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');

Ils sont présents dans la page php d'affichage de photo et dans la page php de suppression de photo delete_photo.php

ou alors il y a une autre manipulation a faire avec le timestamp ?

**SpaceFrog** · 20/03/2007, 17h16

en fait tu veux juste faire une mise à jour visuelle pour le client ...

fais une petit fonction javascript qui supprimera l'element du visuel ....

elle est l'image dasn le code de la page ?

**Navyel** · 20/03/2007, 17h42

Envoyé par SpaceFrog

en fait tu veux juste faire une mise à jour visuelle pour le client ...

Oui voila exactement, pour pas qu'il pense que son image n'a pas été supprimée

fais une petit fonction javascript qui supprimera l'element du visuel ....

oui je viens d'essayer avec un removeChild qui supprime le div dans lequel se trouve l'image malheureusement ca ne fonctionne pas...

elle est l'image dasn le code de la page ?

Comment ca ?

en fait j'ai un div qui contient l'image et qui est généré par une requete ajax créée par la fonction javascript display_photo()

Je sens qu'effectivement, tu as raison pour la fonction javascript. mais la mienne ne doit pas convenir. tu proposerais quoi ?

merci encore !

**magnus2005** · 20/03/2007, 18h24

Montre voir ton code pour retirer le DIV contenant ton IMG ?

**Navyel** · 20/03/2007, 18h37

en fait, apres un peu de reflexion, je sais pas si c la solution car on peut charger plusieurs images dans le meme div que je supprime et ke je recreer dans la foulée avec un setTimeout().

cela dit voici quand même le code javascript qui supprime l'element :

Code :

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

1
2
3
4
5
 
function delete_element(conteneur, element)
{
	$(conteneur).removeChild($(element));
}

J'appelle cette fonction juste apres la reponse serveur de la requete ajax de suppression :

Code :

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

1
2
3
4
 
$("photo_plus").innerHTML = req_delete_photo.responseText;
delete_element("zone_photo","photo"); // suppression de l'element
setTimeout("display_photo(0,-1)",100); // l'element est recréé grace a une nouvelle requete ajax qui est censé réaffiché une autre photo quelque secondes après

Voici comment est placé mon image dans ma page :

Code :

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

1
2
3
4
5
6
7
8
9
 
<div id="zone_photo">
    <div id="menu_photo">
    // menu photo qui permet de changer l'affichage de la photo pour afficher une autre photo, mais aussi de rajouter une photo et d'en supprimer une
    </div>
    <div id="photo"> // affichage de la photo
        <img src="<?= $photos[$i]->url ?>" width="200" alt="<?= $photos[$i]->titre; ?>" />
    </div>
</div>

Voila au final je crois que j'en reviens a mon problème de cache... non ??

**magnus2005** · 20/03/2007, 18h43

A mon avis c est ici que ça coince
ton URL est reste la meme je suppose ?

Code :

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

$photos[$i]->url

**Navyel** · 20/03/2007, 18h46

Envoyé par magnus2005

A mon avis c est ici que ça coince
ton URL est reste la meme je suppose ?

Oui, en fait l'url de l'image supprimée existe toujours et est censée correspondre a une autre image (voir mon code php delete_photo.php) et j'aimerais que ce soit l'autre image qui s'affiche et pas celle qui a été supprimée...

**magnus2005** · 20/03/2007, 18h47

Ta fonction est trop ambigu pour moi
Essai avec ça :

Code :

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

1
2
3
4
5
6
function delete_element(conteneur, element)
{
var par = document.getElementById(conteneur);
var el = document.getElementById(element);
 par.removeChild(el);
}

Du coup ça va pas t avancer de supprimer l element dans la page

Essaie d ajouter le timestamp a la fin de l URL de ton image.

JE te le repete mais
A priori il n ya aucun moyen de supprimer l element qui est dans la cache
il faut lui faire comprendre que c est un nouveau.

**Navyel** · 20/03/2007, 19h01

Malheureusement ca revient exactement au même.

Mais je pense que c'est normal étant donné que je recréer l'element quelques centiemes de secondes après sans avoir fait de rechargement de page entre temps.

**Navyel** · 20/03/2007, 19h04

Envoyé par magnus2005

Essaie d ajouter le timestamp a la fin de l URL de ton image.

JE te le repete mais
A priori il n ya aucun moyen de supprimer l element qui est dans la cache
il faut lui faire comprendre que c est un nouveau.

Oui je pense que c'est la seule solution, ou alors un nombre aléatoire...

bon je vais essayer et je vous tiens au courant.

en tout cas merci à toi !

**SpaceFrog** · 20/03/2007, 19h14

le removeChild doit fonctionner

et pour avoir la nouvelle image si tu veux faire une mise à jour d'une image sur la page, fait un timestamp dur le src aussi !

Code :

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

obj.src="image.gif?"+new Date()

**Navyel** · 20/03/2007, 22h56

oui merci à tous les 2 !!

effectivement c'était la solution ! le timestamp sur l'image.

encore merci !!

**mistercard** · 17/02/2008, 14h23

Bonjour,

J'ai pas tout pigé ci-dessus, mais j'ai aussi eu un problème avec les images supprimées qui s'affichaient quand même à cause du cache du navigateur, solutionné via les valeurs aléatoires utilisées dans le nom de fichier-photo...
Voici donc mes pérégrinations : http://ziprof.free.fr/PHP-MYSQL/forc...e-de-cache.php

(Avec l'Url-Rewritting)

Peut être cela suffira-t-il pour d'autres pékins dans le même cas que moi...

A+ et bon courage +

Phil
http://www.mistercard.net http://www.livreoccasion.com http://www.i-prof.fr

cache : vider le cacher sans rechargement

JavaScript

Discussions similaires

Partager

Partager