Použití s Grido s inline editací - Uncaught TypeError: Cannot read property 'hasError' of undefined

[millee111]

Zdravím,
začal jsem v aplikaci používat datagrid "Grido" pro nette a v gridu při "inline editaci", když mám nastaven sloupce setRequired a ve kterém lze hodnoty inline editovat, tak při prvním pokusu o uložení prázdné hodnoty mi to vypíše v consoli prohlížeče:
live-form-validation.js:488
Uncaught TypeError: Cannot read property 'hasError' of undefined

Jakmile se tento error objeví, tak při dalších pokusech o uložení prazdné hodnoty se errory neobjevují a správně se u kolonky objeví hláška, že pole je povinné. Udělá to vždy pouze jednou do doby než stránku reloadnu.

Aby se tento error neobjevoval, musím mít současně v aplikaci nalinkovaný soubor netteForms.js:
https://cdn.rawgit.com/nette/forms/v2.2.4/src/assets/netteForms.js

Já jsem ale někde četl, že netteForms.js jsou součástí té knihovny live-form-validation.js, a tak nevím, zda mám mít v aplikaci nalinkované oba soubory a je to tak v pořádku.

Lze to vyzkoušet na tomto example příkladu při inline editaci:
https://github.com/o5/grido-examples

Postup:

1. nalinkovat do layoutu live-form-validation.js a zakomentovat původní "netteForms.js"
2. spustit grido examples na presenteru "EditablePresenter.php", kde je umožněna inline editace
3. udělat inline editaci ve sloupci "Surname": Na nějakou jeho hodnotu najet myší, podržet CTRL + doubleclick
4. objeví se input pro editaci a obsah toho příjmení celý smazat a dát enter - v tomto kroku při snaze o uložení by se měla vedle inputu objevit hláška "Surname is required.", protože Surname má nastaveno setRequired('...').
   Ale neobjeví, objeví se viz. výše uvedený error. Další pokusy už chybu nehlásí a hláška se vedle inputu správně zobrazuje do doby, než se udělá reload celé stránky.

Error se tedy objevuje jen pokud mám v aplikaci "live-form-validation.js" a současně nemám "netteForms.js".

Předem se omlouvám, pokud to sem nepatří a pokud by to šlo nějak opravit, tak by to bylo skvělé.
Ale jestli je nutné mít v aplikaci nalinkovaný i "netteForms.js", tak potom je tedy vše v pořádku. Já jen myslel, že mi stačí "live-form-validation.js" bez toho netteForms.js.

Děkuji za případnou radu :)

[Robyer]

Zdravím, live-form-validation.js v sobě opravdu netteForms.js obsahuje (v upravené verzi) a neměl by být znovu linkován do stránky.

Co se týče problému, tak je to proto, že se nespustí metoda Nette.initForm(form);, grido volá rovnou natvrdo Nette.validateControl a skript s tím nepočítá.

Zkoušel jsem teď připravit různá řešení, ale nakonec se dostávám k tomu, že nedává smysl používat tento skript spolu s Grido - vzhledem k tomu, jakým způsobem je Grido napsané. Co přesně od spojení s live-validací vlastně očekáváš nebo proč ho chceš chceš použís spolu s Grido?

[millee111]

Díky za reakci. Já v podstatě s nette začínám a tak různě zkouším a snažím si pomalu psát takové univerzální administrační rozhraní a ta tvoje knihovna se mi moc líbí, tak ji tam mám standardně nalinkovanou a hledal jsem nějaký datagrid a dle četnosti příspěvků jsem usoudil, že Grido je docela rozšířené a tak jsem ho začal používat a dnes si všiml této chybky, když jsem si zapnul na pár sloupců inline editaci a začal testovat. Asi to není úplně nutné, pokud to pro Tebe znamená moc práce. Kdyžtak to bude bez hlášení u té inline editace :) A nebo jak píšeš, že by se to ve spojení s grido vyplo, ale to vůbec zatím netuším jak, protože u normálních formulářů i ajax formulářů bych rád tvoji knihovnu používal. Např. když budu mít v šabloně jak datagrid od Grido a současně i nějaký jiný formulář, tak netuším jak použít netteForms.js pro Grido a tvoji knihovnu zase pro všechno ostatní.

Jak moc velký debakl utrpím, když si v projektu nechám nalinkované obě dvě knihovny? Zatím mi to žádné kolize nehází, ale pokud víš dopředu, že s tím narazím, tak to netteForms.js vyřadím hned :)

Je to na Tobě, když se to nějak v budoucnu podaří vyřešit, budu rád, když ne, tak v pohodě. I tak moc díky za tvé reakce.

[millee111]

Ted jsem zjistil, že s novým netteForms.js, který je v základním balíku Nette a má velikost 14.6K, tak to taky nejede. Funguje to správně pouze se starší či upravenou knihovnou, která je na adrese a která má velikost 12.6.:
https://cdn.rawgit.com/nette/forms/v2.2.4/src/assets/netteForms.js

[Robyer]

Zkoušel jsem to s netteForms.js z Nette Forms 2.3 (což je soubor, který se používá jako vnitřek live-form-validation) a s tím to funguje.

Každopádně commitnul jsem opravu, aby to v takovém případě, v jakém to Grido používá, neházelo chyby a fungovalo to jako s čistým netteForms.js. Tedy nevypisuje to errory inline, ale používá alert().

Můžeš tedy nyní normálně používat live-form-validation skript a v normálních formulářích budeš mít live-validaci a v Gridu klasické alerty bez live-validace. Ono není možné navázat live-validaci na Grido, protože on má volání té validační metody zadrátované v sobě.

Stáhni si verzi z aktuálního masteru a mělo by to být ok :-)

[millee111]

