Доброго времени суток. На этот раз еще немножечко про JavaScript. Появилась необходимость обновлять содержимое блока <div> по нажатию на кнопку, без перезагрузки страницы, чтобы не свести пользователя с ума. Благодаря этой небольшой заметке можно раз и навсегда запомнить, как такое реализовать.
Обновлять можно не только <div>, но и <span>, <td> и любой другой блочный элемент на странице. Все зависит от вашей фантазии. Перейдем сразу к примерам.
Пример обновления содержимого страницы без перезагрузки
Прежде всего, нам нужен блочный элемент. Пусть это будет <div>, создадим его на странице и присвоим ему уникальный идентификатор, по которому его узнает jQuery.
<div id="block">
<p>Hello World</p>
</div>
Важно понимать, что идентификатор должен быть уникальным на всей странице, поэтому вызовом $(‘#block’) мы получим первый элемент на странице с таким id. Если нужно изменить содержимое нескольких элементов, стоит использовать классы.
<div class="block"> <p>Hello World</p> </div> <table> <tr> <td class="block"> <p>Hello World</p> </td> </tr> </table> <span class="block"> <p>Hello World</p> </span>
Пусть в качестве кнопки выступает обычная ссылка <a>, с заглушкой href=#. В обычных условиях, заглушка вернет пользователя на верх веб-страницы. На ссылку повесим событие onclick, в котором вызовем js функцию setNewEntry(), которая, например, получит новое содержимое для нашего блочного элемента.
<a onclick="setNewEntry('Pressed button 1'); return false;" href="#">Button 1</a><br>
<a onclick="setNewEntry('Pressed button 2'); return false;" href="#">Button 2</a><br>
<a onclick="setNewEntry('Pressed button 3'); return false;" href="#">Button 3</a><br>
<a onclick="setNewEntry(''); return false;" href="#">Clear block</a><br>
return false; после вызова нужен для того, чтобы отменить переход по url из href, в нашем случае мы не вернемся вверх страницы, а останемся на месте.
Теперь рассмотрим саму функцию на JS, менять содержимое блока будем с помощью метода .html(). Если использовать его без аргументов, то он вернет нам текущее содержимое блока, если передать ему один аргумент, например строку, то он заменить содержимое блока на нее. В более приближенных к реальности случаях, методу передается функция, которая отрабатывает для блока и возвращает ему новое содержимое. Но пока мы ограничимся передачей строки.
<script type="text/javascript">
function setNewEntry(entry) {
//#block - найти элемент по индентификатору
//.block - найти по имени класса
$('#block').html(entry);
}
</script>
Вот как будет выглядеть код веб-странички.
<html>
<head>
<title>js .html demo</title>
<!-- Не забываем подключить библиотеку -->
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="block">
<p>Hello World</p>
</div>
<br>
<a onclick="setNewEntry('Pressed button 1'); return false;" href="#">Button 1</a><br>
<a onclick="setNewEntry('Pressed button 2'); return false;" href="#">Button 2</a><br>
<a onclick="setNewEntry('Pressed button 3'); return false;" href="#">Button 3</a><br>
<a onclick="setNewEntry(''); return false;" href="#">Clear block</a><br>
<script type="text/javascript">
function setNewEntry(entry) {
//#block - найти элемент по индентификатору
//.block - найти по имени класса
$('#block').html(entry);
}
</script>
</body>
</html>
Пример передачи функции в метод .html()
Я придумал совсем простенькую функцию, которая будет накапливать нашу историю нажатий на кнопки, и очищать ее, когда мы захотим. Для демонстрации вполне достаточно.
<script type="text/javascript">
function setNewEntry(entry) {
$('#block').html(getNewEntry($('#block').html(), entry));
}
function getNewEntry(oldHTML, newHTML) {
if(newHTML == '')
return newHTML;
else
return oldHTML + newHTML;
}
</script>
Заключение
Ну вот и все, если разобраться, то ничего сложного, но с помощью этого метода можно вершить «великие дела» и создавать динамические веб-страницы на любой вкус. Спасибо за внимание!