1. #1
    SuPeRfLy's Avatar
    Registered
    17/07/02
    Posts
    98
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    Question 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 advance
    no votes  

  2. #2
    frenzal's Avatar
    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 verwisselen
    Last edited by frenzal; 16-08-2007 at 17:52.
    no votes  

  3. #3
    SuPeRfLy's Avatar
    Registered
    17/07/02
    Posts
    98
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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 Code:
    <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 Code:
    <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
    thx in advance
    no votes  

  4. #4
    SuPeRfLy's Avatar
    Registered
    17/07/02
    Posts
    98
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    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:
    PHP Code:
    <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
    thx in advance
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in