Но, к сожалению, этот метод .live() плохо "дружит" с Ajax и не всегда работает корректно. По этому приходится использовать один замечательный плагин Live Query.

Преимущество Live Query в том, что он при обновлении дерева DOM автоматически связывает элементы с обработчиком событий и нормально работает с новыми DOM элементами, полученными через Ajax.

Подключается плагин как и все:

<script type="text/javascript" src="jquery.livequery.js"></script>

Использовать тоже не сложно.
Например, нам нужно получить value пункта в списке <OPTION> из контейнера <SELECT> с id=”myselect”, где сам список подгружается с помощью Ajax.

Делается это так:

$("#myselect").livequery(function(){
$(this).change(function() {
alert(this.value);
});
});

Или более изящней:

$("#myselect").livequery("change", function() {
alert(this.value);
});

В результате при выборе одного пункта из списка <SELECT> появится сообщение с его значением value.

Пример 2. При наведении курсора (mouseover) на элемент с id=”alert” вывести сообщение: "Получил курсор!". А после того, как уберем курсор (mouseout), вывести: "Потерял."

Решение:

$("#alert").livequery(function(){
$(this).hover(function() {
alert("Получил курсор!");
}, function() {
alert("Потерял.");
});
});

Так что если у вас не работает onchange в Internet Explorer (IE) или какие-то проблемы с элементами полученными через Ajax, пользуйтесь Live Query!

Посмотреть пример работы Live Query.

Скачать пример с плагинов Live Query.

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

http://www.preloaders.net/
http://www.ajaxload.info/
http://www.loadinfo.net/
http://www.webscriptlab.com/
http://www.chimply.com/

По ходу нахождения новых похожих ресурсов, буду пополнять список!

Или добавляйте свои, в комментариях!

Плагин под jQuery подключается как обычно:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="jquery.tabs.pack.js" type="text/javascript"></script>

где jquery.history_remote – это плагин для запоминания ajax а jquery.tabs.pack – плагин закладок.

Используем так:

<script type="text/javascript">
$(function() {
$('#container-1').tabs();
});
</script>

И HTML:

<div id="container">
<ul>
<li><a href="#section-1">Закладка 1</a></li>
<li><a href="#section-2">Закладка 2</a></li>
<li><a href="#section-3">Закладка 3</a></li>
</ul>
<div id="section-1">
...
</div>
<div id="section-2">
...
</div>
<div id="section-3">
...
</div>
</div>

Плагин понимает большое количество параметров, и вообще много всего умеет (с закладками).

Более подробно смотрите пример закладок на jQuery.

Или скачайте архив с примером.

Смотрим что получилось: звездный рейтинг или голосуем звездами!

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

Итак, на главной странице, index.html:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.sexy-vote.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#vote").sexyVote({maxScore:5,  idElement:8});
});
</script>
<style type="text/css">
#vote{
    margin-left: 3px;
    font-size: 0.8em;
}
</style>
</head>

<p id="vote"></p>

<span id="rez"></span> 

Сначала инициализируем jquery.js и сам плагин jquery.sexy-vote.js (строки 01-02).
Потом вызиваем скрипт плагина с параметром maxScore:5, тобишь максимальная оценка 5  и передаем id елемента за который голосуем, в моем случае это  idElement:8  (строка 05).
Стиль контейнера с шкалой голосования (строки 08-12).
Сам контейнер для шкалы голосования (строка 16).
И контейнер для результата голосования (строка 18).

И скрипт с которым обмениваемся Ajax-ом, reqvest.php:

$array = array("","Очень плохо","Плохо","Хорошо, но не совсем","Хорошо","Очень хорошо");

$col=6;
$val=17;

if(isset($_GET["start"]))
{
    $x=$val/$col;
}
else
{
    $col++;
    $val=$val+$_GET['val'];
    $x=$val/$col;
}
echo "<i>Текущая оценка:</i> ".$array[$x]."<br /><i>Количество оценивших: </i>".$col."";

С помощью Ajax, на сервер приходит три переменные:
$_GET["start"] - при загрузку страницы;
$_GET['val'] - при выборе оценки;
$_GET['id'] - при загрузку страницы и при выборе оценки.

В строке 01 объявлен массив с словесной оценкой, которую в результате возвращает сервер.

Стока 03: количество проголосовавших (в примере прописано статикой, а так значение нужно брать с базы по id $_GET['id'] !!!).

Стока 04: текущая оценка (в примере прописано статикой, значение также нужно брать с базы по id $_GET['id'] !!!).

Стока 06: если есть GET переменная start.

Стока 08: вычисляем результат оценки (выполняется при загрузке страницы).

Стока 12: инкрементируем количество проголосовавших (здесь же нужно сохранить новое значение в базу по id $_GET['id'] !!!).

Стока 13: получаем новую оценку (здесь же нужно сохранить новое значение в базу по id $_GET['id'] !!!).

Стока 14:  вычисляем результат оценки.

Стока 16:  ответ сервера с результатом оценки.

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

Для решения нам понадобится два файла:

index.html – основной код клиентской части.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>jQuery AJAX</title>

<script language="JavaScript1.2" src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sel1").change(function(){
$('select[@name=sel2] option').remove();
$.ajax({
type: "GET",
url: "request.php",
data: "zapros=" + $("#sel1").val() + "",
success: function (data, textStatus)
{
$("#sel2").append( $(data) );
}
});
});
});
</script>

</head>

<body>

<select name="sel1" id="sel1">
<option value="-" > - </option>
<option value="one" > Один </option>
<option value="two" > Два </option>
<option value="three" > Три </option>
</select>

<select name="sel2" id="sel2">
<option value="-" > - </option>
</select>

</body>

</html>

request.php – формирует ответ клиенту.

<?php
header("Content-type: text/plain; charset=windows-1251");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
if(isset($_GET[zapros]))
{
echo '<option value="'.$_GET[zapros].'">';
echo "Выбрано: ".$_GET[zapros];
echo "</option>";
}
?>

Рассмотрим index.html.

Подключаем библиотеку jQuery, строка 07.

При изменении селекта выполняется скрипт с 10 по 21 строку, где сначала очищаем все значения в первом селекте с именем sel2, строка 11. Затем отправляем Ajax запрос к request.php, при этом передаем ему параметр ?zapros= выбранное значение в селекте, строка 15. После удачного запроса добавляем полученный ответ во второй селект, строка 18.  Все!

Рассмотрим request.php.

Здесь еще проще! Если появился GET запрос «zapros» , то вернуть то, что нас интересует, например, данные с базы.

Смотрим пример!