Ajax script is not hiding modal popup - $("#dataModal"). modal('Hide');

Asked

Viewed 78 times

1

I have a form that is inserted in a Modal Bootstrap code. When the values are entered in the input fields, the Ajax script passes these values to a php file and returns with a successful Alert. What happens is that only Alert appears, but when you click the OK button of this alert Modal does not close. Below follows the Modal popup code and the Ajax script:

<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>

Below follows the Ajax script to which passes the values s input to the file Insert.php which in case works correctly inserting the data into the database:

<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>

And finally, the code of the file 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);

?>

What happens is that the Modal popup does not close despite the code $("#dataModal"). modal('Hide'); be after Alert and not even "Zera" input fields $("#usersform")[0]. reset(); after the successful result. Data is normally entered after clicking on the "ok" of the Alert message screen. What can it be? Thank you.

php ajax modal

  • ta using bootstrap? if yes, inform this in the question. Are you sure the answer is coming OK? Like if there is an error in php will never fall into your success Therefore do not hide the modal.

  • @Gabriellaselbach already has this Alert, first line of the success alert("Cadastro realizado com sucesso!");

  • Did you import javascript from jQuery and bootstrap? In this sequence? Because I downloaded your code and it worked here. Using bootstrap 4

  • Possible duplicate of How to hide the bootstrap modal via typescript

  • If the modal opens, Ajax works (you say you are sending the data to the bank) and the alert appears, then there is no problem of Boostrap or jQuery. If the lines below the alert They’re not working, it’s really a mystery, because they should work. What might be going on is some kind of conflict with another code. Try removing the line $("#usersform")[0].reset(); to see if the modal is closed.

  • Thank you for the feedback. Actually some conflict should be caused by some part of the code you passed unnoticed by me. I created a php file to remake the code according to your orientation and it worked.

Show 1 more comment

1 answer

0


Good afternoon friend.

You’d better check if you have any script error on the page, use the browser developer tool to figure it out (F12). Visually looking at your code there is nothing wrong, possible that the return of the Insert should not be coming (Success) with this your form will never be reset and nor will the modal be closed because it does not enter this condition. Check if your jQuery also accepts only the dollar call ($) or if it has to be written the same jQuery(). I believe it’s something very simple that’s going unnoticed by you.

I hope to have contributed something, anything leaves your answer here if achieved and how did to solve.

Hugs!

Browser other questions tagged php ajax modal

You are not signed in. Login or sign up in order to post.