Examples: History Explorer

Live Example

This example will open a new window.

Front End
Back End

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chapter 9 : Architecture - History Explorer </title>
<link rel="stylesheet" href="http://ajaxref.com/ch9/global.css" type="text/css" media="screen" />

<style type="text/css">

 
    .stripe {background-color:#33ffff;}

</style>

<script type="text/javascript" src="http://ajaxref.com/ch9/ajaxtcr.js">

</script>

<script type="text/javascript" src="http://ajaxref.com/ch9/util.js">

</script>

<script type="text/javascript" src="http://ajaxref.com/ch9/stars.js">

</script>

<script type="text/javascript">

 
 
function sendRequest(form)
{
    var payload = "name=" + form.name.value;
    var history = null;
    if (form.history.checked)
    {
        history = {};
        history.id = form.hash.value;
        history.title = form.title.value;
        history.saveResponse = form.storeResults.checked;
    }     
    
    var url = "http://ajaxref.com/ch9/hello.php";
    var options = { method: "GET",
                  payload: payload, 
                  history: history, 
                    onSuccess: showResponse};
                      
    AjaxTCR.comm.sendRequest(url,options);
}
 
function showResponse(response, callbackValue)
{
    if (response)
        $id("responseOutput").innerHTML = response.responseText;
    else if (callbackValue)
        $id("responseOutput").innerHTML = callbackValue;
        
    var form = document.historyForm;
    form.hash.value = "";
    form.title.value = "";
    form.name.value = "";
    
    var output = "";
    var history = AjaxTCR.history.getAll();
    var position = AjaxTCR.history.getPosition();
    for (var i=0;i<history.length;i++)
    {
        if ((i+1) == position)
            output += "<b>" + history[i].title + ": " + history[i].id + "</b><br />";
        else
            output += history[i].title + ": " + history[i].id + "<br />";
    }
    
    $id("length").innerHTML = history.length + " item";
    if (history.length != 1)
        $id("length").innerHTML += "s";
        
    $id("historyOutput").innerHTML = output;
}
 
 
function updateFields(form, checked)
{
    if (checked)
    {
        form.hash.disabled = false;
        form.title.disabled = false;
        form.storeResults.disabled = false;
    }
    else
    {
        form.hash.disabled = true;
        form.title.disabled = true;
        form.storeResults.disabled = true;
    }
 
}
 
window.onload = function()
{
    AjaxTCR.history.init(showResponse, "Welcome to the Ajax History Explorer");
    document.historyForm.normalButton.onclick = function(){ sendRequest(this.form);};
    document.historyForm.backButton.onclick = function(){ history.go(-1);};
    document.historyForm.forwardButton.onclick = function(){ history.go(1);};
    document.historyForm.history.onchange = function(){ updateFields(this.form, this.checked);};
};

</script>

 
</head>
<body>
<div>
<body>
<div class="content">
<h1>History Explorer</h1>
<form action="#" name="historyForm">
<fieldset>
<div style="position:relative;">
<table width="100%">
<tr class="row">
    <td>Name to echo:</td>    
    <td colspan="7">
        <input type="text" name="name" size="40" />
   </td> 
</tr>
<tr class="row">
    <td>Store Request in History:</td>    
    <td colspan="7">
        <input type="Checkbox" name="history" checked="true" />
   </td> 
</tr>
<tr class="row">
    <td>Store Results:</td>    
    <td colspan="7">
        <input type="Checkbox" name="storeResults" checked="true" />
   </td> 
</tr>
<tr class="row">
    <td width="150px">Hash Value:</td>    
    <td colspan="7">
        <input type="text" name="hash" size="40" />
   </td> 
</tr>
<tr class="row">
    <td>Title:</td>    
    <td colspan="7">
        <input type="text" name="title" size="40" />
   </td> 
</tr>
 
</table>
</div>
</fieldset>
  
<br />
  <input type="button" name="normalButton" value="Send Request" />&nbsp;<input type="button" name="backButton" value="Back" />&nbsp;<input type="button" name="forwardButton" value="Forward" />
</form>
</div>
<div id="response" class="results" >
    <div id="responseOutput">Welcome to the Ajax History Explorer</div>
    <h3>Current History - <span id="length">1 Item</span></h3>
    <div id="historyOutput">&nbsp;</div>
</div>
 
 
</body>
</html>