Stáhnul jsem a zkouším :) netteForms.js mám taky z 2.3.
Klasické alerty v prohlížeči na gridu při prázdném poli fungují a chybu to nehází, ale teď mi to vždy vyhodí chybku při následném uložení pomocí inline editace:

live-form-validation.js:169
Uncaught TypeError: this.getFormProperty is not a function

Tuto chybu to tedy ukáže vždy po proběhnuté inline editaci a uložení, ať už mám nalinkové netteForms.js nebo ne.

[Robyer]

Tam byl překlep v názvu metody (místo "get" mělo být "has").

Nakonec jsem to teď dost přepsal a vylepšil, takže teď už funguje klasická live-validace i v Grido! :)
Jen je pro správnou funkčnost potřeba i drobná změna v grido.js. Poslal jsem pull-request o5/grido#224 ale kdo ví, kdy to potvrdí...

Úprava je ale jednoduchá (viz záložka "Files changed"), takže:
a) Můžeš si upravit grido.js skript, který používáš ty.
b) Můžeš to používat bez toho pull-requestu. Nevýhodou je, že ty funkce začnou fungovat správně až po prvním odeslání toho edit políčka a nebo po přepnutí se na jinou stránku. I bez toho to ale chybovou hlášku zobrazí, jen se neskryje automaticky když začneš psát, apod.

A potřebuješ aktuální verzi live-form-validation z masteru (1.6.0).

[millee111]

Paráda, díky, funguje vše :)
Grido.js jsem si aktualizoval a budu koukat, zda i na ten pull-reqeust, zda se to tam oficiálně objeví.

U toho grido.js jsem docela zmaten, ale to je dotaz na jinou stranu. Já ho mám nainstalovaný přes composer, ale grido.js + grid.php + i v jiných souborech se Grido přes composer odlišuje od verze, když si ji stáhnu manuálně. Přitom composerem jsem to teď nově stahoval jako composer require o5/grido (zkoušel jsem i update) a odlišné od té verze z manuálního stažení stále je. Tak používam Grido verzi staženou přes composer a jenom jsem si z manuálního stažení Grido sebral soubor grido.js a doplnil to co je v tom pull-requestu od tebe, abych to grido.js měl stejné jako tady na githubu, protože stažené v balíku přes composer je odlišné o více věcí. Ale to se na to musím zeptat jinde a nebo to přes composer stahovat ještě správně neumím :)

Každopádně díky moc za vylepšení, vše perfektně funguje.

[Robyer]

Ok, jsem rád, že to funguje :)

Co se týče rozdílného grido.js, tak já osobně bych asi raději použil ten, který je distribuovaný s danou verzí Grido (tedy ten získaný přes composer), ale jestli ti to funguje správně i s tím staženým ručně, tak je to asi jedno.

[millee111]

Tak poslední věc. Při testování se mi podařilo vyvolat tuto chybku:
live-form-validation.js:574
Uncaught TypeError: Cannot read property 'id' of null

Ale už se mi nedaří to celé opakovat :/
Pokud by mi to ještě někdy udělalo a zjistím co jsem přesně udělal, dám vědět :)

[millee111]

Tak jsem objevil ještě jednu věc :/

Když dám 2x po sobě na inline editaci ihned ESC, tak mi hodnota úplně v buňce zmizí.

Postup:

1. na buňku dej CTRL+doubleclick a po zobrazení inputu hned ESC pro storno
2. to samé viz. bod 1 na stejnou buňku a hodnota potom zmizí

EDIT:
Tak to dělá toto, jak jsem tam přidal, aby to hlášení automaticky zmizelo, jakmile do inputu začnu psát:

// for nette-live-form-validation
if (typeof window.LiveForm === 'object') {
setupHandlers($control.get(0));
}

Jakmile to zakomentuji, tak to už po 2x Esc nemizí.

[Robyer]

Už jsem chtěl psát, že to opravit nezvládám, ale nakonec se nějak zadařilo... zkus aktuální verzi :-)

Obě věci by měly být opravené.

[millee111]

Fakt se omlouvám, že jsem ti zasekal sobotu :(
Vypadá to, že to funguje bez chyby, kromě jedné, co jsem si těď všiml.
Když mám v buňce text obalelý HTML, tak to vypisuje defaultně ošetřené:
<b>text</b>

Ale když dám na tu buňku, kde je HTML, inline editaci a dám ESC nebo ENTER, aniž bych text modifikoval, tak už se mi html kód promítne a "text" mám tučně :)

To by snad byla poslední věc. Ještě to budu dnes testovat, ale kromě této jedné chybky, to vypadá, že to s grido.js i s modifikovaným grido.js, jede parádně.

EDIT:
Teď mě napadá, co kdybych chtěl v tom Grido vypsat opravdu obsah v html, to jsem ještě nezkoušel a "zatím" nevím jak to Grido má. Je možné, že jde vypustit obsah v Grido buňce jak v html či bez a pokud ano, tak nevím, jestli tam něco nastaví, abys to ty poznal a mohl k tomu přizpůsobit knihovnu resp. aby to vždy vracelo, to co vrací Grido dle jeho nastavení.

[Robyer]

Ten problém s HTML je naštěstí (pro mě) problém grido.js, dle mých testů to dělá i bez live-form-validation.js skriptu.

[Robyer]

.... ale oprava vypadá jednoduše. V grido.js si změň metodu:

         /**
         * Revert changes in cell.
         * @param {jQuery} $td edited cell
         */
        revertChanges: function($td)
        {
            $td.html(this.oldValue);
        },

tak, že místo .html bude .text, takto:

         /**
         * Revert changes in cell.
         * @param {jQuery} $td edited cell
         */
        revertChanges: function($td)
        {
            $td.text(this.oldValue);
        },