воскресенье, 1 сентября 2013 г.

Ditto фильтр + форма + ajax

Есть форма в которой мы выбираем критерии, по которым будут фильтроваться документы Ditto. Всё это дело должно происходить без перезагрузки страницы.
Постараюсь сделать минимум украшательств, чтобы просто объяснить суть.

Создадим TV-параметр, по которому у нас будут отличаться наши документы:
Имя: Radio
Тип ввода: Text

Создадим документы, которые будем фильтровать, заодно присвоим им значение TV-параметра radio:
res1 (radio = 'rad1')
res2 (radio = 'rad1')
res3 (radio = 'rad2')
res4 (radio = 'rad2')

Сделаем простейшую форму, которая будет содержать к примеру только radio buttons и собственно окошко, в котором у нас будут отображаться результаты поиска. Форма будет содержать кнопку Submit и Reset.

<form id="search">
<label><input type="radio" name="name1" value="rad1" />Select rad1</label><br />
<label><input type="radio" name="name1" value="rad2" />Select rad2</label><br />
<input type="reset" id="reset" value="Reset" />
<input id="submit-request" type="button" value="Отправить" />
</form>

<div id="result">

</div>
(при желании можно повесить стилей для наглядности)

вот мои:
#result
{
width: 400px;
height: 200px;
margin: 10px;
background-color: #dddddd;
border: 1px solid silver;
}

.each-block
{
margin: 5px;
background-color: greenyellow;

}

В нижнем div у нас будет отображаться результаты отфильтрованного Ditto. Сам ditto сделаем в другом документе. 
Создадим шаблон документа, в котором будут выдаваться результаты Ditto с фильтром:

[!Ditto? &parents=`1` &tpl=`tpl-ditto-searchresult` &extenders=`request`!]

Повесим его на документ, у которого будет URL = search-result.html

Шаблон для Ditto взял элементарный:

<div class="each-block">
[+pagetitle+]

</div>

Теперь собственно сам Ajax:

Подключим jQuery
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Скрипт для Submit и Reset:
<script type="text/javascript">
$(document).ready(function(){
$("#submit-request").click(function(){
var radio = $('input[name="name1"]:checked').val();
$('#result').load('search-result.html', 'ditto_filter=radio,'+radio+',2')
});
$("#reset").click(function(){
$('#result').load('search-result.html', '');
});
});

</script>

Немного из учебника:
Синтаксис:
$("селектор").load(url,данные,функция)
селектор выбирает элемент, в котором будет отображен результат AJAX запроса.
url адрес, на который будет отправлен AJAX запрос.
данные является необязательным параметром. Данные, которые будут переданы вместе с запросом.

функция является необязательным параметром. Функция, которая будет вызвана после выполнения запроса.

12 комментариев:

  1. Скажите, а как отправить два параметра для фильтрации?

    ОтветитьУдалить
  2. Вот пример Ditto с множественными фильтрами:
    http://maisonduthe.ru/chaj/?ditto_filter_1=sort,%D0%A7%D0%B5%D1%80%D0%BD%D1%8B%D0%B9,7&ditto_filter_2=time_to_drink,dinner,7&ditto_filter_3=container-for-filter,%D0%B1%D0%B0%D0%BD,7

    т.е. ключевым моментом является то, что ditto_filter задается с индексом ditto_filter_1, ditto_filter_2, ну а modX это всё самостоятельно разруливает. (если я конечно ничего не забыл).

    В случае с аяксом принцип тот же самый, если обратите внимание на скрипт, примерно на этой странице:
    http://guide.florafauna.by/reptile.html
    увидите скрипт, в котором сначала набирается массив параметров, а затем этот массив прогоняется и собирается ссылка, которая потом пойдет в аякс запрос. Вот кусок этого перебора:

    $.each(value, function(k, val){
    url += 'ditto_filter_'+i+'='+key+','+val+',7&';
    i++;
    });

    ОтветитьУдалить
    Ответы
    1. А что за параметр 7 в параметре? url += 'ditto_filter_'+i+'='+key+','+val+',7

      Удалить
    2. Формат: поле,критерий,тип сравнения
      Значение по умолчанию: NULL
      Примечание: Используется формат `поле,критерий,тип сравнения` с запятой между значениями.
      Список фильтров:
      По умолчанию: NULL
      Типы сравнения:
      1 - != (не соответствует критерию)
      2 - == (соответствует критерию)
      3 - < (меньше критерия)
      4 - > (больше критерия)
      5 - <= (меньше или равен критерию)
      6 - >= (больше или равен критерию)
      7 - (не содержит текст критерия)
      8 - (содержит текст критерия)
      9 - case insenstive version of #7
      10 - case insenstive version of #8
      11 - checks leading character of the field
      Может содержать несколько запросов, разделенных глобальным разделителем |.
      Пример:
      &filter=`id,10,2|id,20,2`

      Удалить
  3. интересует первая версия, сделал как вы сказали, почему-то не сработало :(

    ОтветитьУдалить
  4. прикрепляю изображение с кодом - http://joxi.ru/S3k9U_3JTJC4RoTphoU

    ОтветитьУдалить
  5. https://api.jquery.com/load/
    Функция принимает на вход 2 обязательных параметра - это

    url
    Type: String
    A string containing the URL to which the request is sent.

    data
    Type: PlainObject or String
    A plain object or string that is sent to the server with the request.

    Следовательно в вашем случае урл указан верно, а data - нет. То что находится в дате - должно передаваться в строку адреса, т.е. ожидаемый результат - это
    ?ditto_filter_1=kitchen,value_of_radiobutton,7&ditto_filter_2=type-zav,some_another_value,7
    Т.е. исходя из вашего примера необходимо передавать это всё одной строкой, а не через запятую

    $('#result').load('search-result.html', 'ditto_filter_1=kitchen,'+radio+'7&ditto_filter_2=type_zav,'+myType+',7');

    Несколько советов:
    - прежде чем писать скрипт с запросом - попробуйте вбить этот запрос в адресную строку и проверить - тот ли результат вы получаете?
    - если видите что всё похоже сделано верно - попробуйте избавляться от символов в запросах, именах и где еще только можно. Зачастую по непредвиденным обстоятельствам всё работает как нужно.
    - если сомневатесь в строке с фильтрами - вы можете попробовать вывсти её на экран таким образом:
    alert('ditto_filter_1=kitchen,'+radio+'7&ditto_filter_2=type_zav,'+myType+',7');
    после этого скопировать её в браузер и проверить получаете ли вы ожидаемый результат. При копировании не забывайте, что любой запрос начинается со знака "?"

    ОтветитьУдалить
    Ответы
    1. поправочка type_zav через дефиз, согласно вашему примеру:

      $('#result').load('search-result.html', 'ditto_filter_1=kitchen,'+radio+'7&ditto_filter_2=type-zav,'+myType+',7');

      "попробуйте избавляться от символов в запросах"

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

      Удалить
  6. Все получилось)) Спасибо вам огромное! :)

    ОтветитьУдалить
  7. Ответы
    1. Что конкретно не работает?
      1. Проверье работает ли ditto без ничего
      2. Добавляются ли для него фильтры?
      3. Работает ли просто аякс?
      создайте div с id="blabla"
      создайте страницу page1.html, чтобы она была доступна http://localhost/page1.html
      и попробуйте на странице выполнить где-нибудь аякс
      $('#blabla').load('page1.html');

      Рабочий пример:
      http://guide.florafauna.by/reptile.html

      Опишите подробнее проблемы, попробую помочь

      Удалить