Категории: Ajax

jqGrid — поиск данных

Владимир | | Ajax, HTML, JavaScript, PHP, Web разработка.

Приветствую всех!

Я довольно давно обещал рассказать о функции поиска в плагине jqGrid и сегодня выполняю обещание.

Для тех, кто сразу хочет посмотреть, как это работает, я сделал демонстрационную страничку

Demo

и, конечно, можно скачать архив с примером

Source

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

Сразу хочу отметить, что эта статья — продолжение предыдущих двух частей (jQuery Grid Plugin — «продвинутое» решение для создания таблиц и jqGrid: редактирование табличных данных с помощью inline редакторов). Поэтому если вы впервые слышите о jqGrid — очень советую почитать хотя бы первую часть.
Читать дальше

PHP скрипт: ToDo с картинками

Владимир | | Ajax, CodeIgniter, CSS, htaccess, HTML, JavaScript, MySQL, PHP, Web разработка.

Уделяете ли вы внимание организации своей работы?
Много ли у вас «мелких» дел, о которых вы регулярно забываете?

Вроде бы простые вопросы, но для многих людей (и я не исключение) организация работы – это актуальная проблема.

Хуже всего, когда нужно сделать много «мелких» дел, которые не занимают много времени, но обязательно должны быть выполнены вовремя… и держать в голове их все просто невозможно.

Естественно, разработчики реагируют на потребности рынка, и на сегодняшний день создано множество программ-органайзеров, различных напоминалок и т.п.
Примеры создания ToDo списков часто приводят в учебниках по программированию.

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

Кстати, скрипт называется SimpleTasks.

Главная особенность – возможность указывать состояние выполнения задач. При этом используется специальная система обозначений.
Читать дальше

jqGrid – создание дополнительных кнопок

Владимир | | Ajax, JavaScript, Web разработка.

Пишу этот пост, т.к. недавно столкнулся с проблемой при использовании jqGrid. Об этом плагине для jQuery я уже рассказывал (часть 1, часть 2), поэтому повторяться нет смысла, скажу только, что, на мой взгляд, он представляет собой одно из лучших JS решений для работы с большими таблицами.

А проблема возникла, в общем-то, тривиальная – не достаточно подробная документация.

Дело было так. Один из читателей этого блога (Виктор Волков) попросил меня помочь добавить дополнительные кнопки в навигационную панель jqGrid. Я естественно отправил ему ссылку на соответствующую страницу справки 🙂 … Но при этом я не знал, что если скопировать код от туда, то работать он не будет.

Хотя их демонстрационные примеры с дополнительными кнопками прекрасно работают.
Читать дальше

Динамическая загрузка картинок для анонсов с помощью Ajax, jQuery и PHP

Владимир | | Ajax, CSS, HTML, JavaScript, PHP, Web разработка.

Идею этого эффекта я нагло стырил позаимствовал на сайте jomsocial. Там есть блоки (под кнопкой Learn More) с анонсами. При наведении мышки на эти блоки к ним добавляется картинка.

Реализовать такой эффект можно разными способами. Например, можно теги картинок вставить прямо в страницу и прятать/показывать их с помощью JavaScript.

Основное достоинство такого варианта – отсутствие задержек при появлении картинок (если конечно вы подождали пока страница полностью загрузится).

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

Поэтому я решил привести пример своей реализации этого эффекта.

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

Если посетитель наведет курсор мышки на другую аннотацию, будет загружена картинка для неё, а предыдущая – исчезнет.

Говорят, что одна картинка стоит тысячи слов, поэтому я сделал демонстрационную страничку для этого примера.
Читать дальше

jqGrid: редактирование табличных данных с помощью inline редакторов

Владимир | | Ajax, JavaScript, MySQL, PHP, Web разработка.

В одной из прошлых статей (jQuery Grid Plugin — "продвинутое" решение для создания таблиц) я рассказывал об использовании jqGrid для создания таблиц.

jqGrid представляет собой плагин к библиотеке jQuery предназначенный для работы с таблицами. С его помощью можно создавать многостраничные таблицы, выполнять сортировку и, конечно, редактировать данные.

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

Прежде всего, напомню, что данные хранятся на стороне сервера (в базе данных) и плагин к ним непосредственного доступа не имеет. Он может только вызвать серверный (PHP) скрипт и передать ему новые значения.

Редактировать записи в таблице можно 2 способами.
Читать дальше

Создаём виджет для хранения заметок. Часть 2.

Владимир | | Ajax, CSS, HTML, JavaScript, Web разработка.

В этой статье мы продолжаем разработку виджета для работы с короткими заметками. Если вы не читали предыдущую часть, то очень советую бегло её просмотреть. В ней мы подробно описаны постановка задачи и реализована серверная часть виджета, т.е. весь PHP код.

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

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

