Django Modal未加载

时间:2017-06-11 19:35:22

标签: javascript jquery python django twitter-bootstrap

有人问过这个问题same exact question,但它没有帮助我。我尝试实现提示,但我的模态仍未加载到我的django网站中。 (注意:我是一名中级程序员,但不是很好。不熟悉Javascript,但已经在django开发了2年。)

我正在尝试将商品添加到购物清单中。在购物清单页面上,我希望用户能够点击"添加商品"并以模态弹出添加项目表单。

我已经研究并查看了许多堆栈溢出资源和其他资源,但找不到解决方案。它已经进行了大约4-5周的研究。

根据我使用的代码组合,有一半时间模式弹出没有任何形式,一半时间灰色网格覆盖我的屏幕没有模态或形式。在任何一种情况下,我的脆形式(和django形式)都不会在模态中呈现。

我假设我的表单有效,因为直接在html中我的表单将呈现并完美地工作,没有模态。

add_item_test.html

 <div class="modal hide" id="itemModal">
  <form class="well" method="post" action="/send_add_item/">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal">×</button>
     <h3>Add Item</h3>
   </div>
   <div class="modal-body">
        {% csrf_token %}
        {{form|crispy}}
   </div>
   <div class="modal-footer">
        <input class="btn btn-primary" type="submit" value="Save" />
        <input name="cancel" class="btn" type="submit" value="Cancel"/>
   </div>
  </form>
 </div>

list.html

<section>
   <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   </div>

  <a class="btn btn-primary" data-toggle="modal" href="{% url 'add_item' %}" data-target="#modal" title="add item" data-tooltip>Add Item</a>


</section>

<script>
 $(".item_add_form").click(function(ev) { 
    ev.preventDefault(); 
    var url = $(this).data("form"); 
    $("itemModal").load(url, function() { 
        $(this).modal('show'); 
    });
    return false; 
});

 $('.item_add_form').live('submit', function() {
    $.ajax({
        type: $(this).attr('method'),
        url: this.action,
        data: $(this).serialize(),
        context: this,
        success: function(data, status) {
            $('itemModal').html(data);
        }
    });
    return false;
});
</script>

views.py

def add_item(request):
  list_name = get_user_list(request.user.id)
  userprofile = get_user_profile(request.user)

  items = ItemModel.objects.filter(list_name=list_name).order_by('-name__iexact')

  context = {
    'userprofile':userprofile,
    'list_name':list_name,
    'items':items,
  }
  form = ExampleForm(request.POST, request.FILES)
  context_dict = {}

  form = ItemModelForm()
  form.fields['lists'].queryset = ListModel.objects.filter(user=request.user)

  context_dict['form'] = form
  return render(request, 'ribbon/add_item_test.html', context_dict)

urls.py

url(r'^add_item/$', views.add_item, name='add_item'),
url(r'^send_add_item/$', views.send_add_item),

0 个答案:

没有答案