Problems with auto loading chat system using PHP, jQuery and Ajax

I’m creating a WhatsApp system using PHP, jQuery and Ajax. When a user clicks in the list he goes to the chat. All the messages are loading in, except the messages from today.

Every second I request all the today’s messages using Ajax and PHP. I’ve created a sytem to answer on messages, using the Bootstrap 4 dropdown. But by today’s messages this doesn’t work because it refreshes every time.

I hope I’ve explained this good enough. Does anyone knows a solution for this problem?

Thank you!

[My chat interface][1]

[1]: https://i.stack.imgur.com/h8Kmw.png

Here’s some code
—

The function I’m running every second to get today’s posts.

“`
function chatbericht($id) {
global $MySQL;
$post = mysqli_query($MySQL, “SELECT * FROM berichten WHERE id = “.$id);

if(mysqli_num_rows($post) == 1) {
$post = mysqli_fetch_assoc($post);
$gebruiker = mysqli_fetch_assoc(mysqli_query($MySQL, “SELECT * FROM gebruikers WHERE id = “.$post[‘zender_id’]));
$time = strtotime($post[‘datum’]);
$datum = date(“Y”,$time).’-‘.date(“m”,$time).’-‘.date(“d”,$time);
if($datum != date(‘Y-m-d’)) {
if($post[‘zender_id’] == $_SESSION[‘socsoc_login’]) {
echo ‘<div class=”post me” id=”p’.$post[‘id’].'” data-username=”‘.$gebruiker[‘gebruikersnaam’].'”>’;
} else {
echo ‘<div class=”post” id=”p’.$post[‘id’].'” data-username=”‘.$gebruiker[‘gebruikersnaam’].'”>’;
}
echo ‘<div class=”balloon”>’;
echo ‘<div class=”dropdown”>
<button type=”button” class=”btn-dropdown” data-toggle=”dropdown”><i class=”fas fa-angle-down”></i></button>
<div class=”dropdown-menu”>
<a class=”dropdown-item reactbtn” href=”#”>Beantwoorden</a>
</div>
</div>’;
if($post[‘antwoord_op’] != 0) {
$answer = mysqli_query($MySQL, “SELECT * FROM berichten WHERE id = “.$post[‘antwoord_op’]);
if(mysqli_num_rows($answer) == 1) {
$answer = mysqli_fetch_assoc($answer);
echo ‘<a href=”#p’.$answer[‘id’].'” class=”answer”>’;
$gebruiker = mysqli_fetch_assoc(mysqli_query($MySQL, “SELECT * FROM gebruikers WHERE id = “.$answer[‘zender_id’]));
echo ‘<h6>’.$gebruiker[‘gebruikersnaam’].'</h6>’;
echo ‘<span>’.$answer[‘body’].'</span>’;
echo ‘</a>’;
}
}
if($post[‘afbeelding_id’] != 0) {
$afbeelding = mysqli_query($MySQL, “SELECT * FROM afbeeldingen WHERE id = “.$post[‘afbeelding_id’]);
if(mysqli_num_rows($afbeelding) == 1) {
$afbeelding = mysqli_fetch_assoc($afbeelding);
echo ‘<div class=”img”>
<img src=”‘.$afbeelding[‘map’].$afbeelding[‘naam’].'” />
<div class=”overlay”></div>
</div>’;
}
}
echo ‘<div class=”content”>’.$post[‘body’].'</div>’;
echo ‘<div class=”date”>’.date(“H”,$time).’:’.date(“i”,$time).’, ‘.get_date($datum).'</div>’;
echo ‘</div>’;
echo ‘</div>’;
}
}
}
“`

The JS-function by with I refresh the chat interface.

“`
refresh();
setInterval(refresh, 1000);
function refresh() {
var datachat = $(“body”).attr(“data-chat”);
$(“#chatlist”).load(“ajax/ajax_chat.php?section=chatlist&chat=”+datachat);
$(“#today”).load(“ajax/ajax_chat.php?section=chat&chat=”+datachat);
}
“`

Here’s the output of a chat post in HTML

“`
<div class=”post me”>
<div class=”balloon”>
<div class=”dropdown”>
<button type=”button” class=”btn-dropdown” data-toggle=”dropdown”><i class=”fas fa-angle-down”></i></button>
<div class=”dropdown-menu”>
<a class=”dropdown-item reactbtn” href=”#”>Comment</a>
</div>
</div>
<div class=”content”>Message Body!</div>
<div class=”date”>23:45, march 5th 2020</div>
</div>
</div>
“`

So again, my problem is the dropdown that refreshes every time. So it’s impossible to click that.

Also in #JavaScript _↴