Видеокурс: Основы OctoberCMS #6 работа с AJAX

Содержится в разделе Документация
Опубликована: 2 years ago

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

В этом видео мы научимся работать с 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:

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


Видео курс от Дмитрия Афанасьева. Линк на страничку видеокурса: http://simple-training.com/category/october-cms/

Написать ответ
Просмотров: 2774

Добавить комментарий

Необходимо авторизироваться для того что б добавить комментарий.

Категории