webserver na ESP8266

[OtikM]

Dobrý den,
vytvářím webserver na esp8266 potřebuju vytvořit textová pole, do kterého je zapisovaná hodnota uživatelem. Po změně se hodnota auto. uloží a načte uložená pro kontrolu = obnova stránky. Bohužel hodnota se ukládá nepravidelně i když dojde k obnově stránky načte se původní hodnota. Hodnota se uloží vždy pokud kliknu myší na tlačítko. Přitom dochází k dvojité obnově stránky. Tlačítko taky funguje až po dvoukliku. Kde je problém?
Na tlačítko používám kod:

client.println("<p>Zpoždění: <input type=\"number\" name=\"txt\" value=\"" +
String(EEPROM.read(1)) + "\" onchange=\"setTimer(this.value)\" min=\"10\" max=\"40\"> s (25s)</p>");

+ tento kod, který se bohužel neprovede při změně (výjimečně nebo pokud kliknu na tlačítko).

if(header.indexOf("GET /?timer=") >= 0) {
pos1 = header.indexOf('=');
pos2 = header.indexOf('&');
valueString = header.substring(pos1+1, pos2);
timer = valueString.toInt();
EEPROM.write(1, timer);
EEPROM.commit();
Serial.println(valueString);

pro zpracování požadavku používam tento kod:

client.println("<script> function setTimer(value) { var xhr = new XMLHttpRequest();");
client.println("xhr.open('GET', \"/?timer=\" + value + \"&\", true);");
client.println("xhr.send(); location.reload(true); } ");

[KamilV]

Jaký dává smysl dělat ajaxový request a pak volat reload stránky? Proč tedy neděláš normální request?
A když už to chceš dělat takto, tak samozřejmě ten reload musíš udělat, až jakmile ten ajax doběhne, takto se nemusí stihnout vykonat a může se stornovat, proto se Tě to asi ukládá jen někdy...

K dvojkliku na tlačítko se nevyjadřuju, protože v zaslané ukázce žádné tlačítko není...

[OtikM]

Tlačítko přepínač funguje obdobně, ale je to asi stejný problém jak u text pole:

Kód: Vybrat vše

else if(header.indexOf("GET /?state=on") >= 0) {
              outputOn();
            } 
            else if(header.indexOf("GET /?state=off") >= 0) {
              outputOff();
            }

grafika:

Kód: Vybrat vše

if(outputState == "off") {
                client.println("<p><button class=\"button\" onclick=\"outputOn()\">ON</button></p>");
              } 
              else {
                client.println("<p><button class=\"button button2\" onclick=\"outputOff()\">OFF</button></p>");
              }

provedení:

Kód: Vybrat vše

client.println("function outputOn() { var xhr = new XMLHttpRequest();");
            client.println("xhr.open('GET', \"/?state=on\", true);"); 
            client.println("xhr.send(); location.reload(true); } ");
            client.println("function outputOff() { var xhr = new XMLHttpRequest();");
            client.println("xhr.open('GET', \"/?state=off\", true);"); 
            client.println("xhr.send(); location.reload(true); } ");

[OtikM]

Už tomu rozumím, ale nevím jak to mám zapsat, nějaký typ bez překopání celého kodu?

[KamilV]

Kód: Vybrat vše

function complete() {
    location.reload(true);
}

var xhr = new XMLHttpRequest();
xhr.addEventListener("load", complete);
xhr.open('GET', \"/?state=off\", true);
xhr.send();

Netestoval jsem, píšu od boku. Reload se neudělá natvrdo po ajax requestu,
ale zaregistruješ si funkci "complete" jako událost, kdy se response zcela načte, tedy ajax v plné míře doběhne.