Ajax does not work on Firefox

Question

Works perfectly in Chrome browser, and other browsers don’t...

When I enter the login and password it displays the message "Login Successfully!" and stops the page in Mozilla.

See the code:

echo "<meta http-equiv=\"refresh\" content=\"1;URL=inicio.php\" />";
echo "Login Efetuado com Sucesso!";

$(function() {
    caminho = $('.logar');
    action = 'ajax/php/logar.php';
    enviar = $('form[name="logar"]');

    function resposta(datas) {
        caminho.html(datas);
    }

    enviar.submit(function() {
        var cadastrar = $.post(action, $(this).serialize());
        cadastrar.progress(resposta('<center><i class="icon-spin1 animate-spin"></i>Carregando...</center>'));
        cadastrar.done(resposta);
        cadastrar.fail(function() {
            resposta('Erro ao Cadastrar');
        });
        return false;
    });
});

What am I doing wrong?

Answer 1

The problem is not that the request is not working, it is the way you are trying to redirect the user. Chrome is probably the only one that considers metatag that you are using after page loading.

As a solution, I instruct you to exchange your response code for something like this:

echo "<script>
         setTimeout(function() {
             window.location.href = 'inicio.php';
         }, 1000);
     </script>";

echo "Login Efetuado com Sucesso!";

But still, I don’t like this way of putting javascript on the server. Although it is like each one, I recommend you to change the server response, such as returning an object JSON and handle the response in javascript. Following example:

// php
$resposta = array();
$resposta["loginEfetuado"] = true;
echo json_encode($resposta);

// js
function resposta(data) {
    if (data.loginEfetuado) {
        caminho.html("Login Efetuado com Sucesso!");
        setTimeout(function() {
            window.location.href = "inicio.php";
        }, 1000);
    } else {
        caminho.html("Falha ao tentar efetuar login!");
    }
}