—»     —»   Загрузка содержимого контейнера посредством Ajax
  Раздел: Ajax   Комментариев: 1  

Загрузка содержимого контейнера посредством Ajax

С помощью jQuery, вы можете подгружать не только содержимое конкретной ссылки, но и отдельные селекторы CSS из определенного документа, расположенного по URL-адресу. Например, так:

$("#area").load("something.html #content");

Этот код определяет содержимое в файле something.html, которое находится в элементе, которому присвоен ID содержимого, а затем он отображает его на нужной вам странице, внутри элемента, которому задан ID области.

Но давайте допустим, что файл something.html очень схож с текущей страницей. Вашей задачей является – заменить #area на #area из документа something.html. Итак, вам нужно сделать следующее:

$("#area").load("something.html #area");

Но это будет несколько проблематично, так как концовка будет выглядеть примерно так:

<div id="area">
    <div id="area">
         <!-- stuff -->
    </div>
</div>

И что бы сюда ни вызывало это действие, если вы повторите запрос еще раз, то это приведёт к ещё больше путанице (а это нам не нужно).

Простое решение заключается в том, чтобы просто захватить все содержимое #area, нежели сам элемент #area.

$("#area").load("something.html #area > *");

Давайте посмотрим самое простое демо:

Посмотреть демо

Это будет полезным вам, когда:

* Вы хотите выстроить функционал Ajax для модернизации веб-сайта. Чтобы каждый URL представлял собой не просто фрагмент информации, а был целой страницей, которая содержится сама по себе.
* Вам не хочется менять разметку типа
<div id="inside"></div>
для того, чтобы обойти эту проблему стороной.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: ajax, jQuery
Опубликовал Mysterious Master   Прочитано (раз): 12868   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 18 июля 2011 @ 11:29
Написал: вова — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
спасибо за уроки, нашел много полезного для себя.

а как сделать , чтобы загружалось содержимое из базы sql, как это правильно прописать?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031