Обновление содержимого div по кнопке без перезагрузки страницы?

Question

[Юля Ивановна]

Здравствуйте, как сделать обновление содержимого div по кнопке без перезагрузки страницы(просто обновить)? я новичок, в интернете много разных решений, но и много в этих решениях воды. подскажите пожалуйста

<button class="test1" id="test" onclick="">Обновить</button>

<div class="soderzhimoye">
<?php the_title(); ?>
<?php the_content(); ?>
</div>

Answer 1

[Надим]

Пример функции для выборочного обновления контента:

async function elementUpdate(selector) {
	try {
		var html = await (await fetch(location.href)).text();
		var newdoc = new DOMParser().parseFromString(html, 'text/html');
		document.querySelector(selector).outerHTML = newdoc.querySelector(selector).outerHTML;
		console.log('Элемент '+selector+' был успешно обновлен');
		return true;
	} catch(err) {
		console.log('При обновлении элемента '+selector+' произошла ошибка:');
		console.error(err);
		return false;
	}
}

Вызывайте функцию elementUpdate() передав внутрь него CSS-селектор того элемента, который вы хотите обновить. Например, если хотите обновить блок который имеет класс soderzhimoye, то достаточно выполнить:
elementUpdate('.soderzhimoye');

Если хотите привязать это действие к кнопке, то можете сделать так:

<button onclick="elementUpdate('.soderzhimoye');">Нажми меня, чтобы обновить блок</button>

Comments

[Юля Ивановна]

Спасибо!

Answer 2

[Ne7Le4Der]

https://codesandbox.io/s/nameless-forest-cefirg

Comments

[Юля Ивановна]

просто обновить

[Ne7Le4Der]

Тогда не очень понял, что Вы имеете ввиду под "просто обновить"

[Юля Ивановна]

Ne7Le4Der, перезагрузить div, нужно чтобы при каждом нажатии, загружались новые записи

[Ne7Le4Der]

123421, Тогда вам нужно создать endpoint на сервере, который будет возвращать записи, сделать запрос на этот endpoint и вывести их. Пример отредактировал, вам нужно вместо URL вставить адрес вашего endpoint'а и вывести в формате, который вам нужен

[Юля Ивановна]

Ne7Le4Der, нужно чтобы просто каждый раз при нажатии обновлялся div, а записи будут рандомно в этом div меняться.?

<?php
                    $args = array(
                        'posts_per_page' => 1,
                        'orderby' => 'rand',
                    );
                    if ( have_posts() ) : query_posts($args);
                    while (have_posts()) : the_post();
                    ?>
                        <a href="<?php the_permalink(); ?>"/>
                       <?php endif; ?>
                    <?php
					endwhile; ?>
					<?php endif;
					wp_reset_query();
?>

[Антон Литвиненко]

123421, не используйте query_posts

[Юля Ивановна]

Антон Литвиненко, wp_reset_query() же есть

[Антон Литвиненко]

123421, как и wp_query для ваших целей, не надо лезть в глобальный запрос.
По вашему вопросу - вам надо разобраться с ajax в вордпрессе
Почитать:
https://wp-kama.ru/id_2018/ajax-v-wordpress.html
https://habr.com/ru/company/dataart/blog/271189/
popovses.net/wordpress-development/ajax-wordpress.html
https://only-to-top.ru/blog/programming/2019-09-14...

[Юля Ивановна]

Антон Литвиненко, хорошо, спасибо, но вопрос про обновление div без перезагрузки страницы.

[Антон Литвиненко]

123421, правильно.
вам нужно написать вывод простов по rand. и по клику на кнопку запускать ajax который будет каждый раз заменять содержимое дива на новое. это почти ничем не отличаестя на подгрузку постов по кнопке, только еще проще, не нужно учитывать количество, страницы итд