I've been grappling with this issue for hours. I am attempting to make a <div id=""data_friends> and a hidden input field update dynamically using AJAX. Here is the structure of the div tag:
<div class="friends-tab-list" id="data_friends">
<?php
//Default query limits results to 8
$sql = ("SELECT * FROM users WHERE FIND_IN_SET(?, friend_array) > 0 LIMIT 0,8");
$query = mysqli_prepare($con, $sql);
$query->bind_param('s', $username);
$query->execute();
$result = $query->get_result();
$num_rows = $result->num_rows;
while ($row = $result->fetch_assoc()) {
$row['profile_pic'];
$row['username'];
echo "<a class='profile-img-item' href='" . $row['username'] . "'>
<img src='" . $row['profile_pic'] . "' title='" . $row['username'] . "'>
</a>";
}
$query->close();
?>
</div>
The hidden input field looks like this:
<input id='max' type='hidden' value='<?php echo $num_rows; ?>'>Upon clicking the View More Friends button, data is sent to
includes/handlers/ajax_load_profile_friends.php$.ajax({
url:'includes/handlers/ajax_load_profile_friends.php',
type:'POST',
dataType: 'json',
data:{'username':username, 'num_friends':num_friends, 'counter':counter},
success: function(data) {
$('#data_friends').html(data.html);
$('#max').val(data.num_rows);
}
});
The output from ajax_load_profile_friends.php appears as follows:
$query = mysqli_prepare($con,"SELECT * FROM users WHERE FIND_IN_SET(?, friend_array) LIMIT $counter");
$query->bind_param('s', $username);
$query->execute();
$result = $query->get_result();
$num_rows = $result->num_rows;
}
while ($row = $result->fetch_assoc()) {
$row['profile_pic'];
$row['username'];
$html = "<a class='profile-img-item' href='" . $row['username'] . "'>
<img src='" . $row['profile_pic'] . "' title='" . $row['username'] . "'>
</a>";
}
echo json_encode(array('num_rows' => $num_rows, 'html' => $html));
After execution, only one result displays instead of the expected 16 records per click. I assume that updating the hidden input field's value should occur using $('#max').val(data.num_rows);
The content within the hidden input field
<input id='max' type='hidden' value='<?php echo $num_rows; ?>'>$('#max').val(data.num_rows);
It seems there might be an oversight in ajax_load_profile_friends.php causing these anomalies. When excluding json_encode() and utilizing the success function as such
$('#data_friends').html(data.html);dataType: 'json', from AJAX, functionality resumes but without ability to update the hidden input value. The goal is correcting this method due to most examples favoring json_encode().