Závislé FormControly (nejen SelectBoxy) – primitivní řešení

Tak už je to tak nějak po kupě a funkční. Chvíli ale ještě potrvá vše hezky zabalit a vyčistit. Problém samozřejmě je udržet vysoký bezpečnostní standard, který Nette formuláře nabízejí. Takže mají-li hodnoty získané po odeslání formuláře být kontrolovány stejně jako u ostatních formulářů (například povolené hodnoty SelectBoxu atd), musí se uchovat historie změn kontrolů a znovu použít při kontrolním vytváření formuláře před getValues() v onClick či onSubmit callbacku. Pokud uživatel v handlerech použije jen bezkontextové změny (nezávislé na historii), stačí si uchovat jméno handleru a jeho parametry použité při poslední změně každého kontrolu. Session by pro to nebyla vhodná (kdo ví, co uživatel, jeho prohlížeč a připojení s formulářem mezitím dělají), musí se tedy použít něco přímo ve formuláři na straně klienta – nejlépe skrytá pole. V těch však musí být hodnoty, které odolají jakýmkoli útokům, tedy musí se před voláním handlerů interpretovat s dostatečnou kontrolou. A zárověň je vhodné jejich hodnoty z vraceného pole odebrat, aby v něm zbytečně nestrašily, i když by to jinak ničemu nevadilo. Vše již poměrně funguje až na případ záměny kontrolu za zcela jiný typ (třeba text input za div z příkladu). Tam dochází k drobným chybám, po jejich vyřešení zveřejním výsledek.

Editoval Martin (6. 4. 2011 12:38)

Zdravím, děkuji za nápovědu. Mohu se zeptat na důvod změny? Nijak mi nevadí to tam takto dát, jen moje první myšlenka byla zajistit co nejméně psaní ze strany uživatele komponenty a takto to bude mít sice trochu intuitivnější, bude však muset psát o několik znaků víc. Nebo že by šlo o možnost odkazovat se na kontroly různých formulářů? Jinak naskytl se mi nečekaný problém. Při „zajaxování“ kontrolu vytvářím skrytá pole pro posledně volaný handler a jeho parametry. Zatím je to neohrabané (viz ukázka dále), ale vše většinou funguje:

function addAjaxToFormControl(Nette\Forms\FormControl $control, $pres, $handle, $applyTo = NULL)
{
    $form = $control->getForm();
    $on_change = $control->getControlPrototype()->onchange;
    if (is_null($applyTo))
    {
        $apply_to = 'this.id';
        $applyTo = $control->name;//'this.name';
    }
    else
    {
        $appTo = $form[$applyTo];
        $apply_to = $appTo->getHtmlId();
    }
    $applyToHandler = $applyTo.'Handler';
    if (!$form->offsetExists($applyToHandler))
    {
        $form->addHidden($applyToHandler, "NULL");
    }
    $applyToIdent = $applyTo.'Ident';
    if (!$form->offsetExists($applyToIdent))
    {
        $form->addHidden($applyToIdent, 'NULL');
    }
    $applyToValue = $applyTo.'Value';
    if (!$form->offsetExists($applyToValue))
    {
        $form->addHidden($applyToValue, 'NULL');
    }
    $applyToApplyTo = $applyTo.'ApplyTo';
    if (!$form->offsetExists($applyToApplyTo))
    {
        $form->addHidden($applyToApplyTo, 'NULL');
    }
    $applyToApplyToId = $applyTo.'ApplyToId';
    if (!$form->offsetExists($applyToApplyToId))
    {
        $form->addHidden($applyToApplyToId, 'NULL');
    }

    $jsOnChange = '$.get("?do="+"'.$handle.'"+"&presenter="+"'.$pres.
        '", {"ident": this.name, "value": this.value, "applyto": "'.$applyTo.'", "applytoid": "'.$apply_to.
        '"}, function(data) {$("#"+"'.$apply_to.'").replaceWith(data);}, "html");'.
        $applyToHandler.'.value = "'.$handle.'";'.
        $applyToIdent.'.value = this.name;'.
        $applyToValue.'.value = this.value;'.
        $applyToApplyTo.'.value = "'.$applyTo.'";'.
        $applyToApplyToId.'.value = "'.$apply_to.'";';
    $control->getControlPrototype()->onchange($on_change.$jsOnChange);
    return $control;
}

Nette\Forms\FormControl::extensionMethod('addAjax', 'addAjaxToFormControl');

Když si ale otevřu konzoli Firebugu, objeví se mi například toto:

Byl dosažen limit logu Firebugu. 0 záznamů není zobrazeno		Předvolby
GET http://gymnastikazizkov.profitux.cz/ZavisleContr...ue=1&applyto=pristup&applytoid=frmmyForm-pristup
GET http://gymnastikazizkov.profitux.cz/ZavisleControly/www/?do=changeData&presenter=Homepage&ident=pristup&value=1&applyto=pristup&applytoid=frmmyForm-pristup
200 OK 1.28s	jquery.min.js (řádek 141) pristupHandler is not defined [Zastavit při této chybě] <!DOCTYPE html> www (řádek 1)

