AJAX feedback form using django hard forms in Bootstrap Modal

Question

There are many moving parts to this question, but if you have any idea of ​​any part of it, it will be appreciated.

I want to create a feedback form that will act as you would expect. When the user clicks the feedback button in the lower right corner of the page, he starts the modem for initial loading. The modal has a crispy django form that sends or returns fields that are invalid when the submit button is clicked.

Firstly, I have a feedback button:

{% 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> 

Next I have my form:

 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'] 

I tried to omit the legend in a crispy form, because if I turn it on, the modality seems to have two forms. But when skipping the legend in the layout with a crystal shape appeared fields that look inappropriate.

So, I have a few questions left:

• All in all, am I going to do it right?
• If I connect a modal submit button to AJAX, how do I contact a form for error checking?
• Is there a better way to display a crispy shape in bootstrap modal?

Answer 1

I found a partial solution on this page . In the base template, I created a button and a form:

 <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 %} 

Then I created two forms of feedback

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

and

{% 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> 

I broke the feedback forms into two, because the bootstrap-ajax.js file, which I use from the link above, replaces the html from one template. If I use a combined feedback form, it will have class = "modal hiding". I need it to have class = "modal", so if the form is updated with errors, the modality does not disappear.

In my opinion, I have

 @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") 

And then in the bootstrap-ajax.js file (again from the link above), I made a few changes. In the processData function, I defined:

 var $el_parent = $el.parent(); 

and I added

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

This is not yet fully functional, because the success message immediately disappears with the modal. I want the modal to display the message and disappear after 3 seconds. I haven’t figured it out yet, but now it works quite well.

I am still doing music, but that concerns most of my questions:

It sends data using AJAX and returns error checking if necessary. The form is well displayed in modal mode.

I have a few remaining issues. I need to figure out a way to suppress a legend in a crispy shape, and I need to find a way to display a modal crispy shape and not interfere with another crispy shape that appears elsewhere on the site.

Answer 2

I answered a similar question on this.

fooobar.com/questions/1440312 / ...

This will give you everything except return errors.

I would suggest making a check and creating "errors": a "List of problems" entry in the dictionary that was returned back and checking that AJAX succeeded according to whether to close the modal (since there was no error) or display errors as necessary .

Jd