This post has been de-listed
It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.
Hello friends. I am trying to render a django model form inside a Bootstrap modal body. This modal is triggered from one of the nav-items in the Navbar. So the idea is that this modal can be triggered from any view. I am using JQuey and AJAX to submit this form. I am not sure what I am doing wrong as the modal triggers successfully but it does not render the form in the body. It is always empty.
When I click on the 'Contact' link from the navbar, it should trigger a bootstrap modal containing a django form. Once I fill the form and click on the 'Save' button in the form, it should save the data in the database. I have been searching a lot on how to make this work.
I have created an app named 'contacts' which has all the code. Below is the example model and required views and templates I have created. I know the solution is not very complex but I am not sure where I am wrong and how to fix this. I am reaching out the django community to guide me on how to make the form render successfully with a bootstrap modal and then subsequently save the data to db.
contacts/models.py:
class Contact(models.Model):
name = models.CharField(max_length=100)
email = models.EmailField(max_length=100)
subject = models.CharField(max_length=100)
message = models.TextField()
def __str__(self):
return self.subject
contacts/urls.py:
urlpatterns = [
path('', index, name='index'),
path('dummy/', dummy_view, name='dummy-view'),
path('contact/', contact_view, name='contact-view'),
]
contacts/forms.py:
class ContactForm(forms.ModelForm):
class Meta:
model = Contact
fields = ['name', 'email', 'subject', 'message']
contacts/views.py:
def contact_view(request):
if request.method == 'POST':
form = ContactForm(request.POST)
if form.is_valid():
form.save()
return redirect('index')
else:
form = ContactForm()
context = {'form': form}
return render(request, 'contacts/contact_page.html', context)
templates/base.html: (I have shown only the required details below)
<!doctype html>
<html lang="en">
<head>
<!-- This is the one which triggers the modal -->
<a class="nav-item nav-link" id='contact-view' type="button" href="{% url 'contact-view' %} data-toggle="modal" data-target="#contactModal">
Contact
</a>
</head>
<body>
<!-- This is the html containing modal details -->
{% include 'contacts/contact_page.html' %}
<script src="{% static 'js/contactApp.js'%}"></script>
</body>
</html>
templates/contacts/contact_page.html:
<div>
<!-- The Modal -->
<div class="modal fade" id="contactModal" role="dialog">
<form method="POST" id="contact-form" enctype="multipart/form-data">
{% csrf_token %}
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Contact Form</h4>
<button type="button" class="close " data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
{{ form|crispy }}
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" id="contactSubmit" class="btn btn-outline-success">Send</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>
</div>
static/js/contactApp.js:
$(document).ready(function(){
$('#contact-form').on('submit', function(event){
event.preventDefault();
$.ajax({
url: '/contact/',
type: 'POST',
// headers: {'X-CSRFToken': '{{ csrf_token }}'},
data: $('#contact-form').serialize(),
beforeSend: function () {
$("#contactModal").modal("show");
},
success: function(data) {
$('#contactModal .modal-body').html(data);
}
});
});
});
Subreddit
Post Details
- Posted
- 4 years ago
- Reddit URL
- View post on reddit.com
- External URL
- reddit.com/r/django/comm...