geeky stuff: confirmar que o utilizador gravou as alterações

Até há uns tempos atrás o principal mecanismo de feedback numa aplicação web era o próprio recarregar da página quando fazíamos alguma coisa, fosse clicar num link, carregar num botão de um form, seleccionar uma opção numa combobox… praticamente qualquer interacção que provocasse previsivelmente uma resposta iria levar a que o servidor nos brindasse com esse compasso de espera que não era mais do que ir até ao servidor buscar a resposta que tinha sido pedida.

Numa aplicação AJAX em que queremos limitar o número de visitas até ao servidor, ou pelo menos restringir esses pedidos à informação necessária e suficiente para responder ao pedido (em vez de mandar sempre a página toda) esse feedback “natural” pura e simplesmente desaparece… é o exemplo perfeito de como uma nova tecnologia em vez de levar à redução de trabalho leva ao (re)aparecimente de outros problemas que se pensavam resolvidos.

No meu caso concreto estou neste momento a desenvolver uma aplicação que mistura algumas interacções em modo tradicional (click => reload page) com outras em modo ajax (click => reload area) pelo que é aceitavel que o utilizador não saiba ao certo que tipo de feedback vai ter… será isto um code-smell?, ou melhor UI-smell… no caso concreto acho que não mas tem uma implicação. Tenho que ser extra-cuidadoso no feedback que dou ao utilizador.

Este exemplo tem a ver com o preenchimento de forms. Como garantir que o utilizador é avisado quando sai de um form sem o ter gravado?

Em “Using JQuery to Warn Users About Losing Data When Navigating Away from Form” encontrei a solução que me parece resolver este problema.

$(document).ready(function(){
  $(':input').bind("change", function() { setConfirmUnload(true); }); // Prevent accidental navigation away

  $("form").submit(function() {
    setConfirmUnload(false);
  });

});

function setConfirmUnload(on) {
  window.onbeforeunload = (on) ? unloadMessage : null;
}

function unloadMessage() {
  return 'You have entered new data on this page.  If you navigate away from this page without first saving your data, the changes will be lost.';
}

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *