I've been dealing with a php file called users. Initially, everything was going smoothly as I wrote some JavaScript code for it. However, after making updates to the JavaScript code, it seems to have stopped functioning.
Below is the content of the php file (users.php):
<div class="wrapper">
<section class="users">
<header>
<?php
include_once("php/config.php");
$sql = mysqli_query($conn,"SELECT * FROM users WHERE unique_id={$_SESSION['unique_id']}");
if( mysqli_num_rows($sql) > 0 ){
$row = mysqli_fetch_assoc($sql);
}
?>
<div class="content">
<img src="php/images/<?php echo $row['img'] ?>" alt="" />
<div class="details">
<span><?php echo $row['fname']." ".$row['lname'] ?></span>
<p><?php echo $row['status'] ?></p>
</div>
</div>
<a href="#" class="logout">Logout</a>
</header>
<div class="search">
<span class="text">Select an user to start chat</span>
<input type="text" placeholder="Enter name to search..." />
<button><i class="fas fa-search"></i></button>
</div>
<div class="users-list">
</div>
</section>
</div>
<script src="javascript/users.js"></script>
Here is the JavaScript file content (users.js):
//1st part
const searchBar = document.querySelector(".users .search input"),
searchBtn = document.querySelector(".users .search button");
searchBtn.onclick = () => {
searchBar.classList.toggle("active");
searchBar.focus();
searchBtn.classList.toggle("active");
};
//2nd part
setInterval(() => {
console.log("habib");
let xhr = new XMLHttpRequest();
xhr.open("GET", "php/users.php", true);
xhr.onload = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
let data = xhr.response;
console.log(data);
}
}
};
xhr.send();
}, 500);
Initially, the first part of the JavaScript program worked without any issues. However, after adding the second part, things broke down. Strangely, restarting my PC resolved the problem. But I'm curious to understand why this occurs?
The console displays the following error message.. https://i.stack.imgur.com/fjwl7.png