Alterator/class test and btn

Очень часто необходимо получить от пользователя данные и передать их backend-у. В данном примере мы рассмотрим как это сделать при помощи поля input типа text и обычной кнопки.

HTML

Пример нашего html-кода

<form method="POST">
    <table width="100%">
    <tr>
        <td align="left">
            <span translate="_">New Data</span>
        </td>
    </tr>
    <tr>
        <td >
            <hr />
        </td>
    </tr>
        <tr>
            <td >
                    <span translate="_">New Data:</span>
             
                    <input type="text" class="text" name="newdata"/>
             
                    <input type="button" name="datadd" value="Create/Add" class="btn"/>
        </td>
    </tr>
    </table>
</form>

В соответствии с этим кодом, у нас будет поле input типа text и уникальным атрибутом name newdata (name -- обязательный атрибут). Так же имеем кнопку (input class=btn) с надписью "Create/Add" уникальный атрибут name datadd.

При нажатии на копку "Create/Add" значение в поле newdata должно быть передано нашему серверу и далее до backend-а.

AJAX

Наш модуль имеет uri/url /mySuper-module

(define-module (ui mySuper-module ajax)
    :use-module (alterator woo)
    :use-module (alterator ajax)
    :export (init))

(define (ui-datadd)
  (woo-new "/mySuper-module" 'toBackendData (form-value "newdata"))
)


(define (init)
  (form-bind "datadd" "click" ui-datadd)
)

В определении функции init мы осуществляем привязку элемента, действия и функции-обработчик (form-bind "datadd" "click" ui-datadd): при нажатии ("click") на объект с именем datadd (наша кнопка) вызвать функцию-обработчик ui-datadd.

В свою очередь функция ui-datadd вызывает действие new (woo-new) с параметром toBackendData и значением, полученным из поля с уникальным именем newdata (form-value "newdata"). Это аналогично обращению к backend-у через alterator-cmdline вида alterator-cmdline /mySuper-module action new toBackendData "sometext". К стандартным действия list, type, write, read, new delete, которым соответствуют функции woo-list, woo-type, woo-write, woo-read, woo-new, woo-delete, можно добавить любое свое, тогда вызов несколько измениться. К примеру пусть это будет действие addData. Тогда заменим вызов woo-new на следующий (woo "addData" "/mySuper-module" 'toBackendData (form-value "newdata"))


BACKEND