ESP8266 Community Forum

- Sat Dec 12, 2015 10:42 am #36271 Here's the code I was using. First line is the input tag that produces a slider control and when the value changes, calls 'myfunction()' which extracts the slider value (cmd), puts it into a uri and then invokes the evil href to send it:

Code: Select all       
conn:send('<input style="width:550px; height:50px" type="range" name="cmd" id="cmd" value="" min=1 max=1023 step=1 onchange="myFunction()"/>')
conn:send('<script>')
conn:send('function myFunction() {')               
conn:send('    var x = document.getElementById("cmd").value;')
conn:send('     var uri = "\?somevar=" + x;')
conn:send('     var enc = encodeURI(uri);')
conn:send('     document.location.href=\enc;')         
conn:send('}</script>')


And here is what I replaced it with. The href line is replaced with four xml lines:

Code: Select allconn:send('<script>')
conn:send('function myFunction() {')               
conn:send('    var x = document.getElementById("cmd").value;')
conn:send('    document.getElementById("demo").innerHTML =  x ;')
conn:send('     var uri = "\?somevar=" + x;')
conn:send('     var enc = encodeURI(uri);')
conn:send('     var xhttp = new XMLHttpRequest();')
conn:send('    xhttp.onreadystatechange = function() {')
conn:send('   if (xhttp.readyState == 4 && xhttp.status == 200) {')
conn:send(' }')
conn:send(' };')
conn:send(' xhttp.open("GET", uri, true);')
conn:send(' xhttp.send();')
conn:send(' }</script>')


I think there is some clean up that can be done. I tested my code in Firefox, Chrome, (both desktop and Android phone) as well as IE and IE refused to load the page so there's probably some format issue regarding that. Right now, I don't plan on using IE but would like to fix it anyway.

- Sat Dec 12, 2015 11:19 am #36275 Now I'm going through my code to understand it and noticed that this line was downloading a text file and printing it to the screen in the example that I borrowed. I removed part of it leaving the 'if' clause doing nothing so I removed it and it still works. But the test looking for the status of 200 seems like a good idea in the general case. Removing it simplifies the code but maybe makes it more brittle - if there is a problem with the answer from the server, something might break.

Code: Select allconn:send('   if (xhttp.readyState == 4 && xhttp.status == 200) {')
conn:send(' }')

- Sat Dec 12, 2015 11:39 am #36276 So for the time being, I'm going with this version. There are several other items now that have risen to the top of the list of problems, not the least of which is finding out why my heap always is dwindling away.

Code: Select allconn:send('<script>')
conn:send('function myFunction() {')               
conn:send('    var x = document.getElementById("cmd").value;')
conn:send('    document.getElementById("demo").innerHTML =  x ;')
conn:send('    var uri = "\?somevar=" + x;')
conn:send('    var xhttp = new XMLHttpRequest();')
conn:send('    xhttp.open("GET", uri, true);')
conn:send('    xhttp.send();')
conn:send(' }</script>')