Видеокурс October CMS

В этом видео мы научимся работать с Ajax запросами средствами October CMS.

Для того чтобы мы имели такую возможность нам на странице потребуется подключить библиотеку CMS для работы с Ajax.
Делается это путем добавление строки:

1	`{% 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>

Теперь разберем подробнее наш код.

1	`data-request="onTest"`

Задаем имя Ajax-функции которая будет проводить необходимые вычисления. То есть это то куда мы будем обращаться чтобы получить необходимые данные. С помощью формы мы будем передавать значения в функцию onTest и соответственно будем принимать значения из этой функции.

1	`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:

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;
    }
}

#6 October CMS - работа с AJAX (Создание Калькулятора)

Видеокурс October CMS

С этим так же покупают:

Добавить отзыв (пожелание, комментарий)