Can I automatically run an AJAX function when another AJAX function succeeds? - php

Question

I am about to make a note system in procedural PHP and AJAX, which should allow me to both display new notes without refreshing and to load more notes without refreshing.
In my current case both works, but not together. If no notes to show from the database, then my site will display a text saying "There is no notes to display". If I then make a note, it still won't display the note, until I load it in via a click on the loading notes button.
I've tried to add in following to my success function:
if(res.indexOf("success")!=-1) {
location.reload(true);
}
Without any luck, even I could read on the internet, that it somehow worked out for other people.
Here is my ajax functions:
$(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);
}
}
});
});
});
My 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...";
}
The note div where my notes are displayed and the form where they are created:
<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>
So to sum up, I am looking for a way to display a new note made, without having to load it in via my load button. What can I do?

Answer 1

Instead of location.reload, you can just replace the HTML in #notes. Also, in add-notes.php you are echoing HTML but in your ajax, you are expecting dataType: json. Also, not sure what is noteNewCount being passed to AJAX.
$.ajax({
url: "add-notes.php",
method: "POST",
data: form_data,
success: function(data) {
$("#notes").html(data);
}
});