Здравствуйте, у меня лента подгружается когда я нажимаю кнопку “Load More”. На каждой аватарке есть ссылка. При нажатии на аватарку происходи переход по id, лента обновляется и снова появляется. Мне нужно сделать чтобы при переходе ленты не было и Load More тоже, а появлялась информация о пользователе. Пыталась сделать в условии сравнение empty($_GET[“id”]), не получилось. Вот пример как сейчас работает.
Вот исходный код AJAX загрузки ленты:
<?php
include "db.php";
function get_start($page, $per_page)
{
return ($page - 1) * $per_page;
}
function get_cities($start, $per_page)
{
global $db;
$stmt = $db->prepare("SELECT * FROM city LIMIT $start, $per_page");
$stmt->execute();
return $stmt->fetchAll();
}
if (isset($_GET['page'])) {
$page = (int)$_GET['page'];
$per_page = 200;
$numphoto = 4;
$start = get_start($page, $per_page);
$cities = get_cities($start, $per_page);
$html = '';
if ($cities) {
$tr == 0;
$html .= "<div class=\"main_txt\">";
$html .= "<table width=100% border=0>";
foreach ($cities as $city) {
if ($tr == 0) $html .= "<tr class=\"main_txt\">";
$html .= "<td class='gallery_txt' align='center'><div style='padding-top:10px;'
><a href='/part2/?id=1'><img src='avatar.gif'
width='100px'
height='100px'
alt='{$city[name]}'
style=\"border: 1px solid black\"
vspace=3></a></div>";
$html .= "<br><br>";
$html .= "</td>";
if (++$tr == $numphoto)
{
$html .= "</tr>";
$tr = 0;
}
}
if($tr != 0)
{
for($i = $tr; $i < $numphoto; $i++)
{
$html .= "<td align=center> </td>";
}
$html .= "</tr>";
}
$html .= "</table>";
$html .= "</div>";
}
echo $html;
die;
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AJAX Load</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
.loader {
display: none;
}
.loader img {
width: 100px;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="container-fluid mb-3">
<ul id="cities"></ul>
<div class="loader">
<img src="ripple.svg" alt="">
</div>
<button class="btn btn-primary" id="load">Load more</button>
</div>
<footer style="background-color: #000; height: 200px; padding: 0;"></footer>
<script>
const citiesContainer = document.getElementById('cities');
const btnLoad = document.getElementById('load');
const loader = document.querySelector('.loader');
let page = 1;
let lock = false;
async function getCities() {
const res = await fetch(`index.php?page=${page}`);
return res.text();
}
// getCities();
async function showCities() {
const cities = await getCities();
if (cities) {
citiesContainer.insertAdjacentHTML('beforeend', cities);
lock = false;
} else {
btnLoad.classList.add('d-none');
lock = true;
}
}
loader.classList.add('show');
setTimeout(() => {
showCities();
loader.classList.remove('show');
}, 1000);
btnLoad.addEventListener('click', () => {
loader.classList.add('show');
setTimeout(() => {
page++;
showCities();
loader.classList.remove('show');
}, 1000);
});
window.addEventListener('scroll2', () => {
const {scrollTop, scrollHeight, clientHeight} = document.documentElement;
if (scrollTop + clientHeight >= scrollHeight) {
if (false === lock) {
lock = true;
loader.classList.add('show');
setTimeout(() => {
page++;
showCities();
loader.classList.remove('show');
}, 1000);
}
}
});
</script>
</body>
</html>
P.S. На последнем кадре гифки в строке браузера показана ссылка на которую происходит переход. Эта страница пользователя где должны быть только информация без ленты.
