Modal form is working for 'create new category'

- Had to set form.helper.form_tag to False (so we could control form tags manually)
- Created a 'json' model view
This commit is contained in:
Oliver 2018-04-25 12:46:58 +10:00
parent 9004086632
commit 8bc4050d05
5 changed files with 84 additions and 24 deletions

View File

@ -42,9 +42,10 @@ class EditCategoryForm(forms.ModelForm):
super(EditCategoryForm, self).__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_id = 'id-edit-part-form'
self.helper.form_method = 'post'
#self.helper.form_id = 'id-edit-part-form'
#self.helper.form_method = 'post'
self.helper.form_tag = False
#self.helper.add_input(Submit('submit', 'Submit'))
class Meta:

View File

@ -38,21 +38,42 @@
{% block javascript %}
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$(".js-create-cat").click(function () {
$.ajax({
url: '/part/category/new/',
type: 'get',
//dataType: 'json',
dataType: 'json',
beforeSend: function () {
$("#modal-cat").modal("show");
},
success: function (data) {
$("#modal-cat .modal-content").html(data);
//alert(data);
$("#modal-cat .modal-content").html(data.html_form);
}
});
});
$("#modal-cat").on("submit", ".js-modal-form", function () {
var form = $(this);
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: form.attr('method'),
dataType: 'json',
success: function (data) {
if (data.form_valid) {
alert("Success!");
}
else {
$("#modal-cat .modal-content").html(data.html_form);
}
}
});
return false;
});
});
</script>

View File

@ -48,7 +48,7 @@ part_bom_urls = [
part_urls = [
# Create a new category
url(r'^category/new/?', views.CategoryCreate.as_view(), name='category-create'),
url(r'^category/new/?', views.CategoryCreateJson.as_view(), name='category-create'),
# Create a new part
url(r'^new/?', views.PartCreate.as_view(), name='part-create'),

View File

@ -1,8 +1,11 @@
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.template.loader import render_to_string
from django.shortcuts import get_object_or_404
from django.http import HttpResponseRedirect
from django.http import JsonResponse
from django.views.generic import DetailView, ListView
from django.views.generic.edit import UpdateView, DeleteView, CreateView
@ -130,6 +133,42 @@ class CategoryDelete(DeleteView):
return HttpResponseRedirect(self.get_object().get_absolute_url())
class CategoryCreateJson(CreateView):
model = PartCategory
template_name = 'part/partial_category_new.html'
form_class = EditCategoryForm
def renderJsonResponse(self, request, form, data):
context = {'form': form}
data['html_form'] = render_to_string(self.template_name,
context,
request=request)
return JsonResponse(data)
def post(self, request):
form = self.form_class(request.POST)
data = {}
if form.is_valid():
form.save()
data['form_valid'] = True
else:
data['form_valid'] = False
return self.renderJsonResponse(request, form, data)
def get(self, request, *args, **kwargs):
form = self.form_class()
data = {}
return self.renderJsonResponse(request, form, data)
class CategoryCreate(CreateView):
model = PartCategory
template_name = 'part/partial_category_new.html'

View File

@ -1,18 +1,17 @@
{% load static %}
<form method='post'>
{% csrf_token %}
<div class='modal-header'>
<h4 class='modal-title'>{{ title }}</h4>
</div>
<div class='modal-body'>
{% load crispy_forms_tags %}
{% crispy form %}
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
<button type='submit' class='btn btn-primary'>
{% if ok_text %}{{ ok_text }}{% else %}Submit{% endif %}
</button>
</div>
<form method="post" action='/part/category/new/' class='js-modal-form'>
{% csrf_token %}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Form Title Here</h4>
</div>
<div class="modal-body">
{% load crispy_forms_tags %}
{% crispy form %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>