How to edit specific text displayed on simple html web page, on the fly, from same page as is being viewed

Question

I have a home automation web page that controls power on and power off to a number of electrical wall sockets in the house (see simple web control page below).

At times, a device plugged into a particular wall socket, is swapped for another device, e.g., the printer is removed (unplugged) and replaced with a desk lamp (plugged in).

Because of this I want to be able to edit the part of the web page that refers to the Printer (in the web page below) on the fly; through this same web page. In other words any person should be able to make this page edit, from the page itself, without any knowledge of HTML or server side technology.

The edited change will remain permanently with the web page (or in some server side text file) until the next edit/ page change is made. The change will survive a power re-cycle on the server.

In others words the functionality required here, for this single simple web page, is similar to that of a content management system (CMS) though of course a CMS would be very bulky and unnecessary for these small changes to this one page.

And of course it is only the occurrences of the text "Printer", "Socket 2", "Socket 3", Socket 4" that I need to be able to edit and change from the page itself.

So, what I want to know is how to implement a very simple CMS, only for the parts of the page that display the text "Printer", "Socket 2", "Socket 3", "Socket 4".

Thank you

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>

<html>

  <head>
    <meta name='viewport' content='width=device-width'>
    <title></title>
    <style>a{color:blue}.content1{width: 20px; float:right;}.content2{width: 20px; float:left;}</style>
  </head>

<body>
  <center>

   <br/>

   <b><font size=+1 color='#CC33FF'>Sockets 4</font></b>

   <br/>

   <a href='?s4-all-on' target='x2'>All On</a>&nbsp;&nbsp;&nbsp;<a href='/?s4-all-off' target='x2'>All Off</a><br/>
   <a href='/?s4-1on' target='x2'>Printer On</a>&nbsp;&nbsp;&nbsp;<a href='/?s4-1off' target='x2'>Printer Off</a><br/>
   <a href='/?s4-2on' target='x2'>Socket 2 On</a>&nbsp;&nbsp;&nbsp;<a href='/?s4-2off' target='x2'>Socket 2 Off</a><br/>
   <a href='/?s4-3on' target='x2'>Socket 3 On</a>&nbsp;&nbsp;&nbsp;<a href='/?s4-3off' target='x2'>Socket 3 Off</a><br/>
   <a href='/?s4-4on' target='x2'>Socket 4 On</a>&nbsp;&nbsp;&nbsp;<a href='/?s4-4off' target='x2'>Socket 4 Off</a><br/><br/>

   <iframe name=x2 style='display:none'></iframe>

  </center>
</body>

</html>

Hi @TTT I don't have time to re-write the whole thing so the question stands as is, while I understand why you have made your comments. Thank you. I have edited the question to remove the word tag and called it 'part' as this is then a more generic description. Thank you :) — Kes, Sep 23 '15 at 13:12
Are the php and home-automation tags necessary, neither seem relevant? Though you haven't actually asked a question so I could be wrong. — Eborbob, Sep 23 '15 at 13:49
Hi @Eborbob Yes. They are, because it is for a home automation project. Anyone trying to do this would understand the usefulness immediately. Someone may be doing this with PHP. The question is to serve up this page (as shown above) so the end user can change the text "Socket 1 On" in the page, permanently, at any time, if need be, all this simply from the page itself. — Kes, Sep 24 '15 at 11:13

xdevs23 · Answer 1 · 2015-09-23T13:42:01.863

You could use AJAX, or, how you have done it already, (simply) create an iframe inside of <body>...</body>, but in that way:

<iframe id="myIFrame" src="#" style="display: none;" />

add a JavaScript method to your head or beginning of body:

<head>
...
<script type="text/javascript">
    function putIframe(param) {
        document.getElementById("myIFrame").src = "/?" + param;
        return true;
    }
</script>
</head>

and then add JavaScript onClick, for example:

<a onclick="javascript:putIframe('s4-all-on');">All On</a>

Explanation:

An iframe is capable of loading websites inside a website. The iframe here is not visible, so everything runs in the background. When you call putIframe("s4-all-on") the iframe loads the website "/?s4-all-on", so you just have to wait a second (or less) and you're done.

You could also use <a href="..." target="_blank" ...>...</a> to open it in a new tab.

Hi @xdevs23 I tried that and could not get it to work. I have significantly revised the question so that it is much clearer. Thank you — Kes, Sep 27 '15 at 16:54

How to edit specific text displayed on simple html web page, on the fly, from same page as is being viewed

1 Answers1