Diskuze: Jak dostat hodnotu do "input" ?

ostrozan

Tvůrce

ostrozan:5.4.2016 20:37

Nejsem v této oblasti moc zběhlý a tak bych potřeboval poradit.

Mám tabulku a v ní několik inputů - typ "number" a "time" pro nastavování parametrů pro termostat (mcu- arduino) HTML i s CSS a JS mám v jednom souboru, který je na SD kartě:

<!DOCTYPE html>
<html lang="cz">


<head>
<meta charset="utf-8" />
<title>Settings</title>
 <script>


                function GetValues()
                {
                        nocache = "&nocache=" + Math.random() * 1000000;
                        var request = new XMLHttpRequest();
                        request.onreadystatechange = function()
                        {
                                if (this.readyState == 4) {
                                        if (this.status == 200) {
                                                if (this.responseXML != null) {
                                                        // XML file received - contains analog values, switch values and LED states
                                                        var count;
                                                        // get teploty
                                                        var num_an = this.responseXML.getElementsByTagName('teplota').length;
                                                        for (count = 0; count < num_an; count++)
                                                    {
                                                                document.getElementsByClassName("teplota")[count].innerHTML =
                                                                        this.responseXML.getElementsByTagName('teplota')[count].childNodes[0].nodeValue;
                                                        }

                                                    // get cas
                                                        var num_an = this.responseXML.getElementsByTagName('cas').length;
                                                        for (count = 0; count < num_an; count++)
                                                    {
                                                                document.getElementsByClassName("cas")[count].innerHTML =
                                                                        this.responseXML.getElementsByTagName('cas')[count].childNodes[0].nodeValue;
                                                        }
                                                }
                                        }
                                }
                        }
                        // send HTTP GET request
                        request.open("GET", "ajax_values" + nocache, true);
                        request.send(null);
                        setTimeout('GetValues()', 1000);

                }


        </script>
<style>
        .tab {
                border:2px solid #0000FF;
                border-collapse:collapse;
                padding:5px;
        }
        .tab th {
                border:2px solid #000000;
                padding:5px;
                background:#6C6CFF;
        }
        .tab td {
                border:2px solid #000000;
                text-align:center;
                padding:5px;
        }
</style>

</head>

<body>

<table class="tab">
        <caption>Pondělí</caption>
                <thead>
                        <tr>
                                <th>čas</th>
                                <th>teplota</th>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                                <td><input type="time"></td>
                                <td><input type="number" min=15 max=30 ></td>
                        </tr>
                        <tr>
                                <td><input   type="time"></td>
                                <td><input   type="number" min=15 max=30></td>
                        </tr>
                        <tr>
                                <td><input  type="time"></td>
                                <td><input  type="number" min=15 max=30></td>
                        </tr>
                </tbody>
        </table>
</body>

</html>

a já za pomocí AJAXU vytahuju nastavené hodnoty z paměti mcu a pokud je chci jen zobrazit, tak není problém, ale já bych je potřeboval dostat jako "value" do inputů a to už se mi nějak nedaří.

Zatím (pro test) posílám request každou sekudu ale pak by to mělo fungovat jen při prvním načtení stránky a pak při ukládání změn.

Odpovědět

5.4.2016 20:37

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:5.4.2016 22:12

V javascriptu ? Selectni si odpovídajícím selectorem element inputu a do property value vlož hodnotu. Jsem na mobilu, proto se nerozepíšu. Kdyžtak si řekni.

Nahoru Odpovědět

5.4.2016 22:12

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:5.4.2016 22:48

Nakonec trochu pridam. Ty nemas vubec to html oclassovany, tvoje inputy jsou proste inputy, nemaj class ... navic neprijde mi to dost defenzivne naprogramovany (proste rozumne), ty si beres pocet elementu podle toho, pro kolik elementu ti prisla data? Co kdyz jich mas v realu mene, myslim na strance?

Funkci GetValues() nevidim kde volas, to by nemuselo byt zly, pokud ji volas na window.onload ... jestli ji volas driv, nez se nacte kontent, pak muzes dopadnout tak, ze se z nejakyho duvodu pozasekne prohlizec a i tahle mrnava stranecka se proste nenacte dost vcas na to, abys pristupoval na jeji elementy v momente, kdy se vrati odpoved ze serveru.

