Ajax обновление текстовой области без кнопки или обновления страницы

Question

Я пытаюсь создать текстовую область, которая автоматически обновляет базу данных без необходимости нажимать кнопку или обновлять страницу. После того, как произойдет «keyup», появится таймер обратного отсчета в течение 2 секунд. Если в течение этих 2 секунд не будет введено никаких других данных, данные должны быть обновлены в базе данных. Если ввод сделан, таймер перезапустится.

Я написал код ajax ниже, он не работает.

$(document).ready(function() {
  var timer;
  $('#about').on('keyup', function() {
    var value = this.value;
    clearTimeout(timer);
    timer = setTimeout(function() {
      //do your submit here
      $("#about").submit()
      alert(value);
    }, 2000);
  });
  var about = $('#about').val().trim();
  $.ajax({
    url: "comment.php?customer_id=" + "<?php echo $customer_id; ?>",
    type: 'post',
    data: {
      about: about
    },
    success: function(response) {
      $('#cid').val(response);
    }
  });
});

/* This is comment.php */

<?php
session_start();
require_once 'config/config.php';
require_once 'includes/auth_validate.php';

$cid = $_GET['customer_id'];
$about = $_POST['about'];

$sql = ("UPDATE patient_id SET about = ? WHERE id = ?;");

$stmt = mysqli_stmt_init($conn);
mysqli_stmt_prepare($stmt, $sql);
mysqli_stmt_bind_param($stmt, "si", $about, $cid);
mysqli_stmt_execute($stmt);
?>

Answer 1

Переместите ajax в тайм-аут вместо выполнения отправки, поскольку вы хотите обновить с помощью ajax.

$(document).ready(function() {
  var timer;
  $('#about').on('input', function() {
    var value = this.value;
    clearTimeout(timer);
    timer = setTimeout(function() {
      alert(value);
      $.ajax({
        url: "comment.php?customer_id=" + "<?php echo $customer_id; ?>",
        type: 'post',
        data: {
          about: value
        },
        success: function(response) {
          $('#cid').val(response);
        }
      });
    }, 2000);
  });
});