OctoberCMS表单请求未提交

Question

I'm following this tutorial to create a simple OctoberCMS plugin. Here is content of /acme/demo/components/todo/default.htm page:

{% set tasks = __SELF__.tasks %}

<form data-request="{{ __SELF__ }}::onAddItem" data-request-success="$('#inputItem').val('success')">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Tasks assigned to: {{__SELF__.name}} </h3>
        </div>
        <div class="panel-body">
            <div class="input-group">
                <input name="task" type="text" id="inputItem" class="form-control" value=""/>
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-primary">Add</button>
                </span>
            </div>  
        </div>
        <ul class="list-group" id="result">
            {% for task in tasks %}
                <li class="list-group-item">
                    {{ task }}
                    <button class="close pull-right">&times;</button>
                </li>
            {% endfor %}
        </ul>
    </div>
</form>

And here is the content of /acme/demo/components/Todo.php:

<?php namespace Acme\Demo\Components;

use Cms\Classes\ComponentBase;
use Acme\Demo\Models\Task; 

class Todo extends ComponentBase
{
    /**
    * This is a person's name.
    * This variable will be available in the page as a twig variable
    * @var string
    */
    public $name;
    /**
    * The collection of tasks.
    * @var array
    */
    public $tasks;

    public function componentDetails()
    {
        return [
            'name'        => 'Todo Component',
            'description' => 'A database driven TODO list'
        ];
    }

    public function defineProperties()
    {
        return [];
    }

    public function init()
    {
        // This will execute when the component is first initialized, including AJAX events.
    }

    public function onRun()
    {
        $this->name = 'Meysam'; 
        $this->tasks = Task::lists('title');
    }

    public function onAddItem()
    {
        $taskName = post('task');
        $task = new Task();
        $task->title = $taskName;
        $task->save();
    }

}

The problem is that onAddItem is never called. It seems that the form is not submitted properly when I add a new item. Does anybody know how I can fix this? I thought maybe the ajax libraries are missing, so I included {% framework %} as well, which again didn't help:

{% set tasks = __SELF__.tasks %}
{% framework %}

<form data-request="{{ __SELF__ }}::onAddItem" data-request-success="$('#inputItem').val('success')">

Please note that my model is working and $this->tasks = Task::lists('title'); returns the list of tasks.

Answer 1

The problem was that I should have included the jquery file as well:

<script src="{{ [
    'assets/javascript/jquery.js',
]|theme }}"></script>

{% framework %}