OctoberCMS form request not submitted - php

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">×</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 %}