Jednoduché potvrzování akce v jQuery a HTML5

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.

Relevantní články

• 7 samozřejmostí dnešního webhostingu | Jako majitel hostingu sleduji trh a nestačím se divit, co vše jsou zákazníci schopni zkousnout a za co jsou ochotni zaplatit.…
• jQuery pro začátečníky: AJAX | Pozdě, ale přece. Poslední díl seriálu o jQuery je zde. Tématem se vracím k článku, který jsem napsal téměř přesně před třemi lety. S jQuery…
• Uvidíme se na WebExpo? | Jsme s Tomášem Randou přihlášeni na WebExpo a hodláme se tam ukázat, jak v sobotu, tak v neděli. Těším se na některé přednášky a…
• jQuery pro začátečníky: Události | Událost je nějaká akce, která se na HTML stránce stane. Může to být třeba vaše kliknutí na cokoli, pohyb myší na…
• jQuery pro začátečníky: metody a efekty | V minulém díle jsme se naučili vybrat si prvek v HTML stránce, jaký se nám zamane. Ukázali jsme si už i jednu…

Komentáře

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