[Из песочницы] Заботливый контроллер событий на странице

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

— Подгрузить 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 );
});
});

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

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

<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

Для отрисовки селекта достаточно добавить:

<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" , "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 ='
<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;  

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

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

Вот такой не большой, но полезный код.

Спасибо за внимание.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.