setTimeout() je pouzitej na spatnem miste, mas znovu zavolat funkci az po tom co ti prijdou data, co kdyz bude vymenna dat trvat dele nez tvuj cas? Tak se ti to proste bude tlouct a vis jak je to krasny se siti? Muze se ti stat, ze se zeptas na data serveru, zeptas se ho o vterinu pozdeji znova a prijde driv odpoved na pozdejsi volani, tady to nevadi, ale kdyz budes mit nejakou logiku, podle ktere se na serveru rozhodne, ktera data poslat, tak si to prepises neaktualnim udajem, v realu se ti asi stane to, ze dlouho zijici request ti sit shodi, ale co ty vis co se stane. Takze setTimeout() az do casti kde jsi dostal data, tim se pripravis o moznost znova navazat spojeni a aktualizovat hodnoty pokud sit na dost dlouhou dobu selze, ale staci o tom vyhodit notifikaci uzivateli at represhne stranku. Neni nic snadnejsiho.

Dal se mi nelibi jakym zpusobem predavas setTimeout-u funkci GetValues, stringovy volani se nepouziva kdyz to jde pozuije se primo pointer na funkci, takze setTimeout(GetValues, 1000); --- bez zavorek u funkce, protoze je to cistsi.

Tedy jeste zduraznim co jsem chtel rict v prvnim prispevku, input nema innerHTML ale value.

Dal var num_an tam mas dvakrat deklarovany v jednom kontextu, je to opetovna deklarace, je to spatne, zrus jedno var, to spodni.

Send() neni nutny davat null, jestli k tomu nemas zvlastni duvod, nedelej to.

Doufam, ze jsem na nic nezapomnel, doufam, ze jsem nic nepopletl, kdyztak se lidi ozvou, nebo se ozvi ty, pokud neco neni jasne.

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

5.4.2016 22:48

Neaktivní uživatelský účet

ostrozan

Tvůrce

ostrozan:5.4.2016 23:34

Pravda je taková, že dělám kámošovi řízení vytápění domu a nechal jsem se ukecat, místo GUI ve formě nějaké normální aplikace a propojení po sériové lince na ovládání po síti z prohlížeče.
Tak jsem začal studovat kdejaký tutor a začal něco lepit.
Což o to- HTML a CSS dobrý, ale JS trochu skřípe - tak se nedivím, žes tam našel ty chyby.
Jinak ten kód je jen pro příklad a některé věci jsem tam zapomněl dát - třeba to volání funkce na onload.
Takže pokud bys byl tak hodný a trochu názorně popsal, jak z XML který posílám z mcu dostat hodnoty do inputů.

Nahoru Odpovědět

5.4.2016 23:34

ostrozan

Tvůrce

ostrozan:6.4.2016 8:52

Tak už to funguje - klíčová byla informace, že

input nema innerHTML ale value.

taky jsem zapracoval i ostatní připomínky

Nahoru Odpovědět

6.4.2016 8:52

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:6.4.2016 10:46

Výborně. Přeji ti úspěšnou snahu a kdyby něco napiš. Pokud to bude všechno nezapomeň ukončit vlákno.

Nahoru Odpovědět

6.4.2016 10:46

Neaktivní uživatelský účet

ostrozan

Tvůrce

ostrozan:6.4.2016 22:59

Narazil jsem na takovou věc - ne že by mně nějak extra vadila ale čím to může být?

Chrome,Opera,Maxthon - zobrazují stránku správně
ale IE úplně špatně - i ty inputy jsou jakésidivné

Editováno 6.4.2016 23:00

Nahoru Odpovědět

6.4.2016 22:59

ostrozan

Tvůrce

ostrozan:6.4.2016 23:01

Ještě jak to má vypadat

Nahoru Odpovědět

6.4.2016 23:01

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:6.4.2016 23:03

to bude neco ve stylech, doporucuju zalozit novy vlakno, protoze tohle bude mozna trpet tim, ze je uz vyresene a nazev nereflektuje novej problem. Kdyz tam prihodis kod stylu bude to perfektni, ja osobne nejsem silnej stylar, mozna bych si s timhle poradil, ale jiste to nevim, na druhou stranu, hod ten zdrojak sem, html i style, kdyz nebudu vedet a nikdo se neozve, nekoho sem pozvem skrz komentar a v nejhorsim si zalozis novy tema... proc to komplikovat.

Nahoru Odpovědět

6.4.2016 23:03

Neaktivní uživatelský účet