这是我正在制作的todo应用程序。创建,更新和销毁操作已被ajaxified。创建任务后,您可以在编辑表单中设置日期。问题是当我创建2个或更多任务并更新它们时,编辑文本字段中的所有值都会被切换。继承人截屏
我的任务部分:
<div class= 'task <%= task.priority %>' id='user_task_<%=task.id%>' >
<span class='row row-fluid'>
<span class='col-xs-9'>
<% if task.due_date ==nil %>
<h5 class='small'>Due Date</h5>
<% else %>
<%= datetime_format(task.due_date) %>
<% end %>
</span>
<%=link_to(edit_task_path(task),remote:'true') do %>
<span class='col-xs-1.7'>
<span id='edit_<%=task.id%>' class= 'glyphicon glyphicon-pencil'></span>
</span>
<% end %>
<%=link_to task, method:'delete', remote:'true', data:{confirm:'Are you sure?'} do %>
<span class='col-xs-1.3'>
<span id='edit_<%=task.id%>' class= 'glyphicon glyphicon-trash'></span>
</span>
<% end %>
</span>
<br>
<span class='row row-fluid'>
<div class= 'tasks-description col-xs-12'>
<%= task.description %>
<span class= 'col-xs-12 edit_popover <%=task.priority %>' id= 'edit<%=task.id%>'>
<%= render 'edit_form', task: task %>
</span>
</div>
</span>
</div>
这是我的编辑部分
<%= form_for task, method:'put', remote:'true' do|f| %>
<div class='form-group'>
<%= f.text_field :description, placeholder: 'create a task', value: task.description%>
</div>
<div class='form-group'>
<%= f.text_field :due_date, id:"'due_date_'#{task.id}", class:'date', placeholder: 'due date' %> </div>
<hr>
<div class='form-group'>
<%= button_tag(type:'patch', class:"btn btn-default btn-xs edit-btn", id:'update-btn') do %>
<span>Save and Close</span>
</div>
<% end %>
<% end %>
<script>
$('.date').each(function(){
$(this).pickadate();
});
</script>
这是我的update.js.erb:
$('#user_task_<%=@task.id%>').replaceWith("<%= j render 'tasks',task:@task %>")
当我检查元素时,值应该是它应该的。但显然在文本字段中并非如此。
更新:我认为这肯定是一个jquery问题。当我从我的表单中删除remote:true时,问题不会发生。那么我应该如何用jquery正确替换更新的内容?