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 = $('
Odesílám zprávu …<\/div>');
		spinner.insertBefore(button);
		button.hide();
		// … AJAXové odeslání formuláře ...
	});
	

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.

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