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

这个问题有很多可动的部分,但是如果你对它的任何部分有任何见解,那将是值得赞赏的.

我想建立一个按照预期行事的反馈表.当用户单击页面右下角的反馈按钮时,它会启动引导模式.模态有一个 django crispy形式,提交或返回按下提交按钮时无效的字段.

首先,我有我的反馈按钮：

{% 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',Field('sender',placeholder='Sender',),)
        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,我该如何进行错误检查
形成？
>有没有更好的方法来显示香脆的形式
bootstrap模式？

解决方法

我找到了一个 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>

和

{％load 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提交数据,并在需要时返回错误检查.
表格在模态中表现得相当好.

我还有一些问题.我需要找出一种方法来压制脆皮形式的传说,我需要找到一种方法来显示模态脆皮形式,而不是干扰网站上其他地方出现的另一种脆皮形式.

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

解决方法

相关文章