Загрузка страницы через AJAX

Рейтинг: 1Ответов: 1Опубликовано: 19.07.2023

Доброго времени суток.

У меня имеется почти рабочая система, как она работает:

  1. Есть JS код который реагирует на нажатия ссылок и анализирует их, имеется ли у них атрибут "sc-hapi" или нет, если есть, то выполнять ajax запрос, если нет, то переходить по ссылке как обычно. script.js 

    <script>
    $("[sc-hapi]").click(function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        ContentLoad(href, true);
    });

    function ContentLoad(url) {
        $.ajax({
            url: 'index.php?mode=ajax&do=load_page&page=' + url,
            method: 'post',
            dataType: 'json',
            data: {},
            success: function(data) {
                NProgress.start();
                console.log(data)
                history.pushState(null, null, url);
                NProgress.done();
                $("#content").html(data._page);
            }
        });
    }
</script>

  2. Если имеется атрибут, то выполняем запрос AJAX где получаем предполагаемую ссылку и передаем ее обратно в виде json, после чего, дальнейший код JS из первого пункта загружает нужную нам страницу. load_page.php 

    <?php
if (!defined("SC")) {
    exit("Попытка взлома!");
}

class submodule
{
    private $core;
    public function __construct($core)
    {
        $this->core        = $core;
    }


    public function content()
    {
        $page = ((isset($_GET['page'])) ? $_GET['page'] : "test");
        switch ($page) {
            case '/login':
                $content = "/login/index";
                break;
            case '/rules':
                $content = "/rules";
                break;
            case '/register':
                $content = "/register/index";
                break;
            default:
                $content = "/general";
                break;
        }
        return $this->core->LoadPageJs($this->core->LoadPage("modules" . $content));
    }
}
?>

Function LoadPage

public function LoadPage($path, $data = array())
    {
        ob_start();
        include(Root . '/theme/' . $path . '.phtml');
        return ob_get_clean();
    }

Function LoadPageJs

public function LoadPageJs($page)
    {
        $data = array(
            "_page" => $page
        );
        echo json_encode($data);
        exit;
    }

Данный код работает отлично, с одним исключением, если элемент не обновляется (в моем случае navbar где есть ссылки с атрибутом sc-hapi), он будет отлично загружать страницы, но если загрузить страницу с такими же атрибутами, то JS не будет их замечать и будет переходить по ссылке как обычно.

Возможно ли как то JS заставить их видеть, например обновить этот самый JS, что бы он начал видеть новые атрибуты?

Буду очень благодарен за помощь в решении данной проблемы.

P.s. Я знаю что есть более легкие способы загрузок страниц, но мне бы хотелось использовать мой код как основу, спасибо за понимание.

javascript php ajax
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

У вас просто обработчики не вешаются на новые ссылки. Вы их повесили один раз на существующие ссылки, а когда с загрузкой страницы появились новые ссылки ( и удалились старые ), повесить обработчики на них уже забыли.

Повесьте их сразу после загрузки страницы:

function addListeners(selector = "[sc-hapi]") {
    $(selector).click(function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        ContentLoad(href, true);
    });
}

function ContentLoad(url) {
    $.ajax({
        url: 'index.php?mode=ajax&do=load_page&page=' + url,
        method: 'post',
        dataType: 'json',
        data: {},
        success: function(data) {
            NProgress.start();
            console.log(data)
            history.pushState(null, null, url);
            NProgress.done();
            $("#content").html(data._page);
            // Подписываемся только на ссылки внутри "#content"
            addListeners("#content [sc-hapi]");
        }
    });
}

addListeners();