Examples: Prototype - Periodical Updater

zip Download
This Example

This example illustrates the Prototype Updater. The updater will run and update the text every 3 seconds until told to stop.
Note: This example uses version 1.5.0 of Prototype.

Front End
Back End

view plain print

<!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 5 - Prototype Hello Ajax World with Periodic Updater</title>

<script type="text/javascript" src="https://ajaxref.com/lib/prototype/prototype.js">

</script>

<script type="text/javascript">

 
 
function sendRequest()
{    
    var updater = new Ajax.PeriodicalUpdater("responseOutput", "https://ajaxref.com/ch1/sayhello.php", { method: "get", frequency:3 });
    $("helloButton").disabled = true;
    $("stopButton").disabled = false;
    Event.observe("stopButton", "click", function(){stopRequest(updater);});
    
}  
 
function stopRequest(updater)
{
    updater.stop();
    $("helloButton").disabled = false;
    $("stopButton").disabled = true;
    Event.stopObserving("stopButton", "click", function(){stopRequest(updater);})
    
}
   
Event.observe(window, "load", function() 
{
    Event.observe("helloButton", "click", sendRequest);
});

</script>

 
</head>
<body>
 
<form action="#">
<input type="button" value="Say Hello every 3 seconds" id="helloButton"  />
<input type="button" value="Stop saying hello" id="stopButton" disabled="true"  />
</form>
 
<br /><br />
 
<div id="responseOutput">&nbsp;</div>
 
</body>
</html>