OctoberCMS: How to remove an item from todo list? - php

Question

I was following this tutorial to learn how to create a TODO list. But it ends without explaining how to remove an item from the list. Could somebody please post a sample code for it?
Here is the content of Todo\default.htm:
<script type="text/javascript" src="{{ ['assets/vendor/jquery.min.js']|theme }}"></script>
{% framework %}
<form
data-request="{{ __SELF__ }}::onAddItem"
data-request-success="$('#inputItem').val('')"
data-request-update="'{{ __SELF__ }}::tasks': '#result'"
>
<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">
{% partial __SELF__ ~ '::tasks' tasks = __SELF__.tasks %}
</ul>
</div>
</form>
And the content of tasks.htm partial:
{% for task in tasks %}
<li class="list-group-item">
{{ task }}
<button class="close pull-right">×</button>
</li>
{% endfor %}
I need to get the [X] button which removes a single task from the todo list working. My guess is that I should go with this:
{% for task in tasks %}
<li class="list-group-item">
{{ task }}
<button class="close pull-right" data-request="{{ __SELF__ }}::onDeleteItem">×</button>
</li>
{% endfor %}
I don't know though how to pass the id of each item to the onDeleteItem function.

Answer 1

Following is the code for default.htm
<form
data-request="{{ __SELF__ }}::onAddItem"
data-request-update="'{{ __SELF__ }}::tasks': '#result'"
data-request-success="$('#input-item').val('')"
>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">To Do List</h3>
</div>
<div class="panel-body">
<div class="input-group">
<input type="text" id="input-item" class="form-control" value="" name="task" placeholder="What needs to be done?">
<span class="input-group-btn">
<button type="submit" class="btn btn btn-primary" data-attach-loading>Add</button>
</span>
</div>
</div>
<ul class="list-group" id="result">
{% partial __SELF__ ~ '::tasks' tasks = __SELF__.tasks %}
</ul>
</div>
Following is the code in Todo.php
public function onRun(){
//$this->tasks=Task::lists('title');
$this->tasks=Task::all();
}
public function onAddItem()
{
$taskName = post('task');
$task=new Task;
$task->title=$taskName;
$task->save();
$this->page['tasks']=Task::all();
}
public function onDeleteItem()
{
$id = post('id');
$task=Task::find($id);
$task->delete($id);
$this->page['tasks']=Task::all();
}
and following is the code for tasks.php partial
{% for task in tasks %}
<ul class="list-group">
<li class="list-group-item">{{task.title}}
<button type="button" class="close pull-right"
data-request="{{ __SELF__ }}::onDeleteItem"
data-request-update="'{{ __SELF__ }}::tasks': '#result'"
data-request-data="id:'{{task.id}}'"
>×</button>
</li>
</ul>
{% endfor %}
It works perfectly for me in case of any problem let me inform

Answer 2

The [X] Button should use:
data-request to tell the php ajax handler, which procedure to call
data-request-data to tell the php ajax handler, which data to use
data-request-update to tell the javascript ajax handler, which partial to update
<button
data-request="onDeleteItem"
data-request-data="deleteItem: '{{ task }}'"
data-request-update="'{{__SELF__}}::tasks': '#result'"
class="close pull-right">
&times
</button>
...and you will find the content of the task variable with
$taskToDelete=post('deleteItem');