Posts Tagged ‘lesson’
jQuery: ajax, wait
Что-то давненько я не писал про jQuery лёгкие уроки, по лёгкому фреймворку.
Вот сегодня выдалось немного времени, поэтому. Простенький пример, как развлечь посетителя на время пока отрабатывается ajax запрос.
Есть некий урл, который обрабатывает условный запрос. В примере - там просто цикл, большой цикл, который создаёт видимость “задумчивости” сервера. В жизни - там будут выполнятся некие запросы в базу данных, вычисления и т.п.
Итак, код, который пишется для jQuery:
$ (). ajaxStart( function () { $("#waiter").show();});
$ (). ajaxStop( function () { $("#waiter").hide();});
$ ("#clickme").click( function() { $ . post("http://ouch.kiev.ua/examples/les12.php", {"name" : "8"}); });
ajaxStart/ajaxStop - функции, которые срабатывают, ежели на страничке начинает работать ajax-запрос. Т.е. можно сделать универсальное отображение “подождите”, для любого запроса.
click - всё просто. Жмём на ссылочку, инициируем post-запрос с неким параметром name. Любуемся анимированным гифчиком. Когда “запрос” завершается. Анимация исчезает.
Вот ссылочка на действующий пример. Собственно заглянув в исходник, вы увидите весь нехитрый код, который и стартует-останавливает отображение гифки.
Пример 12
Отмечу,что ajaxStart/Stop может содержать и более хитрый функционал, чем показ-прятание какой-либо картинки… Enjoy!