Trying to create a component under October CMS which create a ToDo list (Look at this video). Adding an item works fine but now I'm trying to set up and Ajax handler to delete one element when a button is clicked.
Thi is the html code:
<form>
<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"
data-request="{{ __SELF__ }}::onAddItem"
data-request-success="$('#inputItem').val('')"
data-request-update="'{{ __SELF__ }}::tasks': '#result'"
>Add</button>
</span>
</div>
<ul class="list-group" id="result">
{% partial __SELF__ ~ '::tasks' tasks=__SELF__.tasks removeId=__SELF__.removeId %}
</ul>
</div>
</div>
<form>
and the code of the component (named tasks) that render the list of tasks:
{% if tasks|length > 0 %}
{% for i in 0..tasks|length-1 %}
<li class="list-group-item">
{{ tasks[i] }}
<button class="close pull-right"
data request="{{ __SELF__ }}::onRemoveItem"
data-request-success="console.log(data)"
>
×
</button>
</li>
{% endfor %}
{% endif %}
Lastly the code of the handler (don't do so much):
public function onRemoveItem()
{
return [
'Name' => 'Federico';
];
}
Now, I set up the handler onRemoveItem
putting its data-request in a button and, as explained on this page, clicking the button should start the handler's execution but this don't happen, while all works correctly in the Add button that insert the tasks in the database.
Can someone explain me what I'm doing wrong? (In case someone want to see the page the link is http://afterlife.ddns.net/
EDIT:
Solved, I had to link the framework js in the layout file