-
16-08-2007, 15:45 #1
AJAX: Image refresh, zonder page reload
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.
Thickbox sluiten ---> thumbnail van afbeelding updaten zonder volledige pagina te vernieuwen
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.
ps. gisteren een gelijkaardige post gemaakt maar minder goed uitgelegd wat het probleem was, die heb ik verwijderd
thx in advanceno votes
-
-
16-08-2007, 17:45 #2Member
- Registered
- 20/12/02
- Location
- Antwerpen
- Posts
- 1,319
- iTrader
- 8 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/1
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 verwisselenLast edited by frenzal; 16-08-2007 at 17:52.
no votes
-
16-08-2007, 19:07 #3
Dit is de js code die ik gebruik voor het laden php paginas in div's aan de hand van hun id.
Dit is de link tag om de content in de div te ladenCode:<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>
en dit is de php pagina die geladen wordtHTML Code:<a href="ajax.php" onclick="load('ajax.php?image=afbeelding.jpg','image');return false;">kat1</a>
afbeeldingen worden niet vernieuwd tenzij ik de volledige pagina vernieuwPHP Code:<head>
<meta http-equiv="expires" content="0">
</head>
<img src="../images/<?php echo $_GET['image']; ?>" alt="cat"/>
thx in advanceno votes
-
20-08-2007, 15:54 #4
Probleem Opgelost
Ik heb het eindelijk opgelost. De truc is om met php of javascript een unieke url variable mee te geven.
Zoals in onderstaand voorbeeld:
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 gaatPHP Code:<img src="../images/cat.jpg?rand=<?php $rand=time();echo$rand; ?>" alt="cat"/>
thx in advanceno votes
