This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.
Meysam
I was following this tutorial (https://vimeo.com/104896353) 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.
Last updated
1-2 of 2