Мой Ajax-скрипт не скрывает Bootstrap Modal после отправки - PullRequest
Новая
       7

Мой Ajax-скрипт не скрывает Bootstrap Modal после отправки

0 голосов
/ 02 марта 2019

У меня есть страница, которая отображает 6 карт начальной загрузки в 3 столбцах.Каждая карта Bootstrap отображает изображение, имя, диск и кнопку нижнего колонтитулаКогда пользователь нажимает на кнопку «Нижний колонтитул Bootstrap Card», модальный Bootstrap, открытый с данными строки Sql по идентификатору и в этот модальный Bootstrap, имеет 2 входа и одну текстовую форму, как описано ниже: 

1. <input type="text" name="name" id="name" class="form-control" required />

2. <input type="email" name="email" id="email" class="form-control" required />

3. <textarea class="form-control" type="text" name="message" id="message" rows="3"  
required></textarea>

Чтобы открыть модальное окнос уважением ID, я вставил код PHP в код карты кнопки, как показано ниже: 

<button type="button"  class="btn btn-block btn-primary" data-toggle="modal" 
data-target="#dataModal<?php echo $record['ID']; ?>">View Details</button>

Где <?php echo $record['ID']; ?> относится к идентификатору строки SQL.

Когда пользователь заполняет форму и нажимает на модальныеКнопка отправки, все данные отправляются в базу данных, и это нормально, но Bootstrap Modal не скрывается после успеха Ajax.

Ajax-скрипт, который я использую для вставки данных через php-код (insert.php) в базу данных: 

<script type="text/javascript" language="javascript" >

$(document).on('submit', '#contactForm', function(event){
        event.preventDefault();
    $.ajax({
                url:"insert.php",
                method:'POST',
                data:new FormData(this),
                contentType:false,
                processData:false,
                success:function(data){
                    alert("Message sent!");                 
                    $("#contactForm")[0].reset();
                    $('#dataModal').hide();
                    $(".modal-backdrop").remove();

                }
});
});

</script>

Я думаю, что проблема связана с этой строкой успеха Ajax: $('#dataModal').hide(); потому что атрибут html id Bootstrap Modal равен "dataModal<?php echo $record['ID']; ?>", а не только dataModal.

В этом случае, если я поставлю вот так $('#dataModal<?php echo $record['ID']; ?>').hide();, ничего не произойдет.

Ниже приведен полный код: 


<div class="container">

<?php
include_once("includes/mysqli_connection.php");
$sql = "SELECT * FROM products ORDER BY RAND() LIMIT 6";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $record = mysqli_fetch_assoc($resultset) ) {
?>  

<div class="card-deck" style="width: 18rem; display:inline-block; margin:15px;">
  <div class="card">
  <?php echo '<img src="upload/'.$record["image"].'" class="img-thumbnail" width="286" height="180" />'; ?>
    <div class="card-body" align="center"><h5 class="card-title"><?php echo $record['ProductName']; ?></h5></div>
    <div class="card-footer">
      <button type="button"  class="btn btn-block btn-primary" data-toggle="modal" data-target="#dataModal<?php echo $record['ID']; ?>">View Details</button>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="dataModal<?php echo $record['ID']; ?>" 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" >Product: <?php echo $record['productName']; ?></h5> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">

<div class="lead">Ask us about this product</div>

<form id="contactForm" method="post">
<div class="form-row">
<div class="col-md-4 mb-3">
<label>Name</label>
     <input type="text" name="name" id="name" class="form-control" placeholder="Your name" required />
</div>
     <div class="col-md-5 mb-3">
     <label>E-mail</label>
       <input type="email" name="email" id="email" class="form-control" placeholder="Your e-mail" required />
</div>

</div>

<div class="form-row">
<div class="col-md-12 mb-3">
<label>Message</label>
<textarea class="form-control" type="text" name="message" id="message" rows="3"  placeholder="Your message" required></textarea>
</div>
</div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">CLOSE</button>

         <button type="submit" class="btn btn-success" id="submit" >SEND</button>
</form>
      </div>
    </div>
  </div>
</div>
<?php } ?>
</div>

<script type="text/javascript" language="javascript" >

$(document).on('submit', '#contactForm', function(event){
        event.preventDefault();
    $.ajax({
                url:"insert.php",
                method:'POST',
                data:new FormData(this),
                contentType:false,
                processData:false,
                success:function(data){
                    alert("Message sent!");                 
                    $("#contactForm")[0].reset();
                    $('#dataModal').hide();
                    $(".modal-backdrop").remove();

                }
});
});

</script>

В этом случае, что это может быть и чтоя должен сделать?Спасибо всем.

1 Ответ

0 голосов
/ 02 марта 2019

Редактировать : Вы можете просто использовать $('.modal').hide(), если хотите скрыть только модальное.

Вам необходимо установить значение идентификатора модального объекта внутри скрипта, например: 

<script type="text/javascript">
    var id = '#dataModal<?php echo $record['ID']; ?>';
</script>

Тогда вы можете использовать: 

$(id).hide();
...