Могу ли я автоматически запускать функцию AJAX при успешном выполнении другой функции AJAX?

Question

Я собираюсь создать систему заметок в процедурном PHP и AJAX, которая должна позволить мне отображать новые заметки без обновления и загружать больше заметок без обновления.

В моем текущем случае оба работают, но не вместе. Если в базе данных нет заметок, то на моем сайте будет отображаться текст «Нет заметок для отображения». Если я сделаю заметку, она все равно не будет отображаться, пока я не загрузлю ее, нажав кнопку загрузки заметок.

Я попытался добавить в свою функцию успеха следующее:

if(res.indexOf("success")!=-1) {
    location.reload(true);
}

Без всякой удачи, даже я мог читать в Интернете, что это как-то сработало для других людей.

Вот мои функции ajax:

$(document).ready(function() {
            var noteCount = 2;
            $("#loadMore").click(function() {
                noteCount = noteCount + 2;
                $("#notes").load("load-notes.php", {
                    noteNewCount: noteCount
                });
            });

            $("#noteform").on("submit", function(event) {
                event.preventDefault();
                noteCount = noteCount + 1;
                var form_data = $(this).serialize();
                $.ajax({
                    url: "add-notes.php",
                    method: "POST",
                    noteNewCount: noteCount,
                    data: form_data,
                    dataType: "JSON",
                    success: function(data) {
                        if(res.indexOf("success")!=-1) {
                            location.reload(true);
                        }
                    }
                });
            });
        });

Мой add-notes.php

<?php
session_start();
require_once "../inc/core/config.php";

if ($_SERVER['REQUEST_METHOD'] != 'POST') exit;

$subject = mysqli_real_escape_string($dbconn, $_POST['subject']);
$note    = mysqli_real_escape_string($dbconn, $_POST['note']);
$my_date = date("Y-m-d H:i:s");
$author  = $_SESSION['u_firstname'];
$noteNewCount = $_POST['noteNewCount'];

$sql = "INSERT INTO notes(author, subject, note, created_at) VALUES ('$author', '$subject', '$note', '$my_date')";
mysqli_query($dbconn, $sql);

$sql = "SELECT * FROM notes LIMIT $noteNewCount";
$result = mysqli_query($dbconn, $sql);
if (mysqli_num_rows($result) > 0) {

    while ($row = mysqli_fetch_assoc($result)) {
        echo '<div class="note">
            <div class="noteHead">
                <div class="row">
                    <div class="col-md-8">
                        <h3>' . $row["subject"] . '</h3>
                    </div>
                    <div class="col-md-4">
                        <p class="text-muted">Note created by ' . $row["author"] . '</p>
                    </div>
                </div>
            </div>
            <div class="noteContent">
                <div class="row">
                    <div class="col-12">
                        <p>' . $row["note"] . '</p>
                    </div>
                </div>
            </div>
            <div class="noteFooter">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted">Created ' . $row["created_at"] . '</p>
                    </div>
                </div>
            </div>
        </div>';
    }
} else {
    echo "No comments yet...";
}

Блок заметок, в котором отображаются мои заметки, и форма их создания:

<form id="noteform" action="add-notes.php" method="POST" >
            <div class="form-group">
                <label for="usr">Titel:</label>
                <input type="text" class="form-control" name="subject">
            </div>
            <div class="form-group">
                <label for="pwd">Note:</label>
                <textarea class="form-control" rows="5" name="note"></textarea>
            </div>
            <button class="btn btn-outline-success my-2 my-sm-0" name="submit" type="submit">Opret note</button>
        </form>


<div id="notes">
  <?php
  $sql = "SELECT * FROM notes LIMIT 2";
  $result = mysqli_query($dbconn, $sql);
  if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {

      echo '<div class="note">
      <div class="noteHead">
        <div class="row">
          <div class="col-md-8">
            <h3>' . $row["subject"] . '</h3>
          </div>
          <div class="col-md-4">
            <p class="text-muted">Note created by ' . $row["author"] . '</p>
          </div>
        </div>
      </div>
      <div class="noteContent">
        <div class="row">
          <div class="col-12">
            <p>' . $row["note"] . '</p>
          </div>
        </div>
      </div>
      <div class="noteFooter">
        <div class="row">
          <div class="col-12">
            <p class="text-muted">Created ' . $row["created_at"] . '</p>
          </div>
        </div>
      </div>
    </div>';
    }
  } else {
    echo "No comments yet...";
  }
  ?>
</div>

Итак, чтобы подвести итог, я ищу способ отобразить новую сделанную заметку, не загружая ее с помощью кнопки загрузки. Что я могу сделать?

Answer 1

Вместо location.reload вы можете просто заменить HTML в #notes.Кроме того, в add-notes.php вы повторяете HTML, но в вашем ajax вы ожидаете dataType: json.Кроме того, не уверен, что noteNewCount передается в AJAX.

                $.ajax({
                    url: "add-notes.php",
                    method: "POST",
                    data: form_data,
                    success: function(data) {
                          $("#notes").html(data);
                    }
                });