Поэтому основную часть клиентской части у нас будет занимать JavaScript код. А чтобы его сократить мы используем библиотеку jQuery с несколькими плагинами.

Кстати, есть демонстрационная страничка с этим виджетом.

Demo

И, как и обещал, выкладываю архив с исходниками.

Source

Прежде всего, рассмотрим разметку страницы (index.html).
Читать дальше

jQuery Grid Plugin — «продвинутое» решение для создания таблиц

Владимир | | Ajax, HTML, JavaScript, PHP, Web разработка.

Сегодня речь пойдет о плагине для jQuery, предназначенном для отображения табличных данных. Я наткнулся на него практически случайно. Просто раньше я и не задумывался о том, что может существовать настолько мощное решение для таблиц. Ведь в большинстве случаев данные можно показать с помощью обычной html таблицы.

jQuery Grid Plugin имеет смысл использовать если нужно работать с большими таблицами. Дело в том, что плагин существенно упрощает разбивку данных на страницы. Т.е. автоматически создается панель с кнопками перелистывания страниц, а новые данные подгружаются с помощью AJAX. Кроме того, плагин имеет кучу дополнительных функций и несколько тем оформления.

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

Чтобы не ходить вокруг да около, давайте рассмотрим небольшой пример.
Читать дальше

Отправка данных в формате JSON с помощью JavaScript и jQuery

Владимир | | Ajax, JavaScript, PHP, Web разработка.

В прошлых статьях я рассказывал и приводил примеры получения и обработки данных в формате JSON на стороне клиента. Но примера отправки данных серверу в этом формате не было. Сегодня я попробую исправить это упущение.

Прежде всего, кратко напомню принцип передачи данных в JSON формате от сервера браузеру.

1) Серверный (PHP) скрипт формирует массив с данными, преобразует их в формат JSON (используется функция json_encode) и отправляет браузеру.

2) На стороне браузера JS скрипт обрабатывает полученные данные. Тут для преобразования данных используется eval.

То есть все преобразования данных сводятся к использованию двух функций.

Отправка данных серверу немного сложнее.
Читать дальше

JavaScript библиотеки для создания графиков

Владимир | | Ajax, htaccess, HTML, JavaScript, PHP, Web разработка.

Сегодня я продолжу рассказ о создании и использовании графиков на web ресурсах.

В предыдущих статьях речь шла об использовании для этих целей flash библиотек (Графики своими руками – Open Flash Chart 2) и внешних сервисов (Графики от Google и PHP библиотеки для работы с ними).

В принципе, на этом можно было бы остановиться, но судя по реакции в комментариях, я пропустил ещё один очень интересный вариант создания графиков. Речь, конечно, об использовании JavaScript.

Рассмотрим достоинства и недостатки этого варианта.

Достоинства.

1) Минимальные затраты на трафик. Передать нужно только саму библиотеку (обычно размер не превышает 100 кБ (без сжатия)) и данные для построения графика.

2) Минимальная нагрузка на сервер. Отрисовка графика выполняется браузером. Сервер должен только отправить массив с точками, по которым будет построен график.

3) Простота использования. Достигается за счет готовых библиотек.

Недостатки.

1) Возможны проблемы совместимости с некоторыми браузерами. С этими проблемами знакомы все web мастера. Но, должен отметить, что разработчики библиотек неплохо с ними справляются.

2) Дополнительная нагрузка на компьютер пользователя. Достаточно спорный момент. Вряд ли обычный пользователь заметит время, за которое будет создан один простой график. Но если графиков десятки и для их создания используются тысячи точек, то время создания такой страницы может существенно возрасти. В общем, тут многое зависит от вас.

Теперь перейдем к практической части.
Читать дальше

Bug Tracker: модель и страницы приложения (часть пятая)

Владимир | | Ajax, CodeIgniter, HTML, PHP, Web разработка.

В комментариях к прошлой части я получил много советов о том, в каком виде лучше получать данные из базы. Я очень признателен всем за эти замечания, т.к. они действительно помогли найти недостатки в прошлой части.

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

В общем-то, страниц у баг трекера не много. Первоначально я вообще хотел сделать одностраничное приложение, но передумал из-за проблем с индексацией поисковиками.

Поэтому сегодня постараюсь максимально подробно осветить этот вопрос.

Т.к. индексация страниц баг трекера поисковиками очень желательна, то при разработке имеет смысл придерживаться рекомендаций от Google, а именно методики Progressive Enhancement (постепенного улучшения).

Идея следующая. Нужно сделать приложения так, чтобы без поддержки JavaScript (только с помощью обычных ссылок) можно было получить доступ к любой информации (багам и комментариям).

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

Если JavaScript включен, то после загрузки страницы обычные ссылки будут преобразованы в ajax-ссылки и вместо перехода на другую страницу будет подгужен список комментариев.

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

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