Есть форма в которой мы выбираем критерии, по которым будут фильтроваться документы 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>
Немного из учебника:
Синтаксис:
селектор выбирает элемент, в котором будет отображен результат AJAX запроса.
url адрес, на который будет отправлен AJAX запрос.
данные является необязательным параметром. Данные, которые будут переданы вместе с запросом.
функция является необязательным параметром. Функция, которая будет вызвана после выполнения запроса.
Постараюсь сделать минимум украшательств, чтобы просто объяснить суть.
Создадим 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,данные,функция)
url адрес, на который будет отправлен AJAX запрос.
данные является необязательным параметром. Данные, которые будут переданы вместе с запросом.
функция является необязательным параметром. Функция, которая будет вызвана после выполнения запроса.
