2014-12-07 105 views
0

我试图打开一个twitter bootstrap模型来确认删除记录,同时构造一个简单的CRUD应用程序。jquery,django-deleteview:删除表格行记录

这是确认消息以引导模式形式出现在末端的删除按钮,让我们删除选定的行。

<div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog" aria-labelledby="myEditModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button> 
      <h4 class="modal-title" id="myDeleteModalLabel"></h4> 
      </div> 
      <div class="modal-body"> 
      <p>Are you sure you want to delete {{ obj.name }}?</p> 
       <form action="" method="post" id="delete_form" id="form-modal-body"> 

        <div class="modal-footer"> 
         <button class="btn btn-danger btn-small pull-left" data-dismiss="modal"> 
          <i class="icon-remove"></i>Cancel      
         </button> 
         <button type="button" class="btn btn-primary" id="delete_submit">Delete</button> 
        </div> 
       </form> 
      </div> 
     </div> 
     </div> 
    </div> 

而这正是这些记录都列出了在每一行的末尾删除操作:

<tbody id="new-day-row"> 
     {% for day in object_list %} 
     <tr class="odd"> 
      <td id='day-{{day.id}}'>{{ day.name }}</td> 
      <td id='workday-{{day.id}}'>{{ day.work_day }}</td> 
      <td class="td-actions"> 
       <a class="red" href="#" data-toggle="modal" data-target="#myDeleteModal"> 
        <i class="icon-trash bigger-130"></i> 
       </a> 
      </td> 
     </tr> 
     {% endfor %} 
    </tbody> 

一个非常简单的deleteView:

class DayDeleteView(DeleteView): 
    model = Day 

    def get_success_url(self): 
     return reverse('day_home') 

我希望能得到在jquery中触发删除操作的答案。到目前为止,我试图在按钮的click事件上绑定.remove()函数,但没有成功,真的不值得在这里发布。我会非常感谢提供建议和答案。

回答

0

我只是用on

HTML:

<div class="modal-footer" id="{{obj.id}}"> 

的jQuery:

$('#delete_submit').on('click', function() { 
    var id = $('.modal-footer').attr('id'); 
    $.ajax({ 
     url: "your/delete/handler", 
     type: "POST", 
     data: { id : id }, 
    }); 
+0

你细说吧。我对Ajax没有太多的知识。 – catastropic 2014-12-07 09:41:32

+0

类似的东西应该工作(未测试) – 2014-12-07 09:47:49

+0

谢谢!非常有帮助。 – catastropic 2014-12-07 10:02:31