这个问题有很多移动部分,但如果您对其中的任何部分有任何见解,我们将不胜感激。
我想建立一个符合人们期望的反馈表。当用户单击页面右下角的反馈按钮时,它会启动引导模式。该模式有一个 django 脆皮表单,可以提交或返回按下提交按钮时无效的字段。
首先,我有反馈按钮:
{% load crispy_forms_tags %}
.feedback-button {
position: fixed;
bottom: 0;
right: 30px;
}
<div class='feedback-button'>
<a class="btn btn-info" href="#feedbackModal" data-toggle="modal" title="Leave feedback" target="_blank">
<i class="icon-comment icon-white"></i>
Leave feedback
</a>
</div>
<div class="modal hide" id="feedbackModal" tabindex="-1" role="dialog" aria-labelledby="feedbackModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="feedbackModalLabel">Contact Form</h3>
</div>
<div class="modal-body">
{% crispy feedback_form feedback_form.helper %}
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Submit</button>
</div>
</div>
接下来,我有我的表格:
class Feedback(models.Model):
creation_date = models.DateTimeField("Creation Date", default=datetime.now)
topic = models.CharField("Topic", choices = TOPIC_CHOICES, max_length=50)
subject = models.CharField("Subject", max_length=100)
message = models.TextField("Message", blank=True)
sender = models.CharField("Sender", max_length=50, blank=True, null=True)
def __unicode__(self):
return "%s - %s" % (self.subject, self.creation_date)
class Meta:
ordering = ["creation_date"]
verbose_name = "Feedback"
verbose_name_plural = "Feedback"
class Crispy_ContactForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
self.helper = FormHelper()
self.helper.layout = Layout(
Fieldset(
Field('topic', placeholder='Topic', css_class='input-medium'),
Field('subject', placeholder='Subject', css_class='input-xlarge'),
Field('message', placeholder='Message', rows='5', css_class='input-xlarge'),
Field('sender', placeholder='Sender', css_class='input-xlarge'),
),
)
self.helper.form_id = 'id-Crispy_ContactForm'
self.helper.form_method = 'post'
super(Crispy_ContactForm, self).__init__(*args, **kwargs)
class Meta:
model = Feedback
exclude = ['creation_date']
我试图省略脆皮表单中的图例,因为如果我包含它,模态似乎有两个表单标题。但在简洁的表单布局中省略图例会导致字段出现乱序。
所以我还有几个问题:
我在此页面上找到了部分解决方案。在我的基本模板中,我创建了按钮和表单:
<div class='feedback-button'><a class="btn btn-info" href="#feedbackModal" data-toggle="modal" title="Leave feedback" target="_blank"><i class="icon-comment icon-white"></i> Leave feedback</a></div>
{% include "_feedback_form.html" with feedback_form=feedback_form %}
然后我创建了两个反馈表
<div class="modal hide" id="feedbackModal" tabindex="-1" role="dialog" aria-labelledby="feedbackModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="feedbackModalLabel">Contact Form</h3>
</div>
{% include "_feedback_form_two.html" with feedback_form=feedback_form %}
</div>
和
{%加载crispy_forms_tags%}
<form action="{% url feedback %}" method="post" id="id-Crispy_ContactForm" class="form ajax" data-replace="#id-Crispy_ContactForm">
<div class="modal-body">
{% crispy feedback_form %}
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<input type="submit" name="submit_feedback" value="Submit" class="btn btn-primary" id="submit-id-submit_feedback" />
</div>
</form>
我将反馈表单一分为二,因为我从上面的链接中利用的 bootstrap-ajax.js 文件替换了一个模板中的 html。如果我使用组合反馈表,它将具有 class="modal hide"。我需要它只有 class="modal",这样如果表单刷新时出现错误,模式不会消失。
在我看来,我有
@login_required
def feedback_ajax(request):
feedback_form = Crispy_ContactForm(request.POST)
dismiss_modal = False
if feedback_form.is_valid():
message = feedback_form.save()
feedback_form = Crispy_ContactForm()
dismiss_modal = True
data = {
"html": render_to_string("_feedback_form_two.html", {
"feedback_form": feedback_form
}, context_instance=RequestContext(request)),
"dismiss_modal": dismiss_modal
}
return HttpResponse(json.dumps(data), mimetype="application/json")
然后在 bootstrap-ajax.js 文件中(同样来自上面的链接),我做了一些更改。在processData函数中,我定义了:
var $el_parent = $el.parent();
我添加了
if (data.dismiss_modal) {
var msg = '<div class="alert alert-success" id="' + $(replace_selector).attr('id') + '">Feedback Submitted</div>'
$(replace_selector).replaceWith(msg);
$el_parent.modal('hide');
$(replace_selector).replaceWith(data.html);
}
这还没有完全发挥作用,因为成功消息会立即随模式消失。我希望模态显示消息并在大约 3 秒后消失。还没有弄清楚这一点,但目前效果很好。
我仍在修补,但这解决了我的大部分问题:
它使用 AJAX 提交数据,并在需要时返回并进行错误检查。 该表单在模态中显示得相当好。
我还有一些遗留问题。我需要找到一种方法来抑制脆皮形式的图例,并且我需要找到一种方法来显示模式脆皮形式,并且不干扰网站其他地方出现的另一种脆皮形式。
我在相关问题上回答了与此类似的问题。
https://stackoverflow.com/a/12905016/1406860
这将为您提供除错误返回之外的所有内容。
我建议进行验证并在反馈的字典中创建一个“错误”:“问题列表”条目,并在 AJAX 成功中检查是否关闭模式(因为没有错误)或酌情显示错误。
京东
if (data.dismiss_modal) {
var msg = '<div class="alert alert-success" id="' + $(replace_selector).attr('id') + '">Feedback Submitted</div>'
$(replace_selector).replaceWith(msg);
$el_parent.modal('hide');
$(replace_selector).replaceWith(data.html);
}