Image Image Image Image Image
Scroll to Top

Topo

evento

10

abr
2012

Sem Comentários

Em Blog

Por Allison

Como criar um aviso de dados não salvos

Em 10, abr 2012 | Sem Comentários | Em Blog | Por Allison

Sabe quando você está escrevendo um e-mail e tenta sair de tela, o browser te da um aviso, comunicando a possível perda de dados? Pois é sobre isso que vamos falar. O Gmail e o Rally fazem isso, mas muita gente ainda não sabe como isso é feito de fato.

Este recurso é muito interessante e pode evitar muita dor de cabeça por parte da pessoa que estiver utilizando o seu sistema. No meu caso, este recurso foi aplicado a um CMS. A finalidade da implantação era para que os jornalistas fossem avisados quando algum dado no formulário fosse alterado, e que se o usuário intencionalmente (ou não) tentasse mudar de página, o dado seria perdido. Se tratando de um CMS focado para jornalistas, no qual o conteúdo digitado é extremamente importante, todos recurso que for desenvolvido para evitar perda de conteúdo é extremamente bem-vindo.

onBeforeUnload Event

O evento onbeforeunload não tem uma finalidade exclusiva para ele. É um evento como outro qualquer, que é invocado sempre que o usuário tenta sair da página atual, mas quando ele não está setado, simplesmente nada acontece. O evento responsável por pedir para que o usuário confirme ou não a mudança de pagina é o evento onbeforeunload. Sempre que ele é setado, você vai ver um confirm dialog, igual o da imagem abaixo.

O problema

Se fosse só setar o efeito e ele fizesse todo o resto, seria fácil, não? Mas não é assim. Temos que fazer um script que peça a intervenção do usuário nas seguinte situações:

Ao fechar aba/navegador;

Ao clicar em qualquer outro link, senão o submit do formulário;

O alerta deve aparecer somente se algo for alterado no formulário.

A Solução

$(function(){
  var formObject = $('.new_materia, .edit_materia');
  formObject.data('original_serialized_form', formObject.serialize());

  $(':submit').click(function() {
    window.onbeforeunload = null;
  });

  window.onbeforeunload = function() {
    if (formObject.data('original_serialized_form') !== formObject.serialize()) {
      return "As mudanças deste formulário não foram salvas. Saindo desta página, todas as mudanças serão perdidas.";
    }
  };
});

Como funciona?

Utilizei o $.data() do jQuery porque eu não gosto do var para declarar variáveis globais;

Utilizei o $.serialize() do jQuery para serializar o formulário para comparar o estado do formulário no futuro. E foi a forma mais inteligente que encontrei para identificar se algo realmente foi mudado;

Por default, eu seto o evento onbeforeunload e dentro dele eu verifico se algo foi mudado no formulário;

O único caso em que eu tenho que remover o evento onbeforeunload é quando existe a intenção de salvar o dado. Aí eu utilizei o :submit com evento $.click() para remover o evento e cancelar o alerta, caso houvesse a intenção de salvar o formulário.

Bom, é isso!

Tags | , , , ,

28

jul
2010

Sem Comentários

Em Sites

Por Vinicius AC

PetroNor 2010 – Divulgação WEB e TI

Em 28, jul 2010 | Sem Comentários | Em Sites | Por Vinicius AC

O Petronor 2010 foi dedicado à inovação tecnológica no setor de petróleo. O evento cobriu toda a cadeia produtiva de petróleo e gás através de seminários, exposições de trabalhos acadêmicos e projetos inovadores, e encontros empresariais. Empresários das redes de petróleo e gás de vários estados brasileiros, estudantes, empresas fornecedoras de bens e serviços, associações de classe, universidades, centros de pesquisa e representantes de órgãos estaduais sergipanos participaram do II PetroNor, que aconteceu no Hotel Parque dos Coqueiros, em Aracaju, nos dias 15, 16 e 17 de julho. Com o tema “Criar, inovar e crescer – O desafio do presente” o evento será lembrado pela variedade e qualidade de sua programação, além da ótima organização. Foram três dias de apresentações de projetos, trabalhos acadêmicos, palestras e muitas discussões focadas em inovação tecnológica no setor de petróleo, gás e energia.

No PetroNor, a SWX foi responsável por:

Tags | , , , , , , ,