{"id":3860,"date":"2014-12-02T11:44:03","date_gmt":"2014-12-02T13:44:03","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3860"},"modified":"2014-12-02T11:44:03","modified_gmt":"2014-12-02T13:44:03","slug":"aviso-de-alteracoes-na-pagina-para-nao-perder-dados-javascript","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/aviso-de-alteracoes-na-pagina-para-nao-perder-dados-javascript\/","title":{"rendered":"Aviso de altera\u00e7\u00f5es na p\u00e1gina para n\u00e3o perder dados &#8211; Javascript"},"content":{"rendered":"<p>Nesta postagem, vamos mostrar como impedir que seu usu\u00e1rio feche o browser sem salvar os dados digitados. Isto \u00e9 muito comum em Webmail ou formul\u00e1rios\/dados importantes que o usu\u00e1rio digitou e sem querer, muda de p\u00e1gina ou a fecha, para evitar que perca as informa\u00e7\u00f5es utilizaremos esta t\u00e9cnica para alert\u00e1-lo e assim, ele tomar a decis\u00e3o necess\u00e1ria.<\/p>\n<p>O evento que vamos utilizar \u00e9 o &#8220;onBeforeUnload&#8221;.<\/p>\n<p>Este evento \u00e9 sempre invocado quando o usu\u00e1rio tenta sair da p\u00e1gina atual, mas, ele por si s\u00f3 n\u00e3o resolve o problema, para resolvermos, precisamos dizer ao browser o que fazer quando isto acontecer.<\/p>\n<p>&nbsp;<\/p>\n<p>Um exemplo de c\u00f3digo seria:<\/p>\n<pre class=\"lang:php decode:true \">$('body').on('click', function(){\n    window.onbeforeunload = function(){\n        return 'Os dados do formul\u00e1rio n\u00e3o foram salvos, deseja permanecer nesta p\u00e1gina?';\n    };\n});<\/pre>\n<p>&nbsp;<\/p>\n<p>Desta forma, quando o evento foi setado, ao mudar de p\u00e1gina ou qualquer a\u00e7\u00e3o que fa\u00e7a ele fechar a p\u00e1gina, ser\u00e1 enviada uma mensagem ao browser, como o exemplo abaixo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3861\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/javascript2.jpg\" alt=\"javascript2\" width=\"359\" height=\"176\" srcset=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/javascript2.jpg 359w, https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/javascript2-300x147.jpg 300w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><\/p>\n<p>Ent\u00e3o, uma forma de fazer isto em um formul\u00e1rio seria, quando carregar a p\u00e1gina salvar o estado do formul\u00e1rio para comparar, caso ele tome alguma a\u00e7\u00e3o que saia da p\u00e1gina, sendo qu\u00ea, temos que desconsiderar o &#8220;SUBMIT&#8221;, pois neste caso a a\u00e7\u00e3o \u00e9 desejada.<\/p>\n<p>Exemplo de c\u00f3digo:<\/p>\n<pre class=\"lang:php decode:true \">$( function(){\n\n\tvar init_form = $('#id_form').serialize();\n\t\/\/ Result example: \"name=&amp;email=&amp;message=\"\n\n\t\/\/ Cancel event onbeforeunload when Submit form\n\t$(':submit').click(function() {\n\t\twindow.onbeforeunload = null;\n\t});\n\t\n\twindow.onbeforeunload = function(){\n\t\tvar check_form = $('#id_form').serialize();\n\t\t\n\t\tif( check_form === init_form )\n\t\treturn null;\n\t\t\n\t\treturn 'Os dados do formul\u00e1rio n\u00e3o foram salvos, deseja permanecer nesta p\u00e1gina?';\n\t};\n});<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Conclus\u00e3o:<\/strong><\/p>\n<p>Isto pode ser utilizado para diversas formas, avisar o preenchimento de um formul\u00e1rio n\u00e3o enviado, salvar o rascunho de um e-mail\/mensagem, dar um desconto em um produto caso o usu\u00e1rio feche a tela de concluir a compra e outras milhares de formas que voc\u00eas imaginarem.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Dicas e sugest\u00f5es:<\/strong><br \/>\nDeixem nos coment\u00e1rios.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nesta postagem, vamos mostrar como impedir que seu usu\u00e1rio feche o browser sem salvar os dados digitados. Emitir um alerta pode fazer com que horas de trabalho sejam poupadas.<\/p>\n","protected":false},"author":1,"featured_media":3862,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,15],"tags":[40,361],"class_list":["post-3860","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas","category-javascript","tag-alertar-usuario","tag-javascript-2"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3860"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3860\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3862"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}