A Little help please with Webserver Ajax
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!
Any ideas how I would mod this to get to where I want?Code:<!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 { font-family: sans-serif; margin:0px; background-repeat: repeat-y; background-position: right; } TABLE.p { border-right: solid 1px black; border-top: solid 1px black; border-bottom: solid 1px black; background: #EEEEEE; } TH.p { border-left: solid 1px black; border-Bottom: solid 1px black; background:#EEEEEE; text-align:center; } TH.p2 { border-left: solid 1px black; border-Bottom: solid 1px black; background:#FFFFFF; text-align:center; } TD.p { border-left: solid 1px black; background:#EEEEEE; padding-left:10px; padding-right:10px; padding-top:3px;} TD.p2 { border-left: solid 1px black; background:#FFFFFF; padding-left:10px; padding-right:10px; padding-top:3px;} TD.main { padding: 50px; } TABLE.main { padding:0px; } </style> <SCRIPT type="text/javascript"> var formRequester = null; window.onload = init; /* Initialisation for JS capable browsers */ function init() { var Form1 = document.getElementById("varform"); var Form2 = document.getElementById("eventform"); var Form3 = document.getElementById("osdform"); var Data1 = document.getElementById("Data1"); Data1.onkeyup = sendvarForm; Form1.onsubmit = submitform; Form2.onsubmit = submitEventForm; Form3.onsubmit = submitOSDForm; return true; } /* Execute the action which has been associated with the completion of this object */ function onreadystatechangeForm() { var Data2 = document.getElementById("Data2"); // If XMLHR object has finished retrieving the data if (formRequester.readyState == 4) { // If the data was retrieved successfully try { if (formRequester.status == 200) { //sentForm(); Data2.value = formRequester.responseText; } // IE returns a status code of 0 on some occasions, so ignore this case else if (requester.status != 0) { alert("There was an error while retrieving the URL: " + formRequester.statusText); } } catch (error) { } } return true; } /* Execute the action which has been associated with the completion of this object */ function onreadystatechangeEventForm() { var Data2 = document.getElementById("EventStatus"); // If XMLHR object has finished retrieving the data if (formRequester.readyState == 4) { // If the data was retrieved successfully try { if (formRequester.status == 200) { //sentForm(); Data2.value = formRequester.responseText; } // IE returns a status code of 0 on some occasions, so ignore this case else if (requester.status != 0) { alert("There was an error while retrieving the URL: " + formRequester.statusText); Data2.value = formRequester.statusText; } } catch (error) { } } return true; } /* Execute the action which has been associated with the completion of this object */ function onreadystatechangeOSDForm() { var Data2 = document.getElementById("OSDStatus"); // If XMLHR object has finished retrieving the data if (formRequester.readyState == 4) { // If the data was retrieved successfully try { if (formRequester.status == 200) { //sentForm(); Data2.value = formRequester.responseText; } // IE returns a status code of 0 on some occasions, so ignore this case else if (requester.status != 0) { alert("There was an error while retrieving the URL: " + formRequester.statusText); Data2.value = formRequester.statusText; } } catch (error) { } } return true; } function submitform() { return false; } function submitEventForm() { /* Send information via XMLHR */ var Event = document.getElementById("Event"); var Device = document.getElementById("Device"); var Data2 = document.getElementById("EventStatus"); var CGIString = "Event=" + Event.value + "&Device="+Device.value; try { formRequester = new XMLHttpRequest(); } catch (error) { try { formRequester = new ActiveXObject("Microsoft.XMLHTTP"); } catch (error) { formRequester = null; return false; } } Data2.value="Working..."; formRequester.onreadystatechange = onreadystatechangeEventForm; formRequester.open("GET", "ajaxreq.lhtml?" + CGIString); formRequester.send(null); return false; } function submitOSDForm() { /* Send information via XMLHR */ var OSD = document.getElementById("OSDtext"); var lFontSize = document.getElementById("FontSize"); var Monitor = document.getElementById("Monitor"); var Data2 = document.getElementById("OSDStatus"); var CGIString = "OSD=" + OSD.value + "&FontSize="+lFontSize.value+ "&Monitor="+Monitor.value; try { formRequester = new XMLHttpRequest(); } catch (error) { try { formRequester = new ActiveXObject("Microsoft.XMLHTTP"); } catch (error) { formRequester = null; return false; } } Data2.value="Working..."; formRequester.onreadystatechange = onreadystatechangeOSDForm; formRequester.open("GET", "ajaxreq.lhtml?" + CGIString); formRequester.send(null); return false; } function sendvarForm() { /* Send information via XMLHR */ var Data1 = document.getElementById("Data1"); var CGIString = "Data=" + Data1.value; try { formRequester = new XMLHttpRequest(); } catch (error) { try { formRequester = new ActiveXObject("Microsoft.XMLHTTP"); } catch (error) { formRequester = null; return false; } } formRequester.onreadystatechange = onreadystatechangeForm; formRequester.open("GET", "ajaxreq.lhtml?" + CGIString); formRequester.send(null); return false; } </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(l) do if l[i].CurrentState == 1 then load = '[img]poweroff.png[/img]' status = '[img]ledgreen.png[/img]' else load = '[img]power.png[/img]' status = '[img]ledred.png[/img]' end if l[i].InUse == 1 then lighttable = '<tr><td class="p">'.. i ..'</td><td class="p2">' .. load .. '</td><td class="p2">' .. status ..'</td></tr>\n' webserver:print(lighttable) 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: <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:print (Data1, Data2) %> </TD> </TR> </TABLE> </body> </html>
ops:
Reply With Quote
