reload page to reflect changes

Question

I've my jquery code

.ajax({
            type: "POST",
            url: "crop/crop.php",
            data: dataString,
            cache: false,
            success: function(data){
                $('#popupMargin').hide();
                $('#avatar img').remove();
                $('#avatar').load('crop/dp.php');
                //$('#avatar').hide();

            }
        });

Now

//Codes in the file loaded (`dp.php`) called by jQuery above

    <?php session_start(); ?>
    <!-- To display display picture just after croppping -->
    <img src="users/<?php echo $_SESSION['userId']; ?>/img/dp.jpg" width="150">

The above ajax is called whenever I clicked a button #btn . The file crop.php crops an image and saves it at the same location and same name as seen above in the dp.php .

So it means, everytime the user clicks on the button #btn , the image is changed. I want the change to be reflected as $('#avatar').load('crop/dp.php'); is called in the jQuery code above; however, I'm not sure if it's some kind of caching that the old image still shows up.

Does .load() reloads the page? How do I make sure that the change (updated image) is shown instead of the old one??

Answer 1

I would recommend appending:

'?foo='+Math.random();

to your image path.. its a good hack for making sure you always see the most recent version of a file (eg by providing the url with a different parameter each time - you are guaranteed to circumvent any caching).

Answer 2

If you're worried about caching, you can append a timestamp as a GET parameter to your ajax request. Which will normally force the browser to download a fresh copy.

 $('#avatar').load('crop/dp.php?' + (new Date().getTime()));

Also, if the $_SESSION['userId'] remains the same between requests, it wouldn't hurt to force a reload of the actual jpg too.

<img src="users/<?php echo $_SESSION['userId']; ?>/img/dp.jpg?<?php echo time(); ?>" width="150">

Hope that helps.

Answer 3

Try var_dump of the $_SESSION variable to make sure it changed in your PHP code.

Make sure in both crop/crop.php and crop/dp.php you have session_start() at the top of the code.