django 1.7引导弹出窗体的简单示例
我看了很多例子,尝试了一些,但似乎没有一个能轻易做到我想要的。我在引导程序中安装了crispy表单。我可以得到模态形式,但不能弹出窗口 这是我想要的 单击属于模型项的按钮 显示带有模型项字段的弹出窗口 我想编辑项目、取消或删除选项 这是我的模型:django 1.7引导弹出窗体的简单示例,django,twitter-bootstrap,popup,Django,Twitter Bootstrap,Popup,我看了很多例子,尝试了一些,但似乎没有一个能轻易做到我想要的。我在引导程序中安装了crispy表单。我可以得到模态形式,但不能弹出窗口 这是我想要的 单击属于模型项的按钮 显示带有模型项字段的弹出窗口 我想编辑项目、取消或删除选项 这是我的模型: import datetime from django.db import models from django.utils import timezone from django.utils.encoding import smart_unicod
import datetime
from django.db import models
from django.utils import timezone
from django.utils.encoding import smart_unicode
from ordered_model.models import OrderedModel
class RequestMessage(OrderedModel):
SANITY = 'SANITY'
STRESS = 'STRESS'
REGRESSION = 'REGRESSION'
TEST_CHOICES = (
(SANITY, SANITY),
(STRESS, STRESS),
(REGRESSION, REGRESSION),
)
PLATFORM_CHOICES = (
(QTP, QTP),
(SELENIUM, SELENIUM),
(JMETER, JMETER),
)
type = models.CharField(max_length=20, choices=TEST_CHOICES,default=SANITY)
platform = models.CharField(max_length=20, choices=PLATFORM_CHOICES, default=JMETER)
tests = models.TextField()
parameters = models.TextField()
source = models.CharField(max_length=30, default='GUI')
queue = models.CharField(max_length=10,default='New')
email = models.EmailField(default='email@example.com')
timestamp = models.DateTimeField(auto_now_add=True, auto_now=False)
updated = models.DateTimeField(auto_now_add=False, auto_now=True)
ip = models.GenericIPAddressField(editable=False, blank=True, null=True)
def __unicode__(self): # __unicode__ on Python 2
return smart_unicode("%s %s %s" % (self.platform, self.type, self.id))
class Meta(OrderedModel.Meta):
pass
这是我的表格
from django import forms
from .models import RequestMessage
class RequestMessageForm(forms.ModelForm):
class Meta:
model = RequestMessage
widgets = {'queue': forms.HiddenInput(),
'source': forms.HiddenInput()}
我的部分视图-这里不显示delete和post方法
class RequestMessageListView(ListView):
model = RequestMessage
template_name = 'article-list.html'
def get_context_data(self, **kwargs):
context = super(RequestMessageListView, self).get_context_data(**kwargs)
return context
我已经看过:
-django fm
-
-django弹出式表单
更新
我正试图用阿比迪博的解决方案来解决这个问题。到目前为止,我能够使屏幕变暗,说明模态是可见的,但它不是
如果我要删除引导,那么我可以很容易地链接到页面,但它会破坏弹出模式的目的
以下是模板项_list.hmtl:
{% extends 'base.html' %}
{% load bootstrap3 %}
{% block extra_js%}
<script src="http://malsup.github.com/jquery.form.js"></script>
{% endblock %}
{% block content %}
<section>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div><!-- /.modal -->
<h1>Items list</h1>
<table class="table table-bordered table-hovered "cellspacing='0'>
<tr>
<th>Item</th>
</tr>
{% for item in object_list %}
<tr>
<td>
<a class="fa fa-pencil" data-toggle="modal" href="{% url 'item_edit' item.id %}" data-target="#modal" title="edit item" data-tooltip>
{% url 'item_edit' item.id %}
</a>
</td>
</tr>
{% endfor %}
</table>
</section>
{% endblock %}
编辑模板项_edit_form.html:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form id="item_update_form" method='post' class="form" role="form" action="/{% url 'item_edit' item.id %}/">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" id="myModalLabel">Item {{ item.id }}</h4>
</div>
<div class="modal-body">
{% csrf_token %}
{{ form.non_field_errors }}
<div class="form-group">
{% for field in form %}
<div class="form-group">
{% if field.errors %}
<ul class="form-errors">
{% for error in field.errors %}
<li><span class="fa fa-exclamation-triangle"></span> {{ error|escape }}</li>
{% endfor %}
</ul>
{% endif %}
{{ field.label_tag }} {{ field }}
{% if field.help_text %}<div class="form-helptext">{{ field.help_text }}</div>{% endif %}
</div>
{% endfor %}
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="annulla" />
<input type="submit" class="btn btn-primary" value="save" style="margin-bottom: 5px;" />
</div>
</form>
<script>
jQuery('.modal-content .calendar').datepicker({ dateFormat: "yy-mm-dd" });
var form_options = {
target: '#modal',
success: function() { }
}
$('#item_update_form').ajaxForm(form_options);
</script>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
以及成功项目_edit _form _success.html:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Hmmmmmmm</h4>
</div>
<div class="modal-body">
<p>Yeah!</p>
<script>
setTimeout(function() { jQuery('#modal').modal('hide'); }, 1000);
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal'); });
</script>
</div>
<div class="modal-footer">
</div>
</div>
<!-- /.modal-content -->
</div>
表单未与视图链接。您如何在模板中显示表单?我有另一种方法来添加链接表单的请求。requestMessage=RequestMessageFormrequest.POST或如果requestMessage.is\u有效则为None:保存\u it=requestMessage.savecommit=False保存\u it.save messages.successrequest,'您的请求已添加到队列'requestMessage.full\u clean return HttpResponseRedirect'/article list'return render\u to\u ResponseAd\u Request.html,locals,context\u instance=RequestContextrequest