Подгрузка html на ajax

prepare("SELECT * FROM `prods` LIMIT "); $sth->execute(); $items = $sth->fetchAll(PDO::FETCH_ASSOC); // Кол-во страниц $sth = $dbh->prepare("SELECT COUNT(`id`) FROM `prods`"); $sth->execute(); $total = $sth->fetch(PDO::FETCH_COLUMN); $amt = ceil($total / $limit); ?> 
 
 

#showmore-triger < text-align: center; padding: 10px; background: #ffdfdf; >/* Вывод товаров */ .prod-list < overflow: hidden; margin: 0 0 20px 0; >.prod-item < width: 174px; height: 230px; float: left; border: 1px solid #ddd; padding: 20px; margin: 0 20px 20px 0; text-align: center; border-radius: 6px; >.prod-item-img < width: 100%; >.prod-item-name < font-size: 13px; line-height: 16px; >.prod-list .prod-item:nth-child(3n)

prepare("SELECT * FROM `prods` LIMIT , "); $sth->execute(); $items = $sth->fetchAll(PDO::FETCH_ASSOC); foreach ($items as $row) < ?>
 

Источник

Динамическая загрузка контента через jQuery

В этом учебнике мы возьмем средний обычный веб-сайт и улучшим его с помощью jQuery. Мы добавим AJAX-функциональности, которая позволит содержимому динамически загружать контент, без перезагрузки страницы, в соответствующий контейнер. Вместо того, чтобы заставлять пользователя переходить на другую страницу. А также интегрируем кое-какие потрясающие анимационные эффекты.

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

Для примера я сначала построил очень простой макет. Вот скриншот и HTML-код, который мы будем использовать.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

ajax . nettuts

Welcome!

Шаг 1

Вначале пойдите и скачайте последний стабильный релиз jQuery и добавьте ссылку на него в ваш документ:

Как я считаю, одна из лучших черт jQuery – это его простота. Можно достичь поставленной задачи в сочетании с ошеломляющими эффектами всего несколькими строчками кода.

Во-первых, давайте загрузим библиотеку jQuery и запустим функцию, когда документ уже готов (когда DOM уже загружен).

Шаг 2

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

Для этого нам нужно определить ссылки в меню навигации и запускать эту функцию при щелчке на них:

Давайте наметим, что мы должны сделать в этой функции по порядку.

Удалить содержимое текущей страницы.

Получить новое содержимое страницы и добавить в содержимое DIV.

Вначале нам нужно определить, из какой страницы получать данные после того, как на ссылку нажали. Все, что для этого нужно сделать – это получить атрибут ‘href’ нажатой ссылки и использовать его как адрес страницы, из которой будет загружаться информация.
Кроме того, к полученному URL необходимо добавить метку элемента, так как мы не собираемся использовать ВСЕ содержимое из запрашиваемой страницы. Вместо этого, нам требуются данные внутри разделителя div с меткой ‘content’:

Чтобы наглядно продемонстрировать, что делает вышеуказанный код, давайте представим, что пользователь нажимает на ссылку ‘about’ , которая связана со страницей ‘about.html’ – в этой ситуации переменной будет: ‘about.html #content’ – и это именно та переменная, которую мы будем запрашивать при простом вызове. Однако первое, с чего мы начнем – это создадим красивый эффект для содержимого текущей страницы. Вместо того, чтобы оно просто исчезало, мы используем функцию «скрывания» jQuery:

Указанная функция быстро «прячет» #content div, и как только эффект заканчивает свое действие, она, в свою очередь, инициирует функцию «loadContent» (загрузка нового содержимого [через ajax]) – это функция, которую мы определим позже (в шаге 4).

Шаг 3

Как только старое содержимое исчезнет с ошеломляющим эффектом, нам нельзя просто оставить пользователей в ожидании, пока не появится новое содержимое (особенно если у них медленное соединение с Интернетом), так что мы создадим немножко графики «загрузки» чтобы пользователи знали, что что-то происходит в фоновом режиме:

Вот CSS, прилагающаяся к свежесозданному #load div:

Таким образом область, которая должна содержать анимацию загрузки, первоначально не отображается. Далее, при инициализации функции fadeIn () (см. выше в коде), она начинает отображаться в верхнем правом углу сайта и показывает анимированный GIF, пока через некоторое время снова не исчезнет с экрана.

Шаг 4

Через некоторое время, когда пользователь нажмет на одну из ссылок, начнет происходить следующее:

Текущее содержание эффектно исчезает.

Появляется сообщение о загрузке.

А теперь давайте напишем ту самую функцию загрузки содержимого, о которой мы ранее говорили:

Функция loadContent вызывает запрошенную страницу, а когда это уже выполнено, вызывает функцию ‘showNewContent’ (показ нового содержимого):

