Ajaxを使用してDivをリフレッシュしようとしません

Question

私はAjax経由でフォームを送信するときにデータベースのエントリを更新しようとしています。エントリはdivにあります。

これは、そのdivのみをリフレッシュしようとしたコードです。しかし、それは動作しません。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
    $(document).ready(function(){ 
     $(function() { 

      $('form').on('submit', function (e) { 

       e.preventDefault(); 
       $.ajax({ 
        type: 'post', 
        url: '<?php if(isset($id)){echo "update.php";} else {echo "create.php";}?>', 
        data: $('form').serialize(), 
        success: function() { 
         $(entries).fadeOut(800, function(){ 
          entries.html(msg).fadeIn().delay(2000); 

         }); 
        } 
       }); 

      }); 

     }); 
    }); 
</script> 

、これは私がリロードしたいdiv要素である：誰かがこれで私を助けることができる

<div class="container" id="entries"> 
<div class="row"> 
    <div class="col pb-3"> 
     <h2>Einträge</h2> 
    </div> 
</div> 
<?php 
require_once('./read.php'); 

if ($result->num_rows > 0) { 
    // output data of each row 
    while($row = $result->fetch_assoc()) { ?> 
     <div class="row mb-3"> 
      <div class="col"> 
       <form> 
        <div class="form-row"> 
         <div class="col"> 
          <input type="text" class="form-control" name="name" placeholder="Name" value="<?php echo $row["name"] ?>" disabled> 
         </div> 
         <div class="col-1"> 
          <a href="recipe.php?ID=<?php echo $row["ID"] ?>" class="btn btn-warning">Ansehen</a> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    <?php } 
} else { ?> 
    <div class="row"> 
     <div class="col"> 
      <p>Keine Einträge in der Datenbank!</p> 
     </div> 
    </div> 
<?php } 
?> 

？

Answer 1

entriesは、このように、あなたはID entriesでのdivを選択したい場合は、あなたが"#entries"セレクターを使用する必要があります...定義されていません。

$('#entries').fadeOut(800, function(){ 
    $('#entries').html(msg).fadeIn(); 
}); 

delay()それは...ないの後、fadeIn()前にする必要があります2000年前に待機することを意味します。fadeIn() ...

$('#entries').fadeOut(800, function(){ 
    $('#entries').html(msg).delay(2000).fadeIn(); 
}); 

PS1。私の意見では、それを全く遅らせる必要はありません。

PS2。私は代わりにfadeTo()不透明度を使用します。したがって、ビューポートから要素を削除しません。

Answer 2

あなたはそのフォームでは何もありません「#entries」

success: function (msg) { 
    $('#entries').fadeOut(800, function(){     
     $('#entries').html(msg).fadeIn().delay(2000); 
    }); 
}