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

13z8s7eq  于 2023-10-14  发布在  Bootstrap
关注(0)|答案(3)|浏览(132)

有相当多的移动部分这个问题,但如果你有任何洞察力的任何一块,这将是赞赏。
我想建立一个反馈形式,作为一个人会期望。当用户单击页面右下角的反馈按钮时,它将启动一个引导模式。modal有一个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', 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']

我试图在crispy表单中省略图例,因为如果我包含它,模态似乎有两个表单标题。但是在脆脆的表单布局中省略图例会导致字段出现无序。
所以我有几个问题:
1.总的来说,我这样做是正确的吗?
1.如果我把模态的提交按钮挂接到AJAX,我该如何对表单进行错误检查?
1.有没有更好的方法在引导模式中显示简洁的表单?

t30tvxxf

t30tvxxf1#

我发现了一个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提交数据,并在需要时返回错误检查。表单在模态中显示得相当好。
我还有几个问题没解决。我需要找到一种方法来抑制crispy表单中的图例,我需要找到一种方法来显示模态crispy表单,而不干扰出现在站点其他地方的另一个crispy表单。

7xllpg7q

7xllpg7q2#

我在一个相关的问题上回答了一个类似的问题。
https://stackoverflow.com/a/12905016/1406860
这将使您获得除了返回错误之外的所有内容。
我建议进行验证并创建一个“错误”:字典中的“问题列表”条目被反馈回来,并在AJAX成功中检查是否关闭模态(因为没有错误)或适当显示错误。
京东

3okqufwl

3okqufwl3#

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);

}

相关问题