jQuery + Snippet – Po překreslení nefunguje

Pavel Kravčík

Projel jsem nekonečně mnoho příspěvků o tomhle tématu a řešilo se to opravdu hodněkrát, ale ničeho jsem se nedobral.

Mám jQuery kód, který funguje. Pokud však dojde k překreslení části DOM struktury – fungovat přestane. Samozřejmě se musí použít (livequery – dnes .on()). To už jsem tam měl předtím, ale i přes mnoho ujištění, že .on() se naváže i na dynamické prvky se tak neděje. A nenapadá mi žádný způsob, jak to debugovat.

Pokud ten snippet nepřekreslím, vše funguje správně. Nápad mám přibližně podobný – ajaxově odešlu formulář, pokud má chyby, tak se překreslí jen formulář a pokud nemá, tak se překreslí část, kde bude tlačítko umožnující jít na další krok.

Otázka tedy zní, jak vyřešit / testovat (Firebug console prázdná) překreslení části kódu z Ajax formu a zároveň „nerozbít“ navěšené .on() události v jQuery.

// JS
<script>
$('#activate-step-3').on('click', function(e) {
        $('ul.setup-panel li:eq(2)').removeClass('disabled');
});
</script>

// HTML část
<div class="col-xs-12">
	<div class="col-md-12 well">
    	<h1 class="text-center"> STEP 2</h1>
        {snippet step1}
        	{control step1}
        {/snippet}
    </div>
    {snippet allowStep3}
    	<a id="activate-step-3" class="btn btn-success btn-md pull-right">
        	Údaje jsou v pořádku, pokračovat
        </a>
	{/snippet}
</div>

// PHP (komponenta)
protected function createComponentStep1()
{
	$form = new Form();
    $form->elementPrototype->addAttributes(array('class' => 'ajax'));

    $form->addText('test')
    	->addRule(Form::FILLED);
    $form->addSubmit('save');

    $form->onSuccess[] = [$this, 'successStep1'];

    return $form;
}

public function successStep1($form, $values)
{
    $this->redrawControl('step1');
    $this->redrawControl('allowStep3');
}

Pavel Kravčík

Ok. Hned, jak jsem to poslal – tak mi to došlo. Jsem kretén. :)

Ale řešení, pokud by někdo hledal něco podobného:

	// Tohle je nesmysl.
	$('#activate-step-3').on('click', function(e) {};

	// Stačí si najít nějakého rodiče nad tím měnícím se prvkem a hlídat to tam
	$('#rodic').on('click', '#activate-step-3', function(e) {};

akadlec

zřejmě si nepochopil to ja .on metoda funguje. Buď eventy navazuj dynamicky znova na snippety tak jak se ti volají a nebo je navaž na obalovací element ale to chce trochu s rozumem, čím více navěšených událostí tím více zatěžuješ prohlížeč.

Pavel Kravčík

Došlo mi to. Jsou asi čtyři, takže myslím, že ta režie bude minimální. A tak asi bude fungovat celé nette.ajax, že budou navázány eventy na .ajax .toggle. Možná je moje představa mylná. Ale nepovažoval jsem to za problém.

A jak by takové dynamické znovunavázání vypadalo? Tím si nejsem vůbec jistý. Předpokládám něco takového, ale vůbec mi nepadá jak tam navěsit to volání konkrétního on() nebo obyčejného click.

https://github.com/…ette.ajax.js#…

akadlec

Jednoduše, do success metody ajaxového požadavku si dáš zavolání bindování, apod.

ale obecně je snad lepší se jQuery vyhýbat obloukem a snažit se JS psát „lépe“

Pavel Kravčík

Děkuju za odpověď. AJAX a jQuery je pro mě prakticky novinka.

Myslel jsem, že jQuery je obálka nad JS – jen pro programátorský konfort, že místo elementGetByName můžu používat hezčí $(‚#ahoj‘) a základní operace má vyřešené. Něco jako NetteDatabase a PDO a mysql_query().

Můžeš mi ukázat nějaké řešení „lépe“? Nebo někam odkázat. Rád se na to podívám ve volném čase.

akadlec

No právě že to je obálka, ale taková tlustší a někdy je to jako jít na komára s kanónem ;) Pokud s JS začínáš tak bych asi místo jQuery šel rovnou do něčeho promakanějšího jako react, angular, apod. ale já osobně nejsem JS guru, taky mám v projektu jQuery ale postupně se jej snažím odbourat a nahradit právě tím čistým JS jako je getElementByName atd.

Pavel Kravčík

Jasně, to ale můžu říct i třeba o ORM. PRotože některé dotazy přes query() jsou 100× rychlejší i více. Je to ta daň za pohodlnost a programátorský komfort a na většině malých projektů ty desetiny sekund člověk nepozná, takže mi to přijde v pohodě.

Ano koukal jsem react, node a podobně. Ale nevidím v tom teď přínos se něco 40 hodin učit, když to zvládnu za 15 minut v jQuery. :) Zvlášť, když jde o práci. Ve volném čase bych si s tím určitě pohrál, ale vždy jsem měl takový odpor k JS zvláštní. Přijde mi to nehezké, neúčinné. A nechtěl jsem v tom nic dělat, kromě drobností pro webovky. Na komunikaci klient-server v aktuálním čase se mi dříve líbil AdobeFlex, ale to už je mrtvé. Taky asi bylo one-man show jako Nette.

Každopádně díky za odpověď i rady, vím kam míříš.

akadlec

Tak ono to není o uspořeném čase, ale spíš o tom že ta knihovna a pak její následná implementace docela podstatně ukusuje operační paměti a pokud pak děláš na něčem větším (klidně i obyč administrace cms apod.) a prošpikuješ to JavaScripty s jQuery tak se taky může stát že prohlížeč zabiješ natolik že někdo se slabším kompem si pak ani nevrzne.

A vidíš, sice si zvládl jQuery za 15min ale zatím nevíš jak jej optimalizovat, jak je vhodné volit slectory, zda něco cachovat, jak události znova nabindovat. Je to taky o tom co chceš do budoucna dělat, osobně se přikláním k názoru že ti react apod v budoucnu otevře více dveří než základy jQuery.

chemix

ja bych jen doplnil ze ReactJS neni spasa :) ReactJS je jen knihovna co se stara o vykreslovani sablon. A treba v ukazkach reactu jQuery pouzivaji https://facebook.github.io/…al-ajax.html

