Java týden
Procvič si angličtinu zdarma s naším americkým e-learningem! Learn more
Pouze tento týden sleva až 80 % na celý Java e-learning!
Avatar
Adam Gajdečka:4.11.2018 9:54

Ahoj, jsem dost neznalý JS a programuji hlavně backend. Odešlu komentář, vrátí se mi případné errory, validační hlášky se propíšou k daným prvkům.

Uživatel ale formulář nevidí, protože je na konci stránky (typicky komentáře). Potřebuji tedy malý JS kód, který zkontroluje, zda nejsou nějaké errory a případně scrolluje na místo formuláře.

Backend - ASP .NET CORE 2.1

<div class="comment-box">
                  <h3>Leave A Comment:</h3>
                  <form asp-action="Details">
                      <div class="row">
                          <div class="col-md-6">
                              <input type="hidden" asp-for="Post.Id" />

                              <div class="test">  <span asp-validation-for="Comment.AuthorName"></span></div>
                              <input type="text" asp-for="Comment.AuthorName" placeholder="Your Name" />

                              <span asp-validation-for="Comment.Email"></span>
                              <input type="email" asp-for="Comment.Email" placeholder="Your Email" />

                              <span asp-validation-for="Comment.Url"></span>
                              <input asp-for="Comment.Url" placeholder="Your Website URL" />
                          </div>
                          <div class="col-md-6">
                              <span asp-validation-for="Comment.Content"></span>
                              <textarea asp-for="Comment.Content" rows="8" placeholder="Comment"></textarea>
                          </div>
                          <div class="col-md-12 text-right">
                              <button type="submit">Submit Comment</button>
                          </div>
                      </div>
                  </form>
              </div>

