Jak nastavit fungování aktivních prvků AJAXové aplikace?

Zpracování aktivních prvků

Nejen na uživatelských testování jsem si všiml, že méně zkušení uživatelé internetu mají tendence dvakrát klikat, tzv. double-click, na aktivní položky. Aktivními položkami myslím především:

• Odkazy,
• Tlačítka.

Pokud s tím aplikace nepočítá, požadavky se vykonají dvakrát. To může vyvolat chybu nejen v aplikaci, ale také v samotném rozhraní aplikace, například v podobě chybové hlášky. Těm je samozřejmě nutné předcházet.

Zpracování a řešení podobných problémů je celkem jednoduché a efektivní. Princip ukazuje následující obrázek:

Základní myšlenkou je vyvarovat se vícenásobnému odesílání požadavků na server, ale také patřičně informovat uživatele o tom, že jeho požadavek byl odeslán a je zpracováván.

Jak ukazuje obrázek, aktivní prvek je nahrazen zprávou v přívětivé formě, která bude informovat o vykonávání požadavku. To přináší také velkou výhodu v tom, že zpráva bude zobrazena v oblasti, kam uživatel aktuálně věnuje svou pozornost.

Pokud používáte zmíněné jQuery, řešení může vypadat nějak takto:

$("#odesilaci_tlacitko").click(function(event){
event.preventDefault();

var button = $(this);
var spinner = $('

kde element s id="spinner" bude může mít definovaný styl:

#spinner {
height: 16px;
line-height: 16px;
padding-left: 20px;
background: url('spinner.gif') no-repeat 0px 0px;
}

Podobným způsobem lze řešit i situaci s odkazy, kde nastává podobný problém.

Rozdílem je to, že odkaz se nahradí neaktivním elementem signalizujícím zpracovávání požadavku.

Pokud používáte zmíněné jQuery, řešení může vypadat nějak takto:

$("#odkaz").click(function(event){
event.preventDefault();

var odkaz = $(this);
var spinner = $('<\/span>');
spinner.text(odkaz.text()).insertBefore(odkaz)
odkaz.hide();
// … AJAXový požadavek …
});

kde element s id="spinner" bude může mít definovaný styl:

#spinner {
height: 16px;
line-height: 16px;
padding-right: 20px;
background: url('spinner.gif') no-repeat right 0px;
}

Výhodou prezentované ukázky je rychlost vykonání nahrazení jednotlivých aktivních prvků neaktivními. Čas potřebný pro nahrazení bude v řádech jednotek až desítek milisekund – samozřejmě v závislosti na prohlížeči.

Podívejte se na ukázku, jak takové řešení vypadá v reálné aplikaci.

Co když aplikace vrátí chybu jako odpověď?

Může nastat situace, kdy aplikace odpoví chybou. V uvedeném příkladu se s touto možností počítá a proto byla použita konstrukce element.hide() a proto postačí prvek opět zobrazit a element s id="spinner" schovat.

Pokud bychom aktivní prvek odstranili z DOM, museli bychom jej při chybě opět vytvářet.

Nefunkční aplikace při chybě nebo vypnutém JavaScriptu

Stále více se počítá s tím, že uživatelé mají ve svém prohlížeči zapnutý JavaScript. Je však těžké najít relevantní statistiku, která by podala přesné číslo o zastoupení uživatelů, kteří jej však mají vypnutý.

Já osobně při navrhování webu vždy počítám s tím, že aplikace bude funkční i s vypnutým JavaScriptem, a to z několika důvodů:

• Přístupnost – nikdy nemůžete vědět, jaké má uživatel možnosti. Je to jedno z pravidel přístupnosti.
• Chyba při vykonávání skriptu – pokud by na stránce nastala nějaká chyba, vykonávání JavaScriptu bude znemožněno a aplikace nebude funkční.

Proto doporučuji nejprve vytvořit aplikaci bez JavaScriptu a následně aktivní prvky doplnit o patřičné navěšené události. V případě chyby skriptu nebo vypnutém JavaScriptu bude aplikace stále fungovat a váš uživatel nebude zmatený, že aplikace z nějakého důvodu nefunguje.

V této situaci je potřeba dbát na to, aby všechny důležité prvky byly stále funkční. Proto bych osobně nedoporučuji využívat elementy k dotazování aplikace, např. <span>, namísto odkazů.

Závěr

Všiml jsem si i několika dalších řešení. V praxi jsem se ale setkal s tím, že uvedená řešení jsou nejefektivnější jak pro aplikaci, tak pro samotné uživatele.

Dnes je také možné využít hezkého řešení, které poskytuje Twitter Bootstrap v podobě stavových tlačítek. Doplněné o vhodné kurzory, které zmiňuji v článku Usnadněte lidem práci s UI díky správným kurzorům.

A jak řešíte fungování ve vaší aplikaci vy?