1

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 comes 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?

Glen Robson
  • 908
  • 2
  • 19
  • 42

3 Answers3

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
  }
});
asifsid88
  • 4,631
  • 20
  • 30
  • 1
    he explicitely said that he did NOT want to reload the page; only parts of it. :) – Gung Foo Feb 12 '13 at 12:09
  • how to show the exact image back which user viewed previously? – Bhavik Shah Feb 12 '13 at 12:09
  • Maintain a session using php `$_SESSION['imageID'] = 101` – asifsid88 Feb 12 '13 at 12:12
  • @asifsid88: Thats what i have suggested in my comment above, but in your answer, you are suggesting to reload page. – Bhavik Shah Feb 12 '13 at 12:13
  • @asifsid88 Does this method involve loading the whole page again at some point? – Glen Robson Feb 12 '13 at 12:20
  • No it will not load the entire page, it will go to the respective page, process the thing and returns with the desired result. Then you use that result to do further processing. Its all done behind the scene and none of the portion of your page is hung – asifsid88 Feb 12 '13 at 12:23
  • this still does not answer the part about preserving the history and have previous pictures loaded upon click on the back button. This is simply telling him to use ajax, something the OP already knew and stated in his question. :S – Gung Foo Feb 12 '13 at 12:24
1

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.org/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.

Gung Foo
  • 13,392
  • 5
  • 31
  • 39
  • He want to change image using AJAX and selection of next image is random. How to navigate back to same image that user has just viewed? – Bhavik Shah Feb 12 '13 at 12:12
  • My post explains that. (an anchor in the documents url) like mypage.com/images#image4 – Gung Foo Feb 12 '13 at 12:15
  • Sorry, but i didnt get it. Can you please elaborate. Say, there are 100 images in db and system selects one randomly. And then next image is displayed, **without page reload**. No changes in URL. This is the scenario. Right? Now, what your answer suggests? – Bhavik Shah Feb 12 '13 at 12:18
  • changing document.location.href adds the old value to the history. only adding an anchor to the url does not make the page reload. before you keep asking, yes it works, i have used it many times. – Gung Foo Feb 12 '13 at 12:20
  • @GungFoo This looks like a great way of doing things but i am still a little confused as to how to implement this. (i have never used anchor's) would you be able to provide some sample code? – Glen Robson Feb 12 '13 at 13:53
0

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!

leko
  • 2,308
  • 1
  • 11
  • 11