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

Я как-то путано рассказываю , на самом деле все довольно просто.

Недавно на почтовом сервере ukr.net (в web интерфейсе) я заметил довольно неприятный баг. Загружается web интерфейс, я кликаю по письму и вместо сообщения «Загрузка данных…» вижу «Для просмотра письма включите поддержку JavaScript в браузере и перезагрузите страницу».

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

Работу скриптов ukr.net я анализировать не стал, но в общем-то о причине можно догадаться. Скорее всего, возникла задержка при загрузке JS файла со скриптом, который должен изменять «Включите JS…» на «Загрузка данных..».

Раньше я этот момент не замечал, но у меня нет ограничений по скорости на UA-IX трафик, да и сам ukr.net стабильно работает.

Тем не менее, проблема со скоростью загрузки существует и касается всех, а не только крупных порталов.

Рассмотрим реальную ситуацию.
Читать дальше »

Сегодня будет еще один небольшой пример работы с jqGrid. Я покажу каким образом можно заполнить форму поиска значениями по-умолчанию.

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

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

Поэтому мы немного усовершенствуем пример. После выбора значения в поле с автозаполнением мы откроем форму поиска и в неё вставим выбранное значение. Таким образом, если пользователю будет нужно добавить другие условия, он сможет это сделать.
Читать дальше »

Сегодня я продолжу рассказывать о плагине jqGrid и покажу еще один пример его использования.

Если не ошибаюсь, это уже 5-ый пост об этом плагине, поэтому я не буду останавливаться на его установке и настройке. Лучше приведу ссылки на предыдущие части:

1) Query Grid Plugin – "продвинутое" решение для создания таблиц

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

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

4) jqGrid – поиск данных

Но для тех, кто их не читал, кратко поясню, о чем вообще речь.

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

Естественно, у плагина очень много настроек и вариантов использования, но это не означает, что их хватит на все случаи жизни

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

Как это работает, вы можете посмотреть на демо-страничке

либо скачать архив с примером и установить его на своем сервере

Реализовать такую систему не сложно.
Читать дальше »

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

Прежде всего, определимся с задачей.

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

И если наше приложение не использует JavaScript, то можно считать задачу решенной.

Но на сегодняшний день JS используется все чаще и в основном для создания интерфейса, содержащего множество надписей, сообщений и т.п.

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

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

Теперь рассмотрим решение.
Читать дальше »

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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