1

Tenho um formulário que esta inserido em um código Bootstrap Modal. Quando os valores são inseridos nos campos input, o Ajax script passa esses valores para um arquivo php e retorna com um alert de sucesso. O que ocorre é que somente o alert aparece, porém quando clica no botão OK deste alerta o Modal não fecha. Abaixo segue o código do popup Modal e o script Ajax:

<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#dataModal"></button>

<!-- Modal -->
<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">      
        <h5 class="modal-title" >Adicionar dados</h5> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>

      <div class="modal-body">

<form id="usersform" method="post">
     <input type="text" name="nome" id="nome"/>
       <input type="email" name="email" id="email"/>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCELAR</button>      
        <button type="submit" class="btn btn-success" id="submit" >ADD USER</button>
</form>
      </div>      
    </div>
  </div>
</div>

Abaixo segue o Ajax script ao qual faz a passagem dos valores input para o arquivo insert.php que no caso funciona corretamente inserindo os dados no banco de dados:

<script>

$(document).on('submit', '#usersform', function(event){
        event.preventDefault();
    $.ajax({
                url:"insert.php",
                method:'POST',
                data:new FormData(this),
                contentType:false,
                processData:false,
                success:function(data){
                    alert("Cadastro realizado com sucesso!");                   
                    $("#usersform")[0].reset();
                    $("#dataModal").modal('hide');

                }
});
});

</script>

E por fim, o código do arquivo insert.php:

<?php   
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "system";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
$nome = $_POST['nome'];
$email = $_POST['email'];
$sql = "INSERT INTO users (nome,email)
VALUES ('$nome', '$email')";

if (mysqli_query($conn, $sql)) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}

mysqli_close($conn);

?>

O que ocorre é que o popup Modal não fecha apesar do código $("#dataModal").modal('hide'); estar após o alert e nem "zera" os campos input $("#usersform")[0].reset(); após o resultado de sucesso. Os dados são inseridos normalmente após clicar no "ok" da tela de mensagem do alert. O que pode ser? Obrigado.

6
  • ta usando bootstrap? se sim, informa isso na pergunta. Tem certeza que a resposta esta vindo OK? Tipo se der algum erro no php nunca vai cair no seu success e por consequencia nao esconder a modal. 25/02/2019 às 17:58
  • @GabriellaSelbach ja tem esse alert, primeria linha do success alert("Cadastro realizado com sucesso!"); 25/02/2019 às 18:05
  • Você importou o javascript do jQuery e do bootstrap? Nessa sequência? Porque eu baixei seu código e funcionou aqui. Usando bootstrap 4 25/02/2019 às 18:16
  • Possível duplicata de Como esconder o modal do bootstrap via typescript 25/02/2019 às 18:18
  • Se a modal abre, o Ajax funciona (vc diz que está enviando os dados para o banco) e o alert aparece, então não há nenhum problema de Boostrap ou jQuery. Se as linhas abaixo do alert não estão funcionando, realmente é um mistério, pois deveriam funcionar. O que pode estar havendo é algum tipo de conflito com outro código. Tente removendo a linha $("#usersform")[0].reset(); para ver se a modal é fechada.
    – Meu ovo
    25/02/2019 às 19:42

1 Resposta 1

0

Boa tarde amigo.

Melhor seria você verificar se tem algum erro de script na página, utilize a ferramenta de desenvolvedor do navegador para descobrir isso (F12). Visualmente olhando seu código não tem nada de errado, possível que o retorno do insert não deve estar vindo (success) com isso o seu form nunca será zerado e nem o modal será fechado pois ele não entra nessa condição. Verifique se o seu jQuery também aceita apenas a chamada do cifrão ($) ou se tem que ser o escrito mesmo jQuery(). Acredito que seja algo bem simples que está passando despercebido por você.

Espero ter contribuído com algo, qualquer coisa deixa sua resposta aqui se conseguiu e como fez para solucionar.

Abraços!

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .