3

Eu tenho esse código que funciona perfeitamente. Na pagina cadastrarFuncionario.php são feitos um INSERT no banco e um upload de uma imagem e caso haja sucesso no upload tem um echo "Upload efetuado com sucesso!"; que é apresentado na <div id="documento_e"></div> do HTML

$(document).ready(function () {
    // evento de "submit"
    $("#botaoCad").click(function (e) {
        // parar o envio para que possamos faze-lo manualmente.
        e.preventDefault();
        // captura o formulário
        var form = $('#form_funcionario')[0];
        // cria um FormData {Object}
        var data = new FormData(form);
        // processar
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "processosPHP/cadastrarFuncionario.php",
            data: data,
            processData: false, // impedir que o jQuery tranforma a "data" em querystring
            contentType: false, // desabilitar o cabeçalho "Content-Type"
            cache: false, // desabilitar o "cache"
            // manipular o sucesso da requisição
            success: function (data) {
                $("#documento_e").html(data);
            },
            // manipular erros da requisição
            error: function (e) {
                $("#documento_e").html(e);
            }
        });
    });
}); 

Coloquei nele uma validação boostrap 4

    $(document).ready(function () {
        // evento de "submit"
        $("#botaoCad").click(function(event) {
                // Fetch form to apply custom Bootstrap validation
                var form = $("#form_funcionario")

                if (form[0].checkValidity() === false) {
                  event.preventDefault()
                  event.stopPropagation()
                }else{   
                    // cria um FormData {Object}
                    var data = new FormData(form[0]);
                    // processar
                    $.ajax({
                        type: "POST",
                        enctype: 'multipart/form-data',
                        url: "processosPHP/cadastrarFuncionario.php",
                        data: data,
                        processData: false, // impedir que o jQuery tranforma a "data" em querystring
                        contentType: false, // desabilitar o cabeçalho "Content-Type"
                        cache: false, // desabilitar o "cache"
                        // manipular o sucesso da requisição
                        success: function (data) {
                            $("#documento_e").html(data);
                        },
                        // manipular erros da requisição
                        error: function (e) {
                            $("#documento_e").html(e);
                        }
                    });


            }
            form.addClass('was-validated');

        });
    }); 

nesse caso, tanto o INSERT quanto o upload são executados, porém, não aparece a mensagem Upload efetuado com sucesso! na <div id="documento_e"></div> do HTML

OBS: O arquivo cadastrarFuncionario.php é exatamente o mesmo para os dois casos.

Como poderia ser apresentado uma mensagem no segundo caso?

3
  • Dando um alert ou um console.log na resposta aparece algo? Commented 18/12/2018 às 14:55
  • @edsonalves não
    – user60252
    Commented 18/12/2018 às 15:38
  • 1
    Já saquei. Acho que a resposta do Andrei resolve.
    – Sam
    Commented 18/12/2018 às 15:41

1 Resposta 1

2

O problema, ao meu ver, é que você está colocando a preventDefault() dentro do if. Quando seu código entra no else o preventDefault() não é acionado, alterando o estado atual e não mostrando a div com mensagem de sucesso. Na verdade a div é mostrada, mas de maneira tão rápida que não se vê pois logo depois o evento altera o estado atual.

Se você fizer isso dentro do click, irá funcionar normalmente, como antes:

event.preventDefault();
  if (form[0].checkValidity() === false) {
      event.stopPropagation()
    }else{   
        // cria um FormData {Object}
        var data = new FormData(form[0]);
        // processar
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "processosPHP/cadastrarFuncionario.php",
            data: data,
            processData: false, // impedir que o jQuery tranforma a "data" em querystring
            contentType: false, // desabilitar o cabeçalho "Content-Type"
            cache: false, // desabilitar o "cache"
            // manipular o sucesso da requisição
            success: function (data) {
                $("#documento_e").html(data);
            },
            // manipular erros da requisição
            error: function (e) {
                $("#documento_e").html(e);
            }
        });

    }

Você deve fazer log-in para responder a esta pergunta.