Как изменить скрипт для перезагрузки DIV внутри страницы?

Question

[maratmd]

Привет, сразу скажу что новичок, поэтому и прошу помощи.

Нужно определенный блок DIV перезагружать по нажатию на кнопку, без перезагрузки всей страницы.

Нашел следующий скрипт

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {

            setInterval( function() {
                $("#myDiv").load(location.href + " #myDiv");
             }, 5000 );

        });
    </script>

Он через заданный интервал времени обновляет содержимое, все работает. Но мне хотелось бы чтобы перезагрузка происходила не по таймеру, а по нажатию на кнопку которую я вставлю на страницу.

Прошу помочь кому не сложно, и не посылать в гугл, я там был, и что-то ничего не смог найти, в чем я смог бы разобраться.

Answer 1

[Procrastinationator]

Вот пример, в вашем случае, для jQuery:

$(".buttonClass").on("click", function() {
    $("#myDiv").load(location.href + " #myDiv");
})

Больше информации можно найти в документации

Comments

[maratmd]

Отлично, спасибо работает. Прошу прощения за наглость, еще вопрос. Я создал кнопку, дал ей класс buttonClass, но при наведении мышки на кнопку остается курсор (не видно эффекта, что это кликабельная кнопка), если вставляю #, то отлично. Есть вариант как то сделать ссылку, которая активирует кнопку. Надеюсь понятно объяснил.

[Procrastinationator]

Просто добавь в стили кнопки cursor: pointer;

.buttonClass {
    cursor: pointer;
}

htmlbook.ru/css/cursor

[maratmd]

Procrastinationator, Большое спасибо, за помощь. Помог очень.

[maratmd]

Procrastinationator, привет, в прошлый раз ты мне очень помог, и твой скрипт успешно работает. Прошу прощения за наглость, у меня есть еще один вопрос.

Твой скрипт я пытаюсь поставить на div в котором находиться листинг заказов (ссылку на сайт к сожалению не могу предоставить). Этот листинг выглядит в виде блоков с названием и деталями заказов, и кнопками быстрого просмотра и редактирования во всплывающем окне.

При работе скрипта листинг обновляется, и данные тоже, но вот кнопки после обновления div становятся неактивными. Посмотрев консоль в хроме, вроде как понял что за эти кнопки отвечает скрипт https://sait.ru/wp-content/plugins/jet-popup/inclu...

Есть вариант что-то сделать, чтобы кнопки после перезагрузки тоже работали? Надеюсь понятно объяснил

[Procrastinationator]

maratmd, Я не очень понял, но предполагаю, что после обновления листинга JS просто теряет связь с этими элементами. Как вариант - с каждым обновлением листинга повторно искать эти кнопки на странице.

[maratmd]

Procrastinationator, А как это реализовать? Я мало что в этом понимаю

[Procrastinationator]

maratmd, Можно использовать делегирование событий и повесить обработчик на родителя.

$('.orders').on('click', '.item__edit-button' function() { ... })

[Procrastinationator]

maratmd,
Вот пример демонстрации твоей проблемы. Я там оставил правильный и неправильный вариант.
https://codepen.io/Octoober/pen/XWxZqLm?editors=0010

По-хорошему стоит подучить JS и понять его принципы работы.

[maratmd]

Procrastinationator, Спасибо, буду учить