PDA

View Full Version : A Little help please with Webserver Ajax



danward79
August 22nd, 2005, 02:17 PM
Hi

I have been playing around with the webserver, even got me a nice domain name to make getting to it easier, from anywhere.

Now, basically I ripped apart Ron's example to come up with, what you see in the pic below.

What I would really like to see now is the LED indicators on the right monitored by AJAX.

So far I have the code below, but am a html mumpty so am a bit clueless as to how I got there!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dan's Webserver</title><meta http-equiv="Pragma" content="no-cache">
<style type="text/css">
BODY &#123; font-family&#58; sans-serif;
margin&#58;0px;
background-repeat&#58; repeat-y;
background-position&#58; right;
&#125;
TABLE.p &#123; border-right&#58; solid 1px black;
border-top&#58; solid 1px black;
border-bottom&#58; solid 1px black;
background&#58; #EEEEEE;
&#125;
TH.p &#123; border-left&#58; solid 1px black;
border-Bottom&#58; solid 1px black; background&#58;#EEEEEE; text-align&#58;center;
&#125;
TH.p2 &#123; border-left&#58; solid 1px black;
border-Bottom&#58; solid 1px black; background&#58;#FFFFFF; text-align&#58;center;
&#125;

TD.p &#123; border-left&#58; solid 1px black; background&#58;#EEEEEE; padding-left&#58;10px; padding-right&#58;10px; padding-top&#58;3px;&#125;
TD.p2 &#123; border-left&#58; solid 1px black; background&#58;#FFFFFF; padding-left&#58;10px; padding-right&#58;10px; padding-top&#58;3px;&#125;
TD.main &#123; padding&#58; 50px; &#125;
TABLE.main &#123; padding&#58;0px; &#125;
</style>
<SCRIPT type="text/javascript">
var formRequester = null;

window.onload = init;


/* Initialisation for JS capable browsers */
function init&#40;&#41;
&#123;
var Form1 = document.getElementById&#40;"varform"&#41;;
var Form2 = document.getElementById&#40;"eventform"&#41;;
var Form3 = document.getElementById&#40;"osdform"&#41;;

var Data1 = document.getElementById&#40;"Data1"&#41;;


Data1.onkeyup = sendvarForm;
Form1.onsubmit = submitform;
Form2.onsubmit = submitEventForm;
Form3.onsubmit = submitOSDForm;
return true;
&#125;

/* Execute the action which has been associated with the completion of this object */
function onreadystatechangeForm&#40;&#41;
&#123;
var Data2 = document.getElementById&#40;"Data2"&#41;;

// If XMLHR object has finished retrieving the data
if &#40;formRequester.readyState == 4&#41;
&#123;
// If the data was retrieved successfully
try
&#123;
if &#40;formRequester.status == 200&#41;
&#123;
//sentForm&#40;&#41;;
Data2.value = formRequester.responseText;

&#125;
// IE returns a status code of 0 on some occasions, so ignore this case
else if &#40;requester.status != 0&#41;
&#123;
alert&#40;"There was an error while retrieving the URL&#58; " + formRequester.statusText&#41;;
&#125;
&#125;
catch &#40;error&#41;
&#123;
&#125;
&#125;

return true;
&#125;

/* Execute the action which has been associated with the completion of this object */
function onreadystatechangeEventForm&#40;&#41;
&#123;
var Data2 = document.getElementById&#40;"EventStatus"&#41;;

// If XMLHR object has finished retrieving the data
if &#40;formRequester.readyState == 4&#41;
&#123;
// If the data was retrieved successfully
try
&#123;
if &#40;formRequester.status == 200&#41;
&#123;
//sentForm&#40;&#41;;
Data2.value = formRequester.responseText;

&#125;
// IE returns a status code of 0 on some occasions, so ignore this case
else if &#40;requester.status != 0&#41;
&#123;
alert&#40;"There was an error while retrieving the URL&#58; " + formRequester.statusText&#41;;
Data2.value = formRequester.statusText;

&#125;
&#125;
catch &#40;error&#41;
&#123;
&#125;
&#125;

return true;
&#125;


/* Execute the action which has been associated with the completion of this object */
function onreadystatechangeOSDForm&#40;&#41;
&#123;
var Data2 = document.getElementById&#40;"OSDStatus"&#41;;

// If XMLHR object has finished retrieving the data
if &#40;formRequester.readyState == 4&#41;
&#123;
// If the data was retrieved successfully
try
&#123;
if &#40;formRequester.status == 200&#41;
&#123;
//sentForm&#40;&#41;;
Data2.value = formRequester.responseText;

&#125;
// IE returns a status code of 0 on some occasions, so ignore this case
else if &#40;requester.status != 0&#41;
&#123;
alert&#40;"There was an error while retrieving the URL&#58; " + formRequester.statusText&#41;;
Data2.value = formRequester.statusText;

&#125;
&#125;
catch &#40;error&#41;
&#123;
&#125;
&#125;

return true;
&#125;



