Add/remove nested fields dynamically without links
dfyx opened this issue · 5 comments
It would be cool if you could provide an easy way to add and remove fields directly through JS. A while ago I tried modifying nested_form to support this but ran into some problems related to rendering the fields.
I have a particular use case for this. I'm developing a management system for small conventions where the guests do certain chores like cooking and washing the dishes. For every day I want to enter how many people are needed for a given chore (on the first day there's no need to wash the dishes in the morning, on the last day there's no dinner).
So my idea was to have a change handler for the convention's begins_at and ends_at input fields and manipulate the form accordingly. Sadly I haven't found a good way to do that yet.
Thanks for suggesting, I'll work on it.
Here is the "add button" code:
<a class="add_fields" data-association-insertion-template="<div class="nested-fields">
<div class="field">
<label class="string optional" for="assignment_tasks_attributes_new_tasks_task">Task</label><br>
<input id="assignment_tasks_attributes_new_tasks_name" name="assignment[tasks_attributes][new_tasks][name]" type="text" />
<a class="remove_fields dynamic" href="#">Delete</a>
</div>
</div>" data-association="tasks" href="#">Add a Task</a>The problem is that the template is inside the button, we need to find some way to store it in another place to be able to remove the button.
I don't quite understand what is the desired functionality here :( . I could also help if someone explains it.
I want to trigger the functionality of add/remove links from arbitrary JavaScript like for example a change handler. (without having the actual links in my markup)