Заботливый контроллер событий на странице

Наверняка вы сталкивались с такими задачами:

— Подгрузить ajax данные на страницу;
— По клику на объект получить ответ от сервера;
— Сделать вывод (не) зависимого списка на ajax.

Написанный контроллер решает эти задачи, он может:

— Подрузить любое количество указанных данных на страницу;
— Контролировать события для созданных объектов и подгружать новые;
— Отслеживать зависимость списков SELECT с любой вложенностью.

Размер этого монстра всего несколько строк.

С комментариями чуть больше строк:

$(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"));
    });

// Обработка клика по заданным ид, очистка не нужных ид, отправка запроса если нужно

// Ожидание события клик на классах  '.city, .do_ajax 

$('body').on('click', '.city, .do_ajax', function() {

// Если это селект и имеет значение то берем его, если не селект то ищем значение в $(this).data("inpost");

var my_select = $("option:selected", this).val() ? $("option:selected", this).val() : $(this).data("inpost");

// Нужно ли нам, что то очистить при этом ? Возможно много ид ? Получаем их отсюда $(this).data("clean") очищаем

        if ($(this).data("clean")) {
            var to_clean = $(this).data("clean").split(" ");
            if (to_clean) $.each(to_clean, function(i) {
                $("#" + this).empty();
            });
        }

// А нужно ли нам еще куда то запрос делать и есть ли данные ? Посмотрели тут $(this).data("next") отправили данные my_select по адресу $(this).data("url")

        var to_next = $(this).data("next");
        if (to_next && my_select != 0) post_ajax($(this).data("url"), $(this).data("post") + "=" + my_select, "#" + to_next);
    });

});

Как это работает

Добавляем на страницу:

<div id='ob_tel_data' name='ob_tel_data'>
<a class='ob_hide do_ajax' href='javascript:void();' data-inpost='".$o[id]."' data-post='ajax_contacts'  data-next='ob_tel_data' data-url='/?ajax_contact' >Показать контактные данные →</a>
</div>

Где у нас:

data-url='/?ajax_contact' — адрес для запроса
data-post='ajax_contacts' — имя переменной
data-inpost='".$o[id]."' — данные переменной
data-next='ob_tel_data' — куда вставить полученный ответ html

В итоге получаем кнопку, при клике на которую делается запрос и обновляется html в заданном data-next

Как можно сделать зависимые select
Для отрисовки селекта достаточно добавить:

<div id='need_ajax' data-url='/map.php?' data-post='g1=1' data-html='#html_g1'></div>
<div name="html_g1" id="html_g1" ></div><div name="html_g2" id="html_g2" ></div><div name="html_g3" id="html_g3"></div>

Здесь — 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"),
    "g2" => array("clean" => "html_g3", "next" => "html_g3", "url" => "/map.php?", "post" => "g3"),
    "g3" => array("clean" => "", "next" => "", "url" => "/map.php?", "post" => "g4"),
    "g4" => array("cookie" => "city[3]")
);

# Зачем это ?  php.net/manual/ru/wrappers.php.php
# php://input - получение данных AJAX запроса 

$_POST = @file_get_contents("php://input");

# Получаем данные запроса

if ($_POST) {

$a = explode("=", $_POST);

$r77 = @mysql_query("SELECT * from  ajax_city 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 = '
      <select name="'.$a[0].'" id="'.$a[0].
        '" class="city" data-clean="'.$assoc[$a[0]][clean].      # - Какой элемент очистить при обновлении селекта
        '" data-next="'.$assoc[$a[0]][next].                                 # - Будет ли создаваться следуюший элемент
        '"  data-url="'.$assoc[$a[0]][url].                                     # - Урл для запроса при выборе селекта
        '" data-post="'.$assoc[$a[0]][post].                               # - Данные для отправки по дефолту
        '" > <option  value=0>Выбрать из списка</option> ';

        while ($o = @mysql_fetch_array($r77)) 
       {
            $select. = "<option value='".$o[cityid]."' ".($o[cityid] == $a[1] ? " SELECTED" : "")." >".$o[text]."</option>\n";
        }
        $select. = "</select>";
    }
    echo $select;
    exit;

Демо на — кнопку (Показать контактные данные →), на селект (Выбор города)

Зачем? Контроллер может обслужить любое количество кнопок и селектов на странице, обновлять, заполнять, очищать зависимые списки и кнопки.

Вот такой не большой, но полезный код.
Спасибо за внимание.