Эта функция – showNewContent — использует функцию show() jQuery (на самом деле, это слишком скучное название для такого отличного эффекта) с тем, чтобы новое содержимое, помеченное меткой элемента ‘#content’ появилось на странице. Однажды вызванная, она инициирует функцию ‘hideLoader’ (исчезание):

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

Теперь все должно работать прекрасно. Пример этого можно увидеть здесь: [LINK]

Шаг 5

Можно было бы на этом и остановиться, но если вы беспокоитесь об удобстве использования (о котором должны заботиться), важно проделать еще кое-какую работу. Проблема нашего текущего решения в том, что оно игнорирует адреса URL. Что, если пользователь захочет определить ссылку на одну из наших так называемых «страниц»? Сейчас это сделать невозможно, потому что URL все время один и тот же.

Источник

Ajax подгрузка контента на jQuery

Иногда стоит задача реализовать AJAX загрузку контента с сервера без перезагрузки страницы. Например, обновить комментарии или подгрузить полный текст статьи при клике на кнопку «Подробнее». Для этого в jQuery есть удобный метод jQuery load(). Он делает асинхронный запрос на сервер и вставляет полученные данные (HTML разметку) в указанный элемент.

Вторым аргументом можно передавать параметры запроса

$("#result").load("ajax.php",{param1: value1, param2: value2});

Давайте посмотрим как он работает.

Предположим у нас есть страница с новостями, на которой выводится анонс этих новостей. В конце анонса располагается ссылка «Подробнее» на полный текст новости. Выглядеть это может, например, так.

При клике на ссылку в определенный блок должна подгрузиться вся новость полностью. Вот так выглядит ссылка

где data-id=»5″ — это id страницы новости. У каждой новости он будет свой.

А сам контент полной новости выводится в блок div, который расположен в конце страницы.

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

Шаг 1. Контроллер для AJAX запросов

Создадим файл, на который будем отправлять AJAX запрос и который будет возвращать контент указанной страницы. Назовем его ajax.php и положим в папку assets.

ajax.php (кликните, чтобы раскрыть)

getService('error','error.modError'); $modx->getRequest(); $modx->setLogLevel(modX::LOG_LEVEL_ERROR); $modx->setLogTarget('FILE'); $modx->error->message = null; $output = ''; switch ($action) { case 'getContent': // Если не передан id страницы, тоже выходим $id = isset($_REQUEST['id']) ? (int) $_REQUEST['id'] : 0; if (empty($id)) { exit(); }; $object = $modx->getObject('modResource',$id); $output = $object->get('content'); // Парсим теги MODX $maxIterations= (integer) $modx->getOption('parser_max_iterations', null, 10); $modx->getParser()->processElementTags('', $output, false, false, '[[', ']]', array(), $maxIterations); $modx->getParser()->processElementTags('', $output, true, true, '[[', ']]', array(), $maxIterations); } @session_write_close(); exit($output);

Шаг 2. Скрипт обработки

Теперь нам нужно сделать так, чтобы по клику на ссылку «Подробнее» на наш коннектор пошёл AJAX запрос. Сделаем это с помощью jQuery. Создадим файл скрипта и подключим его на странице.

// jQuery должен быть уже подключен $(document).on('click','.read-more',function(e) e.preventDefault(); var ); });

Вот и всё. Если запрос прошел успешно, то в блок с id=»content» вставится содержание, которое возвращается из коннектора.

Пример для модального окна

Давайте на практике попробуем использовать данный прием для вывода контента в модальное окно. Опять же воспользуемся фреймворком Bootstrap. В нём уже есть модальные окна.

Добавим в футер разметку модального окна

Открывать модальное окно мы будем при условии, что контент новости не пустой, т.е. что-то вернётся. А проверять наличие контента мы будем с помощью третьего агрумента функции .load(url, data, complete) . Javascript код будет выглядеть так

$(document).on('click','.read-more',function(e), function(response){ // Если ответ не пустой, открываем модальное окно if (response) { $("#mymodal").modal('show'); } }); });

Напоследок

Ну и в конце хочу отметить интересную возможность метода load() . В отличие от других методов он позволяет фильтровать полученный контент с помощью CSS селекторов. Т.е. если нам нужен не весь контент, а только блок с комментариями с id=»comments» , то указываем это в запросе.

$("#result").load("ajax.php #comments");

Комментарии ( )

$("#result").load("ajax.php #comments");

какой в этом случае должен быть php файл и Javascript код, или к примеру передать весь чанк с стилями и может даже с вызовом снипетов.
У меня получилось воспроизвести работу решения, а начинаю добавлять другие поля типа «pagetitle» или вообще свойство твара «color» и стопорюсь

Источник