Tue 31 Aug 2010
Maybe you have a giant warehouse and you’d like some large LCD monitors around the shipping lines which have the orders listed for all to see. You’d like these LCDs to update frequently and to be specific to each shipping line.
What to do? Well, there is meta-refresh every second, but that’s flickery and lame. Let’s get the javascript prototype library to update divs based on the location selected in a dropdown list:
<!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> <title>LCD Terminal Somewhere</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script> <body> <script> var url = 'get_content.php'; var pars = 'location=1'; var myAjax = new Ajax.PeriodicalUpdater( 'placeholder', url, { method: 'post', //use post or IE will cache(with get) parameters: pars, frequency: 2 }); </script> </head> <body> <h2>Terminal Display</h2><i>(content refreshes every two seconds)</i><br /> <div id="placeholder" style="width:600px; height: 300px; border-width: .1em;border-style: solid;border-color: #000;">Lorum Ipsum</div> <p><p><p> <form> <label for="myLocation">Change Location: </label><select name="myLocation" id="myLocation" onchange="pars='location='+this.options[this.selectedIndex].value; myAjax.options.parameters = pars.toQueryParams();"> <option value="1">Line 1</option> <option value="2">Lines 2 and 3</option> <option value="3">Reception</option> <option value="4">Break Room</option> </select> </form> </body> </html>
And here is get_content.php
<?php switch($_REQUEST['location']) { case 1: echo("<h2>Some custom data for Line 1</h2>"); break; case 2: echo("<h2>Custom datagrid for Lines 2 and 3</h2>"); break; case 3: echo("<h2>This would be displayed on the receptionist LCD</h2>"); break; case 4: echo("<h2>Content for the break room</h2>"); break; } print("<p><p><div align=\"right\">Last Updated: "); print strftime('%c'); print("</div>");
