Авторизация

Рубрики блога


Рекомендуем



Последние комментарии

Облако тегов


Устами великих

"Странный этот мир, где двое смотрят на одно и то же, а видят полностью противоположное." © Агата Кристи

Мы Вконтакте

Записки вебмастера Рубрика, которая призвана собрать коллекцию полезных скриптов и авторских решений, интересных особенностей и стандартов верстки, решение вопросов юзабилити и функционала, полезных ресурсов и программ.
20
Сен

jQuery | Загрузка div с другой страницы по клику

рейтинг материал 4.2 (5) | количество просмотров 10969 | количество коментариев 0
Как с помощью jQuery получить данные с другой страницы вашего сайта и подгрузить их туда куда вам нужно без обновления страницы.
View demo

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

Итак, чтобы загрузить необходимый блок с id "что" из страницы page.html на нашу страницу в блок с id "куда" необходимый такой код:

JavaScript / jQuery

<script type="text/javascript" language="JavaScript">
$('#куда').load('page.html #что > *');
</script>

HTML

<div id="куда">Загрузка...</div>
В случае, если вы хотите чтобы подгрузка информации выполнялась по клику определенной кнопки, а не сразу при загрузке страницы, то выглядеть это будет так:

JavaScript / jQuery

<script type="text/javascript" language="JavaScript"> 
$(document).ready(function(){ 
 
 $('#knopka').click(function(){ 
 $('#kuda').load('page.html #chto > *'); 
 }) 
 
}); 
</script>

HTML

<div id="knopka">Я кнопка. Кликни меня!</div> 

<div id="kuda">Загрузка...</div>

Помимо этого, также из div с уникальным id (можно также из класса, только он тоже должен быть уникальным) можно выбирать лишь то, что нам нужно, например, содержание строк - p или картинки img, да, в целом, что угодно, выглядеть это будет так:

JavaScript / jQuery

<script type="text/javascript" language="JavaScript"> 
$(document).ready(function(){ 
 
 $('#knopka').click(function(){ 
 $('#kuda').load('page.html #chto img'); 
 }) 
 
}); 
</script>
View demo
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]