Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как сделать чтобы при переходе по ссылке лента исчезала? (https://javascript.ru/forum/misc/86089-kak-sdelat-chtoby-pri-perekhode-po-ssylke-lenta-ischezala.html)

Katy93 13.09.2024 11:59

Как сделать чтобы при переходе по ссылке лента исчезала?
 
Здравствуйте, у меня лента подгружается когда я нажимаю кнопку “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>&nbsp;</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. На последнем кадре гифки в строке браузера показана ссылка на которую происходит переход. Эта страница пользователя где должны быть только информация без ленты.


Часовой пояс GMT +3, время: 17:26.