#JQuery znovu, lépe a radostněji

Pamatuje si na článek Ajax pomocí JQuery snadno a rychle z října 2010 ? Tento článek sklidil v odborných kruzích značnou kritiku. (Mimochodem - jsou pod ním jedny z nejlépe hodnocených komentářů tady na TečceCZ - pravděpodobně proto, že celý systém byl v té době ještě zbrusu nový, a čtenáři a komentátoři TečkyCZ zřejmě byli zvědaví na to jak funguje a chtěli si to vyzkoušet.)

Nicméně - bez ohledu na to, že PHP jako takové je v podstatě prasárna, jsem brzy zjistil, že i mnou předvedený jednoduchý JQuery [jquery.org] kód demonstrující interaktivní HTML pomocí Ajaxu byl hodně zprasený. Původní článek, ačkoliv v zásadě nabízel funkční kód, se dopouštěl jedné zásadní mystifikace a současně propagoval zastaralé řešení, které není XHTML validní (mimochodem - jak se brzy dozvíte, TečkaCZ je konečně XHTML validní - tedy, alespoň úvodní stránka a pár dalších modulů, jako různé pohledy do historie článků nebo "zdi vzkazů": začišťování samotných starých článků bude minimálně stejná piplačka, jako postupné dodatečné přidávání ikonek k těm zajímavějším, apod.).

Jak jistě tušíte - mystifikací bylo, že jsem napsal, že pro moderační Ajax nešlo použít běžný <a href=...> tag: samozřejmě že šlo - pouze by navázaný JavaScript býval musel vrátit hodnotu false, aby se ve zpracovávání prokliknutého odkazu dále nepokračovalo. Niceméně, když jsem se tak hezky naučil ostylovat kurzor myši nad vybraným blokem (např. <span>...</span>), tak jsem to nechal víceméně tak, jak to bylo. Zastarým řešením dále bylo použít XHTML-nevalidní atribut onClick=... pro volání javascriptového kódu: JQuery objekty mají na toto elegantní a stručnou metodu .click(function(){...}). Když už jsem tedy zjistil, že dalším důležitým krokem v SEO souboji s molochem zvaným Gůgl bude co nejrychleji přehodnotit svůj laxní přístup ke XHTML validitě, tak mi nezbylo, než jako vedlejší efekt celý zprasený kód úplně opravit. Navíc jsem přidal ještě charakteristický Ajaxový "chroustač", bez kterého žádný Web 2.0 není úplný - popravdě, k tou mě dovedlo pomalé Wi-Fi připojení na chatě - v Praze jsem zmlsaný optickým vláknem dotažným téměř až na desktop - jde o takzvané FTTD [de.wikipedia.org] řešení, neboli Fiber-to-the-desktop :-)

Poznámka: tzv. "chroustač" je animovaný gif, který se zobrazuje během načítání Ajaxového HTML fragmentu - a je to věc, která je pro Web 2.0 stejně zásadní, jako byly tagy <BLINK>...</BLINK> a <MARQUEE>...</MARQUEE> v zapomenuté prehistorii webu, kdy Netscape Navigátor zahajoval své vítězné tažení po planetě a Microsoft Internet Explorer tehdy v rámci ochrany lidských práv civilních obyvatel Internetu zahájil svojí humanitární protiofenzívu (škoda, že obě strany tehdy rychle dosáhly stavu mutually-assured destruction pomocí vzájemně úmyslně nekompatibilních tagů - mohla být legrace).

Dva fragmenty stávajícího PHP zdrojáku, připravující HTML kód pro moderaci, nyní vypadaj zhruba takto - přiznám se, že umístění "chroustače" dovnitř cílové oblasti :

$qhod.='Hodnocení <span id="'.$id_prefix.'"><img id="loader_'.$id_prefix.'" alt="" style="display:none; height:16px; width:16px;" src="img/ajax-loader.gif" />[<span title="Kliknutím zvýšíte hodnocení" class="plus" id="clp_'.$id_prefix.'"> + </span>] <span'.$stylehod.'><strong>'.$hodnoceni.'</strong><small> ['.$hodnoticich.'x]</small></span> [<span title="Kliknutím snížíte hodnocení" class="minus" id="clm_'.$id_prefix.'"> - </span>]</span> ';
$qhod.='<script type="text/javascript"> /* <!-- */';
$qhod.='$("#clp_'.$id_prefix.'").click(function(){$("#clp_'.$id_prefix.'").hide(); 
$("#loader_'.$id_prefix.'").show(); 
$("#'.$id_prefix.'").load('.$url_plus.');});'; 
$qhod.='$("#clm_'.$id_prefix.'").click(function(){$("#clm_'.$id_prefix.'").hide(); 
$("#loader_'.$id_prefix.'").show(); 
$("#'.$id_prefix.'").load('.$url_minus.');});'; 
$qhod.='/* --> */</script>'; 

... nepodstatnou pasáž vynechám, a zaměřím se opět na zběsilé mísení 3-4 syntaxí (PHP, XHTML, občas CSS, JavaScript) na jediné řádce :-)

