Success message with ajax with boostrap validation 4

Question

Success message with ajax with boostrap validation 4

Navigation

#1 by (2 votes)

3

I have this code that works perfectly. In the page cadastrarFuncionario.php an INSERT is made in the database and an upload of an image and if successful in upload has a echo "Upload efetuado com sucesso!"; that is displayed in <div id="documento_e"></div> of 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);
            }
        });
    });
});

I put a boostrap 4 validation on it

    $(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');

        });
    });

In this case, both the INSERT and the upload are executed, however, the message Upload efetuado com sucesso! does not appear in <div id="documento_e"></div> of HTML

NOTE: The cadastrarFuncionario.php file is exactly the same for both cases.

How could a message be displayed in the second case?

ajax validation

asked by anonymous 18.12.2018 / 15:43

1 answer

Page displaying an error How to make the HTML table inside another table occupy the entire screen?

score 2 · Accepted Answer

The problem, in my view, is that you are putting preventDefault() inside if . When your code enters else preventDefault() is not triggered, changing the current state and not showing div with success message. Actually the div is shown, but so fast that it is not seen because soon after the event changes the current state.

If you do this within click , it will work normally, as before:

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);
            }
        });

    }