Manipulating data using hash

Question

I have been creating an image viewer using jQuery and I have managed to get the image to show dynamically by using ajax to call my PHP code to get a new id of a image. When the user clicks on the button the image is shown with its relevant information, however if they navigate back only the image is changed as the other information is not saved within the hash.

I tried using an ajax post call to get the information of the hashed id however when I do this it recycles through the images like a look and this is not what I want. My code is below:

HTML

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

jQuery

$(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){
            $.getJSON("testimagelook.php", function(data) {             
            var id = data.id;
            document.location.hash = id;
            $("#lblName").html(data.name);
            $("#lblRating").html(data.average + " (" + data.votes + ") (<a href='User.php?uid=" + data.userid + "'>" + data.username + "</a>)");

            });
         }
     });
});

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

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

The PHP file returns a random row from the database in JSON format.

EDIT

The following function (updateImage()) has been changed but is not working:

function updateImage() {
     var id = document.location.hash.substring(1); // remove #


     if(known_images[id]==null){
        $.ajax({ //Make the Ajax Request
             type: "POST",
             url: "testimagelook.php", //file name
             data: {boxid: id},
             success: function(server_response){
                $.getJSON("testimagelook.php", function(data) {             
                var id = data.id;

                known_images[id] = [];
                known_images[id] ['name'] = data.name;
                known_images[id] ['average'] = data.average;
                known_images[id] ['votes'] = data.votes;
                known_images[id] ['username'] = data.username;
                known_images[id] ['userid'] = data.userid;

                });
             }
         });
     }

     $('#design').attr('src','img/boxes/'+id+'.png');
     $("#lblName").html(known_images[id]['name']);
     $('#lblRating').html(known_images[id] ['average'] + " (" + known_images[id] ['votes'] + ") (<a href='User.php?uid=" + known_images[id] ['userid'] + "'>" + known_images[id] ['username'] + "</a>)");
}

Answer 1

the most simple approach would be to add

var known_images = [];

to your javascript and for every ajax request you add:

// to be added at success: // at the end of your code!
known_images[id]= [];
known_images[id] ['lbl'] = data.name;
known_images[id] ['rating'] = data.average + " (" + data.votes + ") (<a href='User.php?uid=" + data.userid + "'>" + data.username + "</a>)";
// now all the information is chached in the browser

now in your updateImage function you can add

$("#lblName").html(known_images[id]['lbl']);
$("#lblRating").html(known_images[id]['rating');

to update those informations too from the array of known images

[EDIT]

to reduce the amount of data stored in known_images you can easily use

known_images.shift();

to delete the FIRST item from that array, so is you want to limit the array to a amximum length of say 100 entries you can add this:

if(known_images.length >100)
    known_images.shift();

right after adding a new id to said array in your "success:" - part of your ajax call

[EDIT II]

you still got your ajax requests wrong, you overwrite your ajax request with the inner getJSON call

as an example here's your updateImage function without the second request:

function updateImage() {
    var id = document.location.hash.substring(1); // remove #

    if(known_images[id]==null){
        $.ajax({ //Make the Ajax Request
            type: "POST",
            url: "testimagelook.php", //file name
            data: {boxid: id},
            success: function(server_response)
            {
                // Now just parse server_response into data without requesting NEW data like you did in your code!
                var data = $.parseJSON(server_response);
                var id = data.id;

                known_images[id] = [];
                known_images[id] ['name'] = data.name;
                known_images[id] ['average'] = data.average;
                known_images[id] ['votes'] = data.votes;
                known_images[id] ['username'] = data.username;
                known_images[id] ['userid'] = data.userid;
                // mind the parentheses here
            }
        });
    }
    $('#design').attr('src','img/boxes/'+id+'.png');
    $("#lblName").html(known_images[id]['name']);
    $('#lblRating').html(known_images[id] ['average'] + " (" + known_images[id] ['votes'] + ") (<a href='User.php?uid=" + known_images[id] ['userid'] + "'>" + known_images[id] ['username'] + "</a>)");
}