... TADY TO TŘEBA MNOHOKRÁT PROJDE V POŘÁDKU ...

GET http://gymnastikazizkov.profitux.cz/ZavisleContr...ta&value=1&applyto=text&applytoid=frmmyForm-text
GET http://gymnastikazizkov.profitux.cz/ZavisleControly/www/?do=changeData3&presenter=Homepage&ident=hodnota&value=1&applyto=text&applytoid=frmmyForm-text
200 OK 1.53s
jquery.min.js (řádek 141)
GET http://gymnastikazizkov.profitux.cz/ZavisleContr...ue=1&applyto=pristup&applytoid=frmmyForm-pristup
GET http://gymnastikazizkov.profitux.cz/ZavisleControly/www/?do=changeData&presenter=Homepage&ident=pristup&value=1&applyto=pristup&applytoid=frmmyForm-pristup
200 OK 2.72s
jquery.min.js (řádek 141)
GET http://gymnastikazizkov.profitux.cz/ZavisleContr...ue=1&applyto=hodnota&applytoid=frmmyForm-hodnota
GET http://gymnastikazizkov.profitux.cz/ZavisleControly/www/?do=changeData2&presenter=Homepage&ident=pristup&value=1&applyto=hodnota&applytoid=frmmyForm-hodnota
200 OK 2.73s
jquery.min.js (řádek 141)
GET http://gymnastikazizkov.profitux.cz/ZavisleContr...up&value=1&applyto=text&applytoid=frmmyForm-text
GET http://gymnastikazizkov.profitux.cz/ZavisleControly/www/?do=changeData3&presenter=Homepage&ident=pristup&value=1&applyto=text&applytoid=frmmyForm-text
200 OK 2.73s
jquery.min.js (řádek 141)
GET http://gymnastikazizkov.profitux.cz/ZavisleContr...ue=2&applyto=pristup&applytoid=frmmyForm-pristup
GET http://gymnastikazizkov.profitux.cz/ZavisleControly/www/?do=changeData&presenter=Homepage&ident=pristup&value=2&applyto=pristup&applytoid=frmmyForm-pristup
200 OK 1.25s
jquery.min.js (řádek 141)
pristupHandler is not defined
[Zastavit při této chybě] <!DOCTYPE html>
www (řádek 1)
GET http://gymnastikazizkov.profitux.cz/ZavisleContr...ue=1&applyto=pristup&applytoid=frmmyForm-pristup
GET http://gymnastikazizkov.profitux.cz/ZavisleControly/www/?do=changeData&presenter=Homepage&ident=pristup&value=1&applyto=pristup&applytoid=frmmyForm-pristup
200 OK 1.24s
jquery.min.js (řádek 141)
pristupHandler is not defined
[Zastavit při této chybě] <!DOCTYPE html>
www (řádek 1)
GET http://gymnastikazizkov.profitux.cz/ZavisleContr...ta&value=2&applyto=text&applytoid=frmmyForm-text
GET http://gymnastikazizkov.profitux.cz/ZavisleControly/www/?do=changeData3&presenter=Homepage&ident=hodnota&value=2&applyto=text&applytoid=frmmyForm-text
200 OK 1.88s
jquery.min.js (řádek 141)
textHandler is not defined

A opravdu při vyhodnocování ve skrytých polích nejsou někdy poslední data zapsaná. Přitom když Firebug přepnu na sledování html, tak tam samozřejmě všechna skrytá pole stále jsou. Tušíte někdo, jak je možné, že když si klikám sem tam stále v jednom selectboxu a provádí se tedy stále stejný javascrit, občas prostě nenajde nějaký input podle name? Také už pak neproběhne volání ostatních handlerů, takže js zřejmě spadl. Léta jsem programoval desktopy, javascript vídám až v poslední době, tohle mi přijde jako nějaký problém s paralelním zpracováním. Je to možné? Že by se hodnota do skrytého divu cpala ve chvíli, kdy s ním zrovna pracuje jquery? Z časového sledu výpisu v konzoli by mi to tak také přišlo, mám tedy zapsání hodnot do skrytých inputů někam přesunout? Vygenerovaný js dle Firebugu vypadá takto:

onchange="$.get("?do="+"changeData3"+"&presenter="+"Homepage", {"ident": this.name, "value": this.value, "applyto": "text", "applytoid": "frmmyForm-text"}, function(data) {$("#"+"frmmyForm-text").replaceWith(data);}, "html");textHandler.value = "changeData3";textIdent.value = this.name;textValue.value = this.value;textApplyTo.value = "text";textApplyToId.value = "frmmyForm-text";"

respektive za běhu takto:

function onchange(event) {
$.get("?do=changeData&presenter=Homepage", {ident: this.name, value: this.value, applyto: "pristup", applytoid: "frmmyForm-pristup"}, function (data) {$("#frmmyForm-pristup").replaceWith(data);}, "html");
pristupHandler.value = "changeData";
pristupIdent.value = this.name;
pristupValue.value = this.value;
pristupApplyTo.value = "pristup";
pristupApplyToId.value = "frmmyForm-pristup";
$.get("?do=changeData2&presenter=Homepage", {ident: this.name, value: this.value, applyto: "hodnota", applytoid: "frmmyForm-hodnota"}, function (data) {$("#frmmyForm-hodnota").replaceWith(data);}, "html");
hodnotaHandler.value = "changeData2";
hodnotaIdent.value = this.name;
hodnotaValue.value = this.value;
hodnotaApplyTo.value = "hodnota";
hodnotaApplyToId.value = "frmmyForm-hodnota";
$.get("?do=changeData3&presenter=Homepage", {ident: this.name, value: this.value, applyto: "text", applytoid: "frmmyForm-text"}, function (data) {$("#frmmyForm-text").replaceWith(data);}, "html");
textHandler.value = "changeData3";
textIdent.value = this.name;
textValue.value = this.value;
textApplyTo.value = "text";
textApplyToId.value = "frmmyForm-text";
}
function (data) {
$("#frmmyForm-hodnota").replaceWith(data);
}
function (data) {
$("#frmmyForm-text").replaceWith(data);
}
function onchange(event) {
$.get("?do=changeData&presenter=Homepage", {ident: this.name, value: this.value, applyto: "pristup", applytoid: "frmmyForm-pristup"}, function (data) {$("#frmmyForm-pristup").replaceWith(data);}, "html");
pristupHandler.value = "changeData";
pristupIdent.value = this.name;
pristupValue.value = this.value;
pristupApplyTo.value = "pristup";
pristupApplyToId.value = "frmmyForm-pristup";
$.get("?do=changeData2&presenter=Homepage", {ident: this.name, value: this.value, applyto: "hodnota", applytoid: "frmmyForm-hodnota"}, function (data) {$("#frmmyForm-hodnota").replaceWith(data);}, "html");
hodnotaHandler.value = "changeData2";
hodnotaIdent.value = this.name;
hodnotaValue.value = this.value;
hodnotaApplyTo.value = "hodnota";
hodnotaApplyToId.value = "frmmyForm-hodnota";
$.get("?do=changeData3&presenter=Homepage", {ident: this.name, value: this.value, applyto: "text", applytoid: "frmmyForm-text"}, function (data) {$("#frmmyForm-text").replaceWith(data);}, "html");
textHandler.value = "changeData3";
textIdent.value = this.name;
textValue.value = this.value;
textApplyTo.value = "text";
textApplyToId.value = "frmmyForm-text";
}

Editoval Martin (7. 4. 2011 2:30)

Ty nepoužíváš FormContainer -y, žene? Protože prostým pojmenováním se dostaneš pouze na přímé potomky formuláře.

$form = new AppForm();
$form->addText('name', 'Jmeno');
$address = $form->addContainer('address');
$address->addContainer('zip', 'PSČ');

jak napsáním stringu svážu nějakou komponentu, se ‚zip‘? Takhle to jde mnohem lépe:

$form['pristup']->addAjax('Homepage', 'changeData2', $form['address']['zip']);

Tak jsem zavolání …hanler = „..“ dal dovnitř callbacku volaného po návratu hodnot pomocí jquery. Díky tomu javascript provede vždy alespoň požadovanou změnu vzhledu inputu. Ale stále platí, že někdy prostě nenajde příslušný skrytý input podle jména, takže se pak validace formuláře po odeslání provádí se starými daty (vytvoří se nesprávná kontrolní struktura formuláře). Chyba se teď v konzoli Firebugu objevuje hezčí a vybarvená od jquery. Mohu někoho, kdo ovládá javascript lépe než já, poprosit o připojení se třeba Firefoxem s Firebugem na ukázku a shlédnutí chyby v konzoli, až se objeví? Stačí přepínat první (horní) select cca po 3–5 sec nahoru a dolu, při cca 2. až 10. přepnutí se chyba v konzoli objeví.

A tušíte někdo, proč, když se mi konečně po několikerém proběhnutí skript zastavil na breakpointu, při krokování ovšem proběhl bez chyb, v konzoli jsem pak viděl hlášku:

"Příkazový řádek Firebugu nepodporuje '$0'"
"Příkazový řádek Firebugu nepodporuje '$1'"

?

Editoval Martin (7. 4. 2011 9:38)

Tak zatím jsem to vyřešil pomocí jquery:

$("#'.$applyToHandlerId.'").val("'.$handle.'");
$("#'.$applyToHandlerIdent.'").val(this.name);
$("#'.$applyToHandlerValue.'").val(this.value);
$("#'.$applyToHandlerApplyTo.'").val("'.$applyTo.'");
$("#'.$applyToHandlerApplyToId.'").val("'.$apply_to.'");

To, zdá se, funguje spolehlivě. Ukázku zatím nechávám bez této změny, kdyby se někomu chtělo přijít na to, proč js někdy nenašel skrytá pole.

Teď už to jen zkompletuji, vyčistím, pravděpodobně vytvořím potomka AppForm a v případě zájmu přidám do komponent. A použiju výše uvedená doporučení, jen pak musím vše předělat na identifikaci podle Id.

Editoval Martin (7. 4. 2011 11:57)