rss

Jednoduché potvrzování akce v jQuery a HTML5

4. 10. 2011

Občas je potřeba na nějaký odkaz ve vaší webaplikaci nalepit potvrzovací dialog. Jde například o odkaz, který něco smaže nebo udělá jinou nenávratnou operaci.

Nejjednodušší bylo vždy použít javasccriptové okénko confirm(), ale pořád to nebylo dost jednoduché na to, abych nebyl líný to psát všude, kde by to mělo být. Navíc jste museli část javascriptového kódu psát přímo do HTML, takže to nebylo tzv. unobtrusive. No naprd.

Naštěstí přišlo HTML5 a jQuery, díky nimž si lze napsat jednoduchou událost, tu si hodit do každého vašeho projektu a vesele a jednoduše ji používat na jakémkoli odkazu díky parametru data-.

Já jsem se právě přistihl, že už ji používám docela často a všude, a proto jsem se rozhodl o ní blognout. Někdo to už možná máte a lépe, někomu to přijde vhod. Dost řečí, tady to je:

Tento kód si dáte do externího .js souboru, který všude používáte (více o použítí jQuery pro začátečníky jsem psal dříve)

$(document).ready( function() {

        // confirmator

        $('a[data-confirm], button[data-confirm], input[data-confirm]').live('click', function (e) {
                 if (!confirm($(this).attr('data-confirm'))) {
                         e.preventDefault();
                         e.stopImmediatePropagation();
                         return false;
                 }
         });
});

A takhle se to potom použije přímo na vašem odkazu, který chcete od uživatele potvrdit:

<a href="/?smazat=1" data-confirm="Opravdu smazat položku?">Smazat</a>

Po kliknutí na odkaz nejdříve vyskočí okénko s dotazem. Kliknutím na OK se odkaz proklikne, kliknutím na Zrušit se nestane nic. Bystřejší vidí, že se to umí nalepit nejen na odkazy, ale také na tlačítka.

PS: je dost možné, že nejsem vůbec autorem tohoto kousku kódu.


Komentáře

Patrik Votoček

Hezké, používám něco podobného. Jen mě poslední dobou trochu hlodá http://www.slideshare.net/?ps-tricks/20 jde o rychlost selektoru.

Jiří Zralý

Patrik Votoček [1]: Pomalost by se mohla asi projevit, pokud by se na stránce objevily desítky a stovky takových odkazů. Zkoušel jsi to?

Případně existuje nějaké stejně elegantní řešení, které je rychlé?

Jakub Jarabica

Jiří Zralý [2]: AFAIK to musí prejsť všetky anchory(nielen ?takové?, ak Vás dobre chápem) a na každom z nich hľadať daný atribút ab vedelo, či patrí do kolekcie matched elements, čo nie je natívne a anchorov býva na webe všeobecne dosť. Sám to však analogicky používam pri data-history(či daný anchor pushState-ne alebo nie danú URL), lebo mi to príde ako najčistejšie riešenie a najelegantjenšie riešenie, hoc s performance penalty.

Petr Václavek

Hmm, bacha ale na veřejně přístupné stránky ? zejména pokud jde o mazání. Co by s takovým odkazem provedl například Google bot? Ten asi neřeší Javascript a prostě přejde na tu adresu a tedy provede smazání.

paranoiq

Petr Václavek [4]: google bot k tomu nemá práva. a na jaké veřejně přístupné stránce se vlastně může vyskytnout odkaz smazat?

Martin Michálek

Petr Václavek [4]: Googlebota bych se tady nebál ? mazání si neumím představit na veřejných stránkách. Tohle je věc uzavřených aplikací.

I tak mě ale tohle řešení připadá vachrlaté ve své závislosti na centrálním JS. Co když budeš mít v centrálním JS souboru chybu? Prohlížeč pak tenhle kus JS nezpracuje a uživatel pak maže bez dotazu.

V případě fatálních operací jako je mazání jsem pro jistější ? obtrusive ? javascript.

Michal Sänger

Pokud by nevadilo probublání až na body, bylo by rychlejší použití delegate:

$('body').delegate('a[data-confirm], button[data-confirm], input[data-confirm]', 'click', function (e) {
        // confirm action
});

Ondřej Mirtes

Pokud jde o zabezpečenou administraci, tak se Google bota sice není třeba bát, ale je to ukázkový případ CSRF :) Takže potvrzení je potřeba spojit ještě s nějakým ověřovacím tokenem. Dělá to např. Nette komponenta ConfirmationDialog nebo Gridito.

Jan Panschab

Jakub Jarabica [3]: Ale .live se binduje na document, ne? Rychlost selectoru tady nehraje roli? nebo se pletu?

Jan Panschab

Resp. by zafungovalo delegate na body či $(document) jak psal Michal Sänger [7]:

Václav

Díky, za zajímavý tip. V IE v pořádku běží, ale je možné, že toto potvrzovací okno nefunguje v Google Chrome?

Václav

Moje chyba, už funguje:)

Peter

dakujem za dobry clanok ale v starsom IE to nefunguje? Forex

Diablo 3 Guide

Blog at times can be used because the press to express the considered. Many people who really like composing will feel pleased because there is the press to create. Next, they've got opportunity to submit their own perform a bit.

idateasia reviews

Well written article , I appreciate very much. idateasia review


Archiv