jQuery: confirmação não obstrusiva (unobtrusive confirm)

ConfirmPessoal, aqui vai mais uma dica interessante usando jQuery.

Fazer uma confirmação não obstrusiva, ou seja, caso o usuário tenha desabilitado ou não tenha suporte a JS, funcionará do mesmo jeito.

Para fazer isso, iremos declarar que todos os links que possuam a classe “linkdelete”, terão uma confirmação antes de seguir para seus devidos links. (quando clicado).

  1. <a xhref="linkqualquerparaexclusão" class="linkdelete">Delete 1</a>
  2.  
  3. <a xhref="linkqualquerparaexclusão" class="linkdelete">Delete 2</a>
  4.  
  5. ....

Agora a parte divertida com jQuery:

javascript
< view plain text >
  1. $(document).ready(function(){
  2.  
  3. $(".linkdelete").click(function(){
  4. if (!confirm("Tem certeza que deseja apagar?")){
  5. return false;
  6. }
  7. });
  8.  
  9. });

Resumidamente, pegamos todos os itens com o class igual a linkdelete e dizemos que se ele for clicado e caso eu não confirme a mensagem, ele retornará falso, ou seja, cancela a ação. Caso contrário, ou seja, ele confirme a mensagem, será levado a URL do link.

Caso o usuário não tenha JS ou o mesmo esteja desabilitado, sem problemas, pois não colocamos o JS diretamente no (X)HTML.

Bom pessoal, é isso…

Espero que tenham gostado da dica…

Até a próxima…

Obs.: me desculpem pela não publicação de um novo vídeo tutorial esta semana, é que estou completamente sem voz… Mas semana que vem, se tudo der certo, tem material novo sobre Cake… 

6 Comment

  1. oi tulio,otimo exemplo, eu tentei usar esse tipo de confirmação mas no meu caso eu tenho uma lista com todos os usuarios em tabelas que é percorrida por um foreach em php e um dos campos da table é justamente o link da pagina de exclusão com o identificador class=”linkdelete”. mas só que quando clico no link(uma unica vez) ele repete a ação com a mesma quantidade de usuarios que tenho na lista…eu acho que por estar dentro do foreach…tem alguma dica? valeu

  2. Obrigado pela dica simples e objetiva!
    Me ajudou bastante.

  3. Cara valeu mesmo o seu post fiquei um tempão tentando assim que achei este post resolvi fácil fácil.

  4. 3 Said’s comentando… coincidência? rsrs

  5. Obrigada Tulio
    Funcionou direitinho…
    😀

Deixe uma resposta