Archief - AJAX: Image refresh, zonder page reload

SuPeRfLy · 16 aug 2007

Ik ben al 2 dagen vruchteloos aan het googelen.
Ik ben een php gallery aan het bouwen en ik wil in de backend onderstaande functionaliteit inbouwen:

1.Thumbnails weergeven
2.Klik op thumbnail ---> open thickbox met module om afbeelding te bewerken
3.Klaar met bewerkingen ---> nieuwe versie van afbeelding en bijhorende thumbnail opslaan
4. :help:

Thickbox sluiten ---> thumbnail van afbeelding updaten zonder volledige pagina te vernieuwen :help:

Het probleem stelt zich bij stap vier.
De nieuwe versie van de afbeelding heeft de oude op de server vervangen maar de de bestandsnaam is niet veranderd.
dus demo.jpg blijft demo.jpg maar is niet meer dezelfde afbeelding
In tegenstelling tot bijvoorbeeld text worden de gewijzigde afbeeldingen enkel weergegeven als ik de volledige pagina vernieuw. :oink:

ps. gisteren een gelijkaardige post gemaakt maar minder goed uitgelegd wat het probleem was, die heb ik verwijderd

frenzal · 16 aug 2007

misschien met javascript de src veranderen naar thumb.jpg?blah, dat zou normaal nog moeten werken denk ik en het kan dan zijn dat de browser de nieuwe versie van de afbeelding zal gebruiken omdat de url anders is. maar ik ben niet zeker...

nog een ander idee:
maak een rewriterule die bijvoorbeeld new_thumb.jpg rewrite naar thumb.jpg, zo heb je nieuwe url ma toch zelfde image en moet je nog steeds enkel de src even verwisselen

SuPeRfLy · 16 aug 2007

Dit is de js code die ik gebruik voor het laden php paginas in div's aan de hand van hun id.

Code:

<script type="text/javascript">
		function ahah(url, target) {
  document.getElementById(target).innerHTML = ' Fetching data...';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}  

function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function load(name, div) {
	ahah(name,div);
	return false;
}
	</script>

Dit is de link tag om de content in de div te laden

HTML:

<a href="ajax.php" onclick="load('ajax.php?image=afbeelding.jpg','image');return false;">kat1</a>

en dit is de php pagina die geladen wordt

PHP:

<head>
<meta http-equiv="expires" content="0">
</head>
<img src="../images/<?php echo $_GET['image']; ?>" alt="cat"/>

afbeeldingen worden niet vernieuwd tenzij ik de volledige pagina vernieuw :doh:

SuPeRfLy · 20 aug 2007

Ik heb het eindelijk opgelost. De truc is om met php of javascript een unieke url variable mee te geven.

Zoals in onderstaand voorbeeld:

PHP:

<img src="../images/cat.jpg?rand=<?php $rand=time();echo$rand; ?>" alt="cat"/>

Als de afbeelding cat.jpg nu server side gewijzigd wordt, dan zal deze altijd opnieuw geladen worden als je ze oproept via XMLHttpRequest; omdat de browser door de constant veranderende waarde van de timestamp denkt dat het telkens om een andere afbeelding gaat :applause:

Archief - AJAX: Image refresh, zonder page reload

SuPeRfLy

Legacy Member

frenzal

Legacy Member

SuPeRfLy

Legacy Member

SuPeRfLy

Legacy Member