在 Bootstrap Modal 中使用 django 清晰表单的 AJAX 反馈表单

Posted

技术标签:

【中文标题】在 Bootstrap Modal 中使用 django 清晰表单的 AJAX 反馈表单【英文标题】：AJAX feedback form using django crispy forms in Bootstrap Modal 【发布时间】：2012-10-07 19:49:45 【问题描述】：

这个问题有很多变化的部分，但如果您对其中任何部分有任何见解，我们将不胜感激。

我想建立一个符合预期的反馈表。当用户点击页面右下角的反馈按钮时，它会启动一个引导模式。 modal 有一个 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']

我试图省略脆表单中的图例，因为如果我包含它，模态似乎有两个表单标题。但是在清晰的表单布局中省略图例会导致字段出现乱序。

所以我有几个问题：

    总的来说，我的做法是否正确？ 如果我将模态的提交按钮连接到 AJAX，我该如何进行错误检查 形式？ 有没有更好的方法在 引导模式？

【问题讨论】：

【参考方案1】：

我找到了partial solution on this page。在我的基本模板中，我创建了按钮和表单：

<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 提交数据，并在需要时返回错误检查。 表单在模态中显示得相当好。

我还有几个问题。我需要找到一种方法来抑制以脆皮形式显示的图例，并且我需要找到一种方法来显示模态脆皮形式，并且不会干扰网站上其他地方出现的另一种脆皮形式。

【讨论】：

【参考方案2】：

我在相关问题上回答了与此类似的问题。

https://***.com/a/12905016/1406860

这将为您提供除错误返回之外的所有内容。

我建议进行验证并在反馈的字典中创建一个“错误”：“问题列表”条目，并根据是否关闭模式在 AJAX 成功中检查这一点（因为没有错误）或酌情显示错误。

京东

【讨论】：

以上是关于在 Bootstrap Modal 中使用 django 清晰表单的 AJAX 反馈表单的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Angular 1.5 中将 Angular 组件与 ui.bootstrap.modal 一起使用？

Bootstrap modal 可在 Firefox 中使用，但不能在 Chrome 中使用

Bootstrap 4 Modal出现背景角2

python测试开发django-187.Bootstrap模态框(modal)如何在关闭时触发事件

yii2中怎么使用Bootstrap的模态弹出框modal

Bootstrap Modal 立即消失