Ajax loaded content css

Show loading image while $.ajax is performed

I am just wondering how to show an image that indicates that the async request is running. I use the following code to perform a async request:

13 Answers 13

You can, of course, show it before making the request, and hide it after it completes:

$('#loading-image').show(); $.ajax(< url: uri, cache: false, success: function(html)< $('.info').append(html); >, complete: function() < $('#loading-image').hide(); >>); 

I usually prefer the more general solution of binding it to the global ajaxStart and ajaxStop events, that way it shows up for all ajax events:

$('#loading-image').bind('ajaxStart', function()< $(this).show(); >).bind('ajaxStop', function()< $(this).hide(); >); 

Starting jQuery 1.9, AJAX events should be attached to document only. See stackoverflow.com/questions/2275342/…

Use the ajax object’s beforeSend and complete functions. It’s better to show the gif from inside beforeSend so that all the behavior is encapsulated in a single object. Be careful about hiding the gif using the success function. If the request fails, you’ll probably still want to hide the gif. To do this use the Complete function. It would look like this:

$.ajax(< url: uri, cache: false, beforeSend: function()< $('#image').show(); >, complete: function()< $('#image').hide(); >, success: function(html) < $('.info').append(html); >>); 

.ajax-loader < visibility: hidden; background-color: rgba(255,255,255,0.7); position: absolute; z-index: +100 !important; width: 100%; height:100%; >.ajax-loader img

$.ajax(< type:'POST', beforeSend: function()< $('.ajax-loader').css("visibility", "visible"); >, url:'/quantityPlus', data: < 'productId':p1, 'quantity':p2, 'productPrice':p3>, success:function(data)< $('#'+p1+'value').text(data.newProductQuantity); $('#'+p1+'amount').text("₹ "+data.productAmount); $('#totalUnits').text(data.newNoOfUnits); $('#totalAmount').text("₹ "+data.newTotalAmount); >, complete: function() < $('.ajax-loader').css("visibility", "hidden"); >>); > 

Источник

Динамическая загрузка контента через 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) e.preventDefault(); var , 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» и стопорюсь

Источник

How to ensure dynamic CSS is loaded first before AJAX content?

I need help on timing issues between CSS file and HTML code from AJAX. I am loading CSS by just adding link in the head and also I am loading HTML content by AJAX. My intention is to apply styles(in profile_info.css file) on the dynamic contents(generated by profile_info.php). thats why i am first downloading css then asking ajax to get the content. How can I ensure that CSS is loaded first so that styles can be applied on the dynamic HTML content? Here is the code:

$('head').append( $('').attr('href', 'css/profile_info.css') ); $.get('/ajax/controllers/profile_info.php', , function(response)< $('#middle_content').html(response); >); 

Why do you need to add the styles dynamically to the head of your document? This will cause you to lose the performance advantages of having your CSS in the element. The browser usually would process that CSS before it ever got to the Javascript, but in your case since your doing it dynamically in Javascript, this is not the case. Do you really need to add the CSS dynamically like that?

yes, i think styling the dynamic content, we have 2 solution.1.we need to statically put the CSS for all upcoming html contents in future on page. Other one is to load dynamically CSS thats what i am trying in code

I’m not 100% certain, but I think this should work as-is. Are you sure the CSS file gets loaded at all? You might need a rooted path like /css/profile_info.css

CSS as well as ajax content is getting loaded perfectly but sometime CSS loading takes more time than html content. In that case styling is messed up in between :(.

Источник