Видеокурс October CMS
В этом видео мы научимся работать с Ajax запросами средствами October CMS.
Для того чтобы мы имели такую возможность нам на странице потребуется подключить библиотеку CMS для работы с Ajax.
Делается это путем добавление строки:
{% framework %}
Лучше всего добавить эту строку в наш layout. Открываем для редактирования наш тестовый test_layout и добавляем данную строку.Итого наш лайаут будет иметь вид:
<!DOCTYPE html>
<html>
<head>
<title>October CMS - test layout</title>
<link href="{{ [
'assets/css/theme.css'
]|theme }}" rel="stylesheet">
</head>
<body>
<header class="container">
<h1>{{ this.page.title }} <small>Page header</small></h1>
</header>
<section>
<div class="container">
{% page %}
</div>
</section>
<footer>
<hr>
<p>Footer</p>
</footer>
<script src="{{ [
'assets/javascript/jquery.js'
]|theme }}"></script>
{% framework %}
</body>
</html>
Либо, если вам таковая возможность повсеместно не нужна, то эту строку можно добавить лишь на нужных страницах сайта.
Для изучения Ajax возможностей October CMS. Создадим приложение Калькулятор.
Создадим новую страницу и назовем её calc . URL для нее будет следующим /calc
Запишем этой странице следующий код:
<h3>AJAX Калькулятор</h3>
<form class="form-inline"
data-request="onTest"
data-request-update="calcres: '#result'">
<input type="text" name="value1" value="" class="form-control"
style="width:100px;">
<select name="operation" class="form-control"
style="width:70px">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" name="value2" value="" class="form-control" style="
width:100px;">
<button type="submit" class="btn btn-primary">=</button>
</form>
<h3>Result:</h3>
<div id="result">
{% partial 'calcres' %}
</div>
Теперь разберем подробнее наш код.
data-request="onTest"
Задаем имя Ajax-функции которая будет проводить необходимые вычисления. То есть это то куда мы будем обращаться чтобы получить необходимые данные. С помощью формы мы будем передавать значения в функцию onTest и соответственно будем принимать значения из этой функции.
data-request-update="calcres: '#result'"
В data-request-update мы указываем какой html-блок будем обновлять данными полученными из data-request.
calcres - имя Partial и #result - id блока
Создадим partial calcres.
{% if answer %}
<span class="lead">
Res = <span class="label label-success">{{ answer }}</span>
</span>
{% else %}
<span class="text-muted">
Click the "=" button
</span>
{% endif %}
Теперь создадим функцию onTest
Переходим на страницу calc и обратим внимание на окно редактирование кода.
По-умолчанию мы находимся на вкладке Markup - здесь мы пишем наш html код.
PHP код мы будем писать на вкладке Code:
PHP код мы будем писать на вкладке Code:
function onTest(){
$value1 = post('value1');
$value2 = post('value2');
$operation = post('operation');
switch($operation) {
case '+':
$this['answer'] = $value1 + $value2;
break;
case '-':
$this['answer'] = $value1 - $value2;
break;
case '*':
$this['answer'] = $value1 * $value2;
break;
case '/':
$this['answer'] = $value1 / $value2;
break;
}
}