function submitform&#40;&#41;
&#123;
return false;
&#125;

function submitEventForm&#40;&#41;
&#123;
/* Send information via XMLHR */
var Event = document.getElementById&#40;"Event"&#41;;
var Device = document.getElementById&#40;"Device"&#41;;
var Data2 = document.getElementById&#40;"EventStatus"&#41;;

var CGIString = "Event=" + Event.value + "&Device="+Device.value;

try
&#123;
formRequester = new XMLHttpRequest&#40;&#41;;
&#125;
catch &#40;error&#41;
&#123;
try
&#123;
formRequester = new ActiveXObject&#40;"Microsoft.XMLHTTP"&#41;;
&#125;
catch &#40;error&#41;
&#123;
formRequester = null;
return false;
&#125;
&#125;
Data2.value="Working...";
formRequester.onreadystatechange = onreadystatechangeEventForm;

formRequester.open&#40;"GET", "ajaxreq.lhtml?" + CGIString&#41;;
formRequester.send&#40;null&#41;;

return false;

&#125;

function submitOSDForm&#40;&#41;
&#123;
/* Send information via XMLHR */
var OSD = document.getElementById&#40;"OSDtext"&#41;;
var lFontSize = document.getElementById&#40;"FontSize"&#41;;
var Monitor = document.getElementById&#40;"Monitor"&#41;;
var Data2 = document.getElementById&#40;"OSDStatus"&#41;;

var CGIString = "OSD=" + OSD.value + "&FontSize="+lFontSize.value+ "&Monitor="+Monitor.value;

try
&#123;
formRequester = new XMLHttpRequest&#40;&#41;;
&#125;
catch &#40;error&#41;
&#123;
try
&#123;
formRequester = new ActiveXObject&#40;"Microsoft.XMLHTTP"&#41;;
&#125;
catch &#40;error&#41;
&#123;
formRequester = null;
return false;
&#125;
&#125;
Data2.value="Working...";
formRequester.onreadystatechange = onreadystatechangeOSDForm;

formRequester.open&#40;"GET", "ajaxreq.lhtml?" + CGIString&#41;;
formRequester.send&#40;null&#41;;

return false;

&#125;


function sendvarForm&#40;&#41;
&#123;
/* Send information via XMLHR */
var Data1 = document.getElementById&#40;"Data1"&#41;;

var CGIString = "Data=" + Data1.value;

try
&#123;
formRequester = new XMLHttpRequest&#40;&#41;;
&#125;
catch &#40;error&#41;
&#123;
try
&#123;
formRequester = new ActiveXObject&#40;"Microsoft.XMLHTTP"&#41;;
&#125;
catch &#40;error&#41;
&#123;
formRequester = null;
return false;
&#125;
&#125;

formRequester.onreadystatechange = onreadystatechangeForm;

formRequester.open&#40;"GET", "ajaxreq.lhtml?" + CGIString&#41;;
formRequester.send&#40;null&#41;;

return false;
&#125;
</SCRIPT>
</head>
<body>
<td class="main" valign="top">
<H2><A name="plugins" id="plugins">Lighting and Appliance Control</A></H2>
<CENTER>
<TABLE border="0" cellpadding="2" cellspacing="0" class="p">
<TR>
<TH align="left" class="p">
Light / App ID
</TH>
<TH align="left" class="p2">Power</TH>
<TH align="left" class="p2"></TH>
</TR>
<%
-- LuaScripting in the Webpage!
local l = X10Modules
local load,status
local lighttable='';
for i,v in pairs&#40;l&#41; do

if l&#91;i&#93;.CurrentState == 1 then
load = 'poweroff.png (working_to_1.lhtml?poweroff='.. i ..')'
status = 'ledgreen.png'
else
load = 'power.png (working_to_1.lhtml?poweron='.. i ..')'
status = 'ledred.png'
end

if l&#91;i&#93;.InUse == 1 then
lighttable = '<tr><td class="p">'.. i ..'</td><td class="p2">' .. load .. '</td><td class="p2">' .. status ..'</td></tr>\n'
webserver&#58;print&#40;lighttable&#41;
end
end
%>
</TABLE>
</CENTER>
</td>
<TABLE class="main" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD class="main" valign="top">
<FORM id="varform" name="varform">Variable Name&#58; <INPUT type="text" name="Data1" id="Data1">
<TEXTAREA name="Data2" id="Data2" cols="15" rows="1"></TEXTAREA>
</FORM>
Data1 = _VERSION
Data1.sendvarForm
<%
Data1 = X10Modules

webserver&#58;print &#40;Data1, Data2&#41;
%>
</TD>
</TR>
</TABLE>
</body>
</html>

Any ideas how I would mod this to get to where I want?

:oops:

danward79
August 24th, 2005, 05:02 AM
Bump

Ron
August 24th, 2005, 10:59 AM
Sorry Dan, I am pretty busy with everything here. I hope someone else can step in.

danward79
August 24th, 2005, 11:01 AM
:cry:

No Worries, I hope someone will!