在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'] 我试图以酥脆的形式省略图例,因为如果我包含它,模态似乎有两个表单标题.但是,在酥脆的表单布局中省略了图例会导致字段出现乱序. 所以我留下了几个问题: >总的来说,我是以正确的方式来做这件事的吗? 解决方法
我找到了一个
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提交数据,并在需要时返回错误检查. 我还有一些问题.我需要找出一种方法来压制脆皮形式的传说,我需要找到一种方法来显示模态脆皮形式,而不是干扰网站上其他地方出现的另一种脆皮形式. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |