I have recently created a website that allows users to upload images and then let that user and other users of the website rate the images from 1-10. Everything is working correctly. When the user rates an image this is saved and then another random box is generated and presented to the user. This works by adding the new box id (randomly generated) to the query string. This allows for the user to navigate back to the images that they have just seen.

My problem es with updating the page. Currently my code processes the rating and saves it within the database then redirects the user to the same page where I have some code to find a random image id from the database and then using that id redirects them again to the same page with the id in the querystring. This works fine however i would like to make it so that only the image and the images information (image name rating etc..) are updated and the rest of the HTML (Header, Navigation, Side bars, Footer, etc...) is not.

From my understanding you can upload part of a website using JQuery/Javascrip/AJAX? However this would not allow the user to redirect back to the previously viewed image?

If you would like any more information please ask.

EDIT

I have took some of the information on board and have altered my code to use hash values my code is below:

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?

I have recently created a website that allows users to upload images and then let that user and other users of the website rate the images from 1-10. Everything is working correctly. When the user rates an image this is saved and then another random box is generated and presented to the user. This works by adding the new box id (randomly generated) to the query string. This allows for the user to navigate back to the images that they have just seen.

My problem es with updating the page. Currently my code processes the rating and saves it within the database then redirects the user to the same page where I have some code to find a random image id from the database and then using that id redirects them again to the same page with the id in the querystring. This works fine however i would like to make it so that only the image and the images information (image name rating etc..) are updated and the rest of the HTML (Header, Navigation, Side bars, Footer, etc...) is not.

From my understanding you can upload part of a website using JQuery/Javascrip/AJAX? However this would not allow the user to redirect back to the previously viewed image?

If you would like any more information please ask.

EDIT

I have took some of the information on board and have altered my code to use hash values my code is below:

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?

• php
• javascript
• jquery
• ajax
• updating

• you can save the image_id in session. – Bhavik Shah Commented Feb 12, 2013 at 12:08

3 Answers 3

Yes you can achieve this using jQuery AJAX method
For your simplicity use this

$.post('pageURL.php', {data1: value1}, function(result) {
  // Update the portion of the page you wish to

});  

UPDATED

$.ajax({
  type: "POST",
  url: "PageName.aspx/MethodName",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(data) {
    // Now receive the data (information) in the form of JSON
    // In this JSON you can pass the imageID or anything to proceed your logic
    // and update the portion of the page you wish to
  }
});

There are several ways to do what you like.

Newer (html5 supporting) browsers expose a History object to the client that can be used to add and remove history (back-forward button) locations.

https://developer.mozilla/en-US/docs/DOM/Manipulating_the_browser_history

But this is still new and you can't force your users to use newer browsers.

A way that "always" works is to add #yourId anchors to the href member of the document.location object which would identify your image. This would then be automatically saved in the browsers history. To then use this information you would have to make sure you catch the change in the document.location object and update your image view with the appropriate data via an Ajax request.

I am coding something similar myself, you could try something like this:

newimage.js:

function newImage(id,rate) {
    $('.wrapper').empty();
    $.ajax({
        url:'dbfunction.php',
        type:'POST',
        data: { 'imageid': i, 'rating':rate }
    }).success(function(){
        // Using jquery append new information inside wrapper      
    });
}

dbfunction.php:

<?php
    mysql_query("UPDATE table SET rating='".$_POST['rating']."' WHERE id='".$_POST['id']."'");

    // Get new id from db
    echo json_encode($new_id);
?>

This is a really small example to get you started. Any questions just ask. More info could be found here & here.

To clarify a bit, I use similar code on my webpage. You can access all information without every updating the page. All page history is being saved inside a global array. Keep in mind the webpage is in the making and is not all functional!