javascript - JavaScript back button to display previous list

Question

I want create a web application that display a list of items. Suppose I have displayed a list view (say listobject1) of 3 items. when clicked on any of them I get new list view (say listobject2) which its value is according to listobject1. When again I click one of them I get another view. Now when I click back button i want to go back to previous list view i.e. when I'm now on listobject2 and again when back button is pressed I want to show listobject1. Can anybody tell me how I can do this in JavaScript?

Edit I'm still study about the stuff but I can't solve this problem yet. In order to clarify my problem now, here's my code:

$(document).ready(function() {
$("#result").hide();
$("input[name='indexsearch']").live("click", function()  {
    
    $("#result").show();
    $("#result").empty();

    loading_img();
    var $textInput = $("[name='valueLiteral']").val();

    $.getJSON("get_onto", {
        "input" : $textInput
    }, function(json) {
        if(json.length > 0 ) {
            var arrayPredicate = [];
            var arrayObject = [];
            var arraySubject = [];
            $.each(json, function(index, value) {
                arraySubject[index] = value.subject;
                arrayPredicate[index] = value.predicate;
                if(value.objectGeneral != null) {
                    arrayObject[index] = value.objectGeneral;
                } else {
                    arrayObject[index] = value.objectLiteral;
                }
            }

            );
            var stmt = [];
            //concat all related array into string (create triple statement)
            $.each(arrayPredicate, function(k,v){
                stmt[k] = "<span class='subject' id="+arraySubject[k]+">" 
                    + arraySubject[k] + "</span> " + " -> " + v + " : "+ 
                     //change object from text to be button form
                    "<button class = 'searchAgain-button'  name = 'searchMore' \n\
                    value = " + arrayObject[k] + ">" + arrayObject[k] + "</button><br>       <br>";
            });
            stmt = stmt.sort();
            $.each(stmt, function(k,v){
                $("#result").append(v);
            });
        } else {
            var $noresult = "No Result : Please enter a query";
            $("#result").append($noresult);
        }
    });

    
});

$("button").live("click", function() {
    $("#result").show();
    $("#result").empty();

    loading_img();
    var $textInput = $(this).attr("Value");
    //var $textInput = "G53SQM";

    $.getJSON("get_onto", {
        "input" : $textInput
    }, function(json) {
        if(json.length > 0 ) {
            var arrayPredicate = [];
            var arrayObject = [];
            var arraySubject = [];
            $.each(json, function(index, value) {
                arraySubject[index] = value.subject;
                arrayPredicate[index] = value.predicate;
                if(value.objectGeneral != null) {
                    arrayObject[index] = value.objectGeneral;
                } else {
                    arrayObject[index] = value.objectLiteral;
                }
            }

            );
            var stmt = [];
            var searchMore = "searchMore";
            //concat all related array into string (create triple statement)
            $.each(arrayPredicate, function(k,v){
                stmt[k] = "<span class='subject' id="+arraySubject[k]+">" + arraySubject[k] + "</span> " + " -> " + v + " : "+ " <button class = 'searchAgain-button' name = " +searchMore + " value = " + arrayObject[k] + ">" + arrayObject[k] + "</button><br><br>";
        });
            stmt = stmt.sort();
            $.each(stmt, function(k,v){
                $("#result").append(v);
            });
        } else {
            var $noresult = "No Result : Please enter a query";
            $("#result").append($noresult);
        }
    });      
}); 

At first, user only see one button name "valueLiteral". After user perform 1st search, the result is return in a form of JSON and eventually put in stmt[] to display, which at this state the second button was create as a clickable-result which will automatically take the value of result and do second search if user click the second button. Now the problem is, I want to add a 3rd HTML button name "back" to make the web display the previous result in stmt[] if user click on the button.

Hope this helps in clarify the problems, I'm still doing a hard work on this stuff since I'm a newbie in JavaScript. Appreciate all helps.

Answer 1

jQueryBBQをチェックしてください-http://benalman.com/projects/jquery-bbq-plugin/

Answer 2

This is what you want almost exactly the way you want it.

You'll have to use history.pushState to push these fake events into the history.

Alternatively, you can use location.hash to store the current object, and update the hash every time you display a new list. Then onhashchange find the hash and display the appropriate list.

Answer 3

See http://jsfiddle.net/cFwME/

var history=[new Array(),new Array()];
history[0].id="#back";
history[1].id="#next";
Array.prototype.last=function(){
    return this[this.length-1];
}
$('#list>li:not(:first)').click(function(){
    if(!history[0].length || history[0].last().html()!=$('#list').html()){
        history[0].push($('#list').clone(true,true));
        $(history[0].id).prop('disabled',false);
        history[1].length=0;
        $(history[1].id).prop('disabled',true);
    }
    $('#list>li:first').html('This is List '+$(this).index());
});
$('#back').click(getHistory(0));
$('#next').click(getHistory(1));

function getHistory(n){
    return function(){
        if(!history[n].length){return false;}
        history[(n+1)%2].push($('#list').replaceWith(history[n].last()));
        history[n].pop();
        $(history[(n+1)%2].id).prop('disabled',false);
        if(!history[n].length){$(history[n].id).prop('disabled',true);}
    }
}