onbeforeunload + ajax e jQuery

[mark_]

Pessoal, já estou há alguns dias quebrando a cabeça nesse problema...

O cenário é o seguinte: tenho uma página do sistema dividida em abas, estou usando o jQuery Tabs para isto. Cada aba tem um textarea (que no caso estão acopladas com o TinyMCE, mas isso não vem ao caso).

Com tantas abas e campos de texto, o usuário está com medo de digitar alguma coisa lá, esquecer de gravar e perder a informação. Então pensei em um esquema onde toda vez que o usuário troca de aba, eu executo uma função ajax que compara se o conteúdo dos textareas mudou, dando um aviso pro usuário se ele quer "salvar".

Até aí funciona bem. O problema é quando o cara altera algum textarea e muda de página.

Resolvi tentar o onbeforeunload, mas não está funcionando.

Quando clico em algum link pra deixar a página, o browser até tenta executar as funções que checam alterações nos textareas, mas é como se a tela mudasse antes de finalizar a checagem...

Eu coloquei um alert "teste" só pra travar a página, aí ele fez a checagem corretamente, e quando eu fechei o alert ele seguiu pro link clicado.

Eu to usando o onbeforeunload errado? Tem algum jeito de "brecar" a página, como eu fiz com o alert, até ele fazer os testes necessários e só depois seguir em frente?

[Linkbes]

Amigo, usando ajax para checar se foi feita alguma alteração é meio ruim por 2 motivos:

1) consumo de banda

Ter que ficar enviando requisições ao servidor toda hora,

imagina o cliente ficar brincando de clicar nas abas e fizer uns 20 cliques direto ?

2) Se você mandar fazer o UPDATE o MySql já checa sozinho se foi alterado e só altera caso seja diferente do que já está guardado.

O que você pode fazer é colocar o ajax com async : false, dessa meneira ele vai funcionar como o alert que você testou, só vai sair quando terminar de checar.

E para não ir para próxima página você coloca o preventDefault() no click de todos os links da página que estão os editores.

Algo mais ou menos assim:

$(document).ready(function()
{
    $("a").click(function( e )
    {
        $.ajax({
            async : false,
            url : "sua/pagina/aqui",
            success : function(responseText)
            {
                /*
                 * Dê um jeito de ná pagina que verifica dar echo somente no 0 quando for erro
                 * ou 1 quando der certo.
                 */
                if( responseText == 0 )
                {
                    e.preventDefaut();//isso previne que o navegador vá para o link clicado.
                    alert("você esquece de salvar, oreia seca!");
                }
                else
                {
                    //não precisa de else. pois nada foi alterado.
                }
            }
        });
        
    });
});

Mas reforço que verificar em ajax é ruim.

Você tambem pode criar 2 campos text 1 que vai ser do MCE e outro oculto, e na hora do clique, você confere se os 2 inputs continuam iguais. isso vai eliminar o ajax desse seu problema.

Testa o código ai veja se se encaixa no que você precisa e dá o retorno.

espero ter ajudado.

[mark_]

ae linkbes valeu pela resposta.

estou tentando usar esse e.preventDefault() mas retorna a mensagem no console javascript

e.preventDefaut is not a function