Question

Below is my code using ajax to dynamically change the image without refreshing the page.

HTML

<img id="design" alt="" width="300" height="300"  />
<input type="button" id="GetImage" value="Get Image" />

JQUERY

$(document).ready(function(){

$("#GetImage").click(function() {

    $.ajax({ //Make the Ajax Request
             type: "POST",
             url: "testimagelook.php", //file name
             success: function(server_response){
                var id = server_response;
                document.location.hash = id;
                $('#design').attr('src','img/boxes/'+id+'.png');
             }
    });
});

});

The php file testimagelook.php connects to the database and brings back a random id of one of my images. This code works fine for showing the image and saving the id of the image in the hash of the URL allowing me to preserve the users history of images. However I am unsure on how I would retrieve the previous hash value and reload the image with the correct id when the user clicks the back button. Any ideas?

Answer 1

Try this:

 $(document).ready(function(){

    if (document.location.hash) {
         updateImage();
    }

    $("#GetImage").click(function() {

         $.ajax({ //Make the Ajax Request
             type: "POST",
             url: "testimagelook.php", //file name
             success: function(server_response){
                var id = server_response;
                document.location.hash = id;
             }
         });
    });

    $(window).bind('hashchange',function(){
           updateImage();
    });

    function updateImage() {
         var id = document.location.hash.substring(1); // remove #
         $('#design').attr('src','img/boxes/'+id+'.png');
    }
});