Angular je „mrtvy“, a Angular2 je uplne neco jineho.

zajimava stranka je http://youmightnotneedjquery.com/ kde uvidis jak jednotlive veci co resis krze jQuery muzes vyresit „jinak“ .. ala vanila js style. Ale pozor!!! na verze IE. Zalezi co delas za aplikaci.

Pokud ti tam chodi stare IE tak jQuery je ta „spasa“ ktera vznikla prave na reseni meziprohlizecovych problemu a zjednoduseni syntaxe.

Pokud by jsi zacal stavet nejakou super JS apliakci aby uzivatel mel ten nejlepsi zazitek, tak na to jsou treba sablony v js, model v js, cokoli v js a pak ti na php zbyde jen generovat najake JSON response.

Cesta je treba skrze backbone, ember, a mnoho dalsich „hyper cool“ knihoven. Ale pak imho narazis na to ze mas spousta kodu v JS a ne kazdemu vyhovuje ten jazyk, a pak mas dalsi otazku, kdyz uz mam tolik veci v js na frontendu tak neni nahodou cesta k node.js a nejakemu ucelenemu ultimatnimu reseni ke kteremu ted prechazeji i velci hraci… sam jsem zvedavy jak dlouho jim to vydrzi :)

Pro takove to ozivovani administraci, stranek apd bude stara generace frameworku vzdy dostacujici. Ja treba pouzivam MooTools a jsem s nimi stale spokojen. Resi mi to co maji resit, a zbytek dela server.

Urcite se mrkni na ReactJS, at tusis co to vlastne je (neco jako Latte) neni to vsespasne pozor! Treba existuje dalsi alternativa mensi ne od facebooku RiotJS. Angular svuj hype ma uz za sebou a je vtipne jak ho po „smrti“ zacinaji teprve implementovat velke SW houses co delaji ty divne aplikace pro korporaty nebo banky. Proto tu bude s nama umirat jeste hodne dlouho.

tak i tak preju krasne chvile u zkoumani novych veci :)

akadlec

Jop pod to bych asi podepsal, jak jsem psal nejsem JS guru takže vše kolem JS nesleduju, jen co vím od ex-kolegů co přešli do jiných korporátů jak se všude tlačí JS a pokud tam JS je tak se zbavují jQuery. Jen jsem chtěl upozornit že jQuery není samospásné a pokud se nepoužije s rozumem tak to appku zabije. btw ten link na jquery je fakt super.