Слайд шоу на jQuery

Очень красивая реализация — здесь.

Глюк при динамическом добавлении SELECT'а в форму

Обнаружил прелюбопытнейших глюк. Допустим я генерю SELECT динамически, как это показано в прошлом примере. Этот SELECT вставляется в форму, которая в свою очередь расположена в таблице. Так вот, если тэг формы находится где-то внутри таблицы, то генерируемый налету SELECT (да и любой другой элемент формы) не попадает в форму. То есть, при субмите в массив $_POST (или $_GET) не попадают данные с этого SELECT'а. Удивительно!

Динамический SELECT

Допустим, что вам необходимо сделать такую кобинацию выпадающих списков: список 1 — области, список 2 — города. Но так, что при выборе области из списка 1, в списке «Города» отображаются только города соответствующей облести. Как это сделать на jQuery?

СКРИПТЫ:

1. $(document).ready(function() {
2. $("#region").change(function(){
3.  id = $(this).attr('value');
4.  $.post("data_city.php",{id:id},AfterRegion);
5. });
6. });
7. function AfterRegion (data){
8.  $("#city").empty();
9.  $("#city").append(data);
10. }

HTML-код:

11. < div id=region>
12. < select>
13.  < option value=63>Самарская область
14.  < option value=77>Московская область
15.  < option value=23>Краснодарский край
16. < /select>
17.  < /div>
18. < div id=city>
19. < /div>

ПОЯСНЕНИЯ:

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

2. После изменения значения в списке областей (строчка 2), мы узнаем код выбранной области (строчка 3) и вызывает процедуру data_city.php (строчка 4), которой передаем это код в виде параметра. Процедура data_city.php должа в качестве результата выдавать (echo или print) SELECT с требуемыми значениями.

После отработки процедуры, ее результат передается в функцию AfterRegion, которая очищает DIV с городами (вначале он и так пуст, но потом старые данные нужно затирать), и вставляет в него сгенерированный фунцией data_city.php выпадающий список.

3. Все.

Автозаполнение двух связанных input’ов

Дано: два поля input type=text. В первом необходимо указать клиента, а во втором выбрать домашнее животное, принадлежащее этому клиенту. Обычный использовать нельзя, ибо клиентов много и лазить по списку совсем не хочется.
Да и не нужно, есть ведь отличный плагин Autocomplete для JQuery.

Что нужно сделать, чтобы все заработало:

Вначале создает HTML-код:

<input type=text id=client taborder=1> здесь будет фамилия клиента
<input type=hidden id=client_id name=forma[client_id]> а здесь будет код клиента
<input type=text id=pet taborder=2> здесь будет кличка питомца
<input type=hidden id=pet_id name=forma[pet_id]> здесь будет код питомца

Теперь определяем обработчики для поля с клиентами:

$(document).ready (function (){
$(«#client»).autocomplete («data_clients.php», {});
}

data_clients.php выглядит следующим образом:

Подключение к базе опускаю, ибо и так понятно
$q = strtolower ($_GET["q"]);
if (!$q) return;
$rows = $DB->select («select * from clients»);
foreach ($rows as $numRow=>$c){
$id = $rows[$numRow]['id'];
$name=$rows[$numRow]['last_name'].' '.$rows[$numRow]['first_name'];
$name = Win1251toUTF8 ($name);
echo «$name|$id\n»;
}
?>

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

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

$(«#client»).result (function (event, data, formatted) {
var hidden = $(«#client_id»);
hidden.val (data[1]);
hidden.click ();
});

Первая часть работы закончилась. Вторая часть более сложная.

Во-первых, нам нужно передать код выбранного клиента. Для этого пишем маленькую JS-процедурку:

function getClientId () {
return document.getElementById ('client_id').value;
}

Затем указываем ее в качестве параметра для автозаполнения:

$(«#pet»).autocomplete («data_pets.php», {
extraParams: {bar: getClientId ()
}
});

PHP-скрипт data_pets.php приводит не буду, так как он почти идентичен скрипту data_clients.php. В SQL запросе пишем условие с учетом переменной $bar.

Вроде все. Но проблема в том, что при выборе клиента и изменении поля с кодом клиента, jQuery это изменение не замечает, так что скрипту data_pets.php передается все время один и тот же изначальный параметр. Нужно вручную указать на изменение. Именно для этого мы в обработчике «$(«#client»).» добавили строку «hidden.click ();». Теперь лишь нужно перезагрузить обработчик pet:

$(«#client_id»).click (function (){
$(«#pet»).attr («value»,'');
$(«#pet_id»).attr («value»,'');
$(«#pet»).unbind ().autocomplete («data_pets.php», {
extraParams: {bar: getClientId ()}
});

$(«#pet»).result (function (event, data, formatted) {
var hidden = $(«#pet_id»);
hidden.val (data[1]);
hidden.click (); }

);
});

Все. Теперь все работает.

jEditable

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

Такое решение довольно легко реализовать, если использовать плагин для jQueryjEditable, который я нашел в блоге Mike Tuupola.

Достаточно добавить на страницу следующий JS-код:

$(document).ready (function () {
$(«.edit»).editable («http://www.example.com/save.php», {
indicator : «Saving...»,
tooltip : 'Click to edit...'
});
});

В результате, любой контейнер (div, td, p и т.д.), помеченный стилем «edit» станет вести себя именно так, как я описал выше.

TheBroth — создай шедевр

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

StickyTag: онлайновая дверь холодильника

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

Gobits Reader: Читать — не перечитать

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

Обезьянник

Английское слово «monkey» можно перевести не только русским словом «обезьяна», хотя это и самое распространенное его значение. «Monkey» — слово многогранное, которое обозначает и тележку для подъемного крана, и купюру в пятьсот долларов, и закладную, и даже овцу (в Австралии). Кроме того, это же слово употребляют, когда хотят сказать, что кто-то неумело обращается с какой-нибудь вещью или лезет не в свое дело.

Anothr.com: RSS ридер для скайпа

В качестве предисловия: я влюблен в инструкции, переведенные на русский язык китайскими переводчиками. «Нога — корень здоровья» или «дутьручка» — такие перлы повышаю настроение на весь день. Когда я услышал, что китайский сервис Anothr.com русифицирован, то у меня закрались сильные подозрения, что нам опять достанется новая порция незабываемых лексических построений. Я не ошибся. Самая первая фраза, которая встречает пользователя: «приветствовать использовать сервис на русском языком», уже говорит о многом. А какие сложные ассоциативные связи привели переводчика к мысли о том, что английское «Tips» нужно переводить словом «медсестра», остается только догадываться. Кстати, я не вполне понимаю природу подобного явления. Неужели так трудно попросить любого русского студента привести текст в порядок! Причем, русскому студенту вовсе не обязательно для этого быть филологом. Обещаю, если владелец Anothr.com обратится ко мне, то я ему обязательно помогу (хотя я тоже, конечно, не Розенталь, но, думаю, смогу придумать, что-нибудь поприличнее, чем «вы уже удачны удалить все»). Однозначно — сервис вполне достоин более качественной русификации.