$qhod.='[<span title="Kliknutím odstraníte přívlastek" class="demod" id="cld_'.$id_prefix.'_'.$demodid.'">x</span>]';
$qhod.='<script type="text/javascript"> /* <!-- */';
$qhod.='$("#cld_'.$id_prefix.'_'.$demodid.'").click(function(){$("#cld_'.$id_prefix.'_'.$demodid.'").hide(); 
$("#demodloader_'.$id_prefix.'").show(); 
$("#'.$id_target.'").load('.$url_demod2.');});';
$qhod.='/* --> */</script>';

A po odeslání do browseru to vypadá např. takto (jak si ostatně můžete snadno ověřit :

Hodnocení <span id="cl_1148"><img id="loader_cl_1148" alt="" style="display:none; height:16px; width:16px;" src="img/ajax-loader.gif" />
[<span title="Kliknutím zvýšíte hodnocení" class="plus" id="clp_cl_1148"> + </span> ] 
<span class="ratinggood"><strong>9</strong><small> [11x]</small></span>
[<span title="Kliknutím snížíte hodnocení" class="minus" id="clm_cl_1148"> - </span>]</span> 
<script type="text/javascript"> /* <!-- */
$("#clp_cl_1148").click(function(){$("#clp_cl_1148").hide();
$("#loader_cl_1148").show();
$("#cl_1148").load("/rate.php?plus=1&clanek=1148");
$("#cl_1148").show();});
$("#clm_cl_1148").click(function(){$("#clm_cl_1148").hide();
$("#loader_cl_1148").show();
$("#cl_1148").load("/rate.php?plus=0&clanek=1148");$("#cl_1148").show();});
/* --> */ </script>
<span id="modtarget1148"> <span class="notsogrey">[<img id="demodloader_cl_1148" alt="" style="display:none; height:16px; width:16px;" src="img/ajax-loader.gif" />
<strong class="stronger">informativní</strong>[<span title="Kliknutím odstraníte přívlastek" class="demod" id="cld_cl_1148_0">x</span>]
<script type="text/javascript"> /* <!-- */
$("#cld_cl_1148_0").click(function(){$("#cld_cl_1148_0").hide();
$("#demodloader_cl_1148").show();
$("#modtarget1148").load("/mod.php?demoderate=yes&clanek=1148&mod=1");});
/* --> */ </script>
<strong class="stronger">zajímavé</strong>[<span title="Kliknutím odstraníte přívlastek" class="demod" id="cld_cl_1148_1">x</span>]
<script type="text/javascript"> /* <!-- */
$("#cld_cl_1148_1").click(function(){$("#cld_cl_1148_1").hide();
$("#demodloader_cl_1148").show();
$("#modtarget1148").load("/mod.php?demoderate=yes&clanek=1148&mod=5");});
/* --> */ </script>
<strong>vtipné</strong>[<span title="Kliknutím odstraníte přívlastek" class="demod" id="cld_cl_1148_2">x</span>]
<script type="text/javascript"> /* <!-- */
$("#cld_cl_1148_2").click(function(){$("#cld_cl_1148_2").hide();
$("#demodloader_cl_1148").show();
$("#modtarget1148").load("/mod.php?demoderate=yes&clanek=1148&mod=2");});
/* --> */ </script> 
inspirativní[<span title="Kliknutím odstraníte přívlastek" class="demod" id="cld_cl_1148_3">x</span>]
<script type="text/javascript"> /* <!-- */
$("#cld_cl_1148_3").click(function(){$("#cld_cl_1148_3").hide();
$("#demodloader_cl_1148").show();
$("#modtarget1148").load("/mod.php?demoderate=yes&clanek=1148&mod=44");});
/ * --> */ </script>

Samozřejmě - ani dnešní řešení není zdaleka čisté. O inline CSS asi vůbec nemá cenu se zmiňovat - je to sice validní, ale nouzová praktika. A taky inlinovat "customizovaný" javascriptový kód pro každý komentář znovu je v podstatě - navzdory značné úspornosti zápisu - pořád dost velká prasárna. Čisté by bylo použít externí javascript, který by implementoval jedinou funkci, která by dostávala ID moderovaného komentáře (či článku) pouze jako parametr. Samozřejmě.... původní článek měl ale demonstrovat spíše použitelnost JQuery pro "quick and dirty" dobastlení ajaxové interaktivity do léta existujících, kdysi stejně tak "quick and dirty" umatlaných webů.

Čisté by asi taky bylo doplnit title=... atributy k aktivním prvkům nějak plošně (např. opět javascriptem... nebo možná to jde i pomocí CSS - zatím jsem po tom nepátral) - minimálně by to pomohlo výrazně snížit objem dat přenášených při každém načtení stránky...

S "čistým řešením" si zkrátka budete muset počkat, až se pustím do implementace své chystané open-source publikačně-sociální sítě MemoryLeaks.Net - která především nebude implementovaná v PHP a bude současně používat všechny základní postupy při tvorbě webových aplikací, které by člověk očekával od aplikace napsané ve století ančovičky [cs.wikipedia.org] - tedy např. úplné oddělení javascriptu a CSS od XHTML šablon - a stejně tak i úplné oddělení těchto šablon od samotné aplikace. Stávající kód na sebe už zdálky prozrazuje, že používá odporné a zpátečnické postupy, které byly možná zcela běžné ve století ovocného netopýra [cs.wikipedia.org] a a dnes už jsou totálně unfree, uncool a out.