Zkusil jsem: to jsem někde vyhrabal, ale nefunguje to :-(

<script>

    window.scrollTo = function () { };
    validationSummary.onpropertychange = function () {
        if (this.style.display != 'none') {
            validationSummary.scrollIntoView();
        }
</script>
 
Odpovědět 4.11.2018 9:54
Avatar
Vladislav Ladicky:4.11.2018 10:06

To mi znie hlavne ako naprosto nevhodné ui/ux. Máš nejaké demo, alebo screenshoty?

 
Nahoru Odpovědět 4.11.2018 10:06
Avatar
Šimon Raichl
Překladatel
Avatar
Odpovídá na Adam Gajdečka
Šimon Raichl:4.11.2018 10:18

Spis je otazkou, proc tam mas onpropertychange event, ten ti nikdy nebude fungovat.

 
Nahoru Odpovědět 4.11.2018 10:18
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:4.11.2018 10:21

proč by to mělo být nevhodné ui/ux? Zrovna jsem koupil tuto šablonu a vypadá to pěkně http://xerotheme.com/…/single.html

 
Nahoru Odpovědět 4.11.2018 10:21
Avatar
Odpovídá na Šimon Raichl
Adam Gajdečka:4.11.2018 10:21

to jsem někde našel na internetu, moc se v tom nevyznám, upřímně. Budu rád za radu. Díky

 
Nahoru Odpovědět 4.11.2018 10:21
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:4.11.2018 10:44

Aha, už chápem, keď som to videl. Po odoslaní formulára sa môže nad nejakú položku vpísať chybová hláška, ale užívateľ ju neuvidí, lebo je nascrolovaný dole, na tlačítko Odoslať. Tak?

 
Nahoru Odpovědět 4.11.2018 10:44
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:4.11.2018 10:46

Uživatel odešle formulář s neplatnými hodnotami. Server vrátí stránku s error hláškami, ale uživatel vidí obsah příspěvku, ale už nevidí formulář s komentářem, který napsal. Je potřeba zobrazit ten formulář, který je dole.

 
Nahoru Odpovědět 4.11.2018 10:46
Avatar
Odpovídá na Adam Gajdečka
Adam Gajdečka:4.11.2018 10:46

tedy scrollovat dolů

 
Nahoru Odpovědět 4.11.2018 10:46
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:4.11.2018 11:04

No tohle je nevhodné UX. Mnohem lepší řešení je AJAX - https://www.sanwebe.com/…using-jquery (třeba). Díky tomu uživatel zůstane na místě a ty si na backend můžeš hrát jak chceš a zpět pošleš vždycky jen info zda dobře / špatně.

Když ti pak user zakáže JS, tak to bude fungovat jak normální formulář, pokud to vymyslíš dobře.

Nahoru Odpovědět 4.11.2018 11:04
Však ono půjde ...
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:4.11.2018 11:32

Nie je treba nikam scrollovať. Moderné UI to rieši tak, že ak aj validácia polí prebieha na serveri, z frontendu to máš odoslať AJAXom. Čiže ak napríklad vyplním formulár a kliknem na odoslať, obsah formulára sa odošle AJAXom na backend na kontrolu a z backendu sa vráti odpoveď, či je všetko OK. Toto však celé prebieha na pozadí, na frontende užívateľ ostáva tam, kde bol. A len mu v prípade, že je všetko v poriadku vypíšem toast, že formulár bol úspešne odoslaný a vynulujem zároveň všetky polia, alebo v prípade neúspechu mu vypíšem toast, že si má skontrolovať formulár, v ktorom mu zároveň zvýrazním vadné polia. Takto sa to robí. Scroll na chybu sa nepoužíva, aj by bol v tvojom prípade zložitý, keďže odoslaním formulára opustíš vyplnenú stránku. Čiže ... zakúpená téma je v poriadku, ale UX bude hrozné, ak tam implementuješ validáciu polí spôsobom nad ktorým uvažuješ.

 
Nahoru Odpovědět 4.11.2018 11:32
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:4.11.2018 11:37

dobře, ale jak to mám udělat? Nějaký návod?

 
Nahoru Odpovědět 4.11.2018 11:37
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:4.11.2018 11:45

Tak ako nadškrtol Pavel Mareš, v tvojom prípade bude asi najjednoduchšie použiť jQuery. Už si ho použil? Vieš jQuery?

 
Nahoru Odpovědět 4.11.2018 11:45
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:6.11.2018 17:59

použil, ale neumím jej.

 
Nahoru Odpovědět 6.11.2018 17:59
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:6.11.2018 21:04

Bohužiaľ, jediná možnosť je naštudovať to. To nie je dnes už žiadna voliteľná funkcionalita, to je nevyhnutnosť každého rozumného UI

 
Nahoru Odpovědět 6.11.2018 21:04
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:3. března 10:13

ano, máte pravdu. Proto jsem se začal v prosinci učit React JS. V dnešní době je potřeba dělat webové stránky s co nejlepším UX.

 
Nahoru Odpovědět 3. března 10:13
Avatar
Vladislav Ladicky:3. března 10:17

No ... nevedieť ešte poriadne JS a pustiť sa rovno do React je smelý plán, ale na druhej strane to ničomu neuškodí. Nech sa teda darí. PS: ja som skôr Vue pozitívny

 
Nahoru Odpovědět 3. března 10:17
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:3. března 10:27

Mě byl vždy klasický JS proti srsti. A React JS je super, aktuálně jsou to 4 měsíce, co v něm dělám denně na novém projektu. Nejprve to šlo pomalu, teď už je to daleko snadnější :-)

Když člověk umí programovat, tak vstup do jiného jazyka není tak problematický. Už dokážu vytvářet i složité formuláře s validací apod. Je to super :-)

 
Nahoru Odpovědět 3. března 10:27
Avatar
Odpovídá na Adam Gajdečka
Vladislav Ladicky:3. března 13:25

A chápeš už čo z toho vyplýva? Že JS ti nemôže byť proti srsti, ale že je super? Keďže je pre Teba React super, čo je len a len JS framework? A o to ide. JS je pecka jazyk. Záleží len na tom ako ho ovládaš a ako si zorganizuješ kód. A to je dôvod, prečo som sa pozrel do Reactu, Angularu, aj Vue, a vybral si Vue práve pre jeho najprehľadnejší kód. Nič proti React. Ani fň. Len mi proste viac sadlo Vue.

 
Nahoru Odpovědět 3. března 13:25
Avatar
Odpovídá na Vladislav Ladicky
Adam Gajdečka:3. března 13:32

mi JS vadil, protože vždy to byl šílený bordel v kódu. Tudíž, když se teď generuje html pomocí JS, tak je to krásné.

Já si vybral React, jelikož je o něm dost slyšet. Asi ani jeden z těch frameworků nebude úplně špatná varianta :-)

 
Nahoru Odpovědět 3. března 13:32
Avatar
Odpovídá na Vladislav Ladicky
David Klouček:4. března 19:55

JS neni super, vzhledem k tomu, kolik má WTF např. oproti C#.

 
Nahoru Odpovědět  -1 4. března 19:55
Avatar
Ilja Židkov
Člen
Avatar
Odpovídá na David Klouček
Ilja Židkov:4. března 22:41

JS neni super...

Není pravda. JavaScript oproti C# je dynamický jazyk, což je asi něco jako "dobrý sluha, zlý pán". Navíc díky ES6 a TypeScriptu můžeš psát kód, který je skoro identický C#.

kolik má WTF...

Kolik přesně? Celý JavaScript je postaven na prototypech a přirozené schopnosti delegace úloh (callbacky). Žádné přetížení operátorů, žádné třídy, žádná rozhraní.

Ano, C# je vynikající jazyk, ale, v roce 2019 ignorovat JavaScript je sebeokrádání o spoustu možností.

 
Nahoru Odpovědět  +1 4. března 22:41
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Ilja Židkov
Peter Mlich:5. března 7:33

V JS tridy funguji, jen to musis spravne zapsat. A tusim novy js umoznuje i deklarovani pres class.

function aaa()
{
this.a = 1;
this.b = 2;
this.c = function () {alert(3);}
}
x = new aaa();
alert(x.b);
x.c();

c = {a:1, b:2, c:function() {alert(3)}};
alert(c.b);

d = {};
d.a = 1;
d.c = function() {alert(3)}

Ale jako pole c, d, se to neda pouzit opakovane. Obvykle ale tridu deklarujes jednou, pokud se nejedna o nejake struktury.

Adam Gajdečka - Js se da vkladat jako externi source. Do html kodu ho obvykle nemicham. A spousta lidi se ted orientuje na exoticke jazyky jako react a podobne (na root.cz bezi clanky treba o 'go'). To je ok. Je treba, aby to nekdo osahal a rekl, co je na tom dobre a co spatne.
Generovat stranky cele pres js muze byt take dobra volba. At uz u klienta nebo na strane serveru. Nemam vyzkouseno.

 
Nahoru Odpovědět 5. března 7:33
Avatar
Ilja Židkov
Člen
Avatar
Odpovídá na Peter Mlich
Ilja Židkov:5. března 10:11

V JS tridy funguji, jen to musis spravne zapsat.

Hraní se slovy. V JS třída NEEXSTIUJE. Proč pak neexstijí modifikátory přístupu private, protected nebo public? Class je tzv. "syntaktický cukr" pro konstrukor funkci.

A tusim novy js umoznuje i deklarovani pres class.

Ano, tomu jsem věnonval předchozí odpověď (článek). viz.:

Navíc díky ES6 a TypeScriptu můžeš psát kód, který je skoro identický C#.

 
Nahoru Odpovědět 5. března 10:11
Avatar
Odpovídá na Ilja Židkov
Vladislav Ladicky:5. března 17:01

A čo má byť? Že v JS class neexistuje? Že je objektový, ale založený na prototype chain? Zas tu deti čo poznajú jediný jazyk a jedinú paradigmu rozbiehajú flame o tom, o čom dohromady nič nevidia? Zrovnávaním hrušiek s jablkami? C# je C#, JS je JS, bodka. Takýchto sračiek - flame, zrovnaní a hejtu je plný internet. Vyhnite sa tomu aspoň tu. Ďakujem.

 
Nahoru Odpovědět 5. března 17:01
Avatar
Ilja Židkov
Člen
Avatar
Odpovídá na Vladislav Ladicky
Ilja Židkov:6. března 7:42

Zrovnávaním hrušiek s jablkami?

Ano, doteď existuje spousta vývojářů, kteří si myslí, že Java a JavaScript je to stejné. A právě proto, jsem zdůraznil fakt, že v JS třídy NEEXISTUJÍ.

Takýchto sračiek - flame, zrovnaní a hejtu je plný internet...

Ano, a právě proto jsem popřel neplatný argument Petra, abych předešel nesrovnalostem a "flamu".

Více o třídách na Mozilla Developer Network

 
Nahoru Odpovědět 6. března 7:42
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Ilja Židkov
Peter Mlich:6. března 12:05

Ja bych dalsi komenty presunul sem...
https://www.itnetwork.cz/…c7fa965665e2

 
Nahoru Odpovědět  +1 6. března 12:05
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 26 zpráv z 26.