[Из песочницы] Заботливый контроллер событий на странице
Наверняка вы сталкивались с такими задачами: — Подгрузить ajax данные на страницу; — По клику на объект получить ответ от сервера; — Сделать вывод (не) зависимого списка на ajax.
Написанный контроллер решает эти задачи, он может:
— Подрузить любое количество указанных данных на страницу; — Контролировать события для созданных объектов и подгружать новые; — Отслеживать зависимость списков SELECT с любой вложенностью.
Размер этого монстра всего 8 строк.С комментариями чуть больше строк:
$(document).ready (function () {
// Функция отправки запроса function post_ajax (url, data, inn){$.ajax ({ type: «POST», url: url, data: data, success: function (data){$(inn).html (data);} }); return;}
// Поиск #need_ajax если есть то для всех идет запрос функции отправки запроса с нужными данными jQuery.each ($(«div#need_ajax»), function (i) { post_ajax ($(this).data («url») , $(this).data («post») , $(this).data («html»));});
// Обработка клика по заданным ид, очистка не нужных ид, отправка запроса если нужно $('body').on ('click','.city, .do_ajax', function () { var my_select = $(«option: selected», this).val () ? $(«option: selected», this).val () : $(this).data («inpost») ; if ($(this).data («clean»)){var to_clean=$(this).data («clean»).split (» »); if (to_clean)$.each (to_clean, function (i){$(»#»+this).empty ();});} var to_next = $(this).data («next»); if (to_next && my_select!=0) post_ajax ($(this).data («url»), $(this).data («post»)+»=»+my_select,»#»+to_next); }); });
Как это работает
Добавляем на страницу:
Где у нас: data-url='/? ajax_contact' — адрес для запросаdata-post='ajax_contacts' — имя переменнойdata-inpost='».$o[id].»' — данные переменнойdata-next='ob_tel_data' — куда вставить полученный ответ html
В итоге получаем кнопку, при клике на которую делается запрос и обновляется html в заданном data-next
Для отрисовки селекта достаточно добавить:
Здесь — need_ajax указывет на то, что нужно подгрузить данные с адреса data-url и запросом data-post и вставить в data-html='#html_g1'После этого полученные данные так же рекурсивно обрабатываются функцией и могут обновлять данные и очищать мусор.
В PHP сам обработчик выборки городов выглядит так:
# Массив с метками для обработки запросов $assoc = array ( «g1» => array («clean»=>«html_g2 html_g3» , «next» => «html_g2» , «url» => »/map.php?» , «post»=>«g2» , «cookie»=>»), «g2» => array («clean»=>«html_g3» , «next» => «html_g3» , «url» => »/map.php?» , «post»=>«g3», «cookie»=>«city[1]», «delcookie» => «city_2 city_3»), «g3» => array («clean»=>» , «next» => » , «url» => »/map.php?» , «post»=>«g4», «cookie»=>«city[2]», «delcookie» => «city_3») , «g4» => array («cookie» => «city[3]») );
$_POST = @file_get_contents («php://input») ;
# Получаем данные запроса
if ($_POST) { $a = explode (»=», $_POST);
$r77=@mysql_query («SELECT * from ajax_city3 where ».($a[0]==«g1» ?» main='1' »:» parentid='».number_format ($a[1],0,'','').»'»).» ORDER BY pos DESC, text ASC »);
if (@mysql_num_rows ($r77) > 0) {
# Заполняем селекты
$select =' » ; } echo $select; exit;
Демо на — кнопку (Показать контактные данные →), на селект (Выбор города)
Зачем? Контроллер может обслужить любое количество кнопок и селектов на странице, обновлять, заполнять, очищать зависимые списки и кнопки.
Вот такой не большой, но полезный код.Спасибо за внимание.
