Skip to content

Instantly share code, notes, and snippets.

@sanjaykrishnan

sanjaykrishnan/index.html

Created May 18, 2020 07:31
Show Gist options
  • Save sanjaykrishnan/5e76d8e1d5f3b07efc0793d9c6c95e35 to your computer and use it in GitHub Desktop.
Save sanjaykrishnan/5e76d8e1d5f3b07efc0793d9c6c95e35 to your computer and use it in GitHub Desktop.
Download ZIP
Modal Form for django
Raw
index.html
<button type="button" class="btn btn-success js-create-supplier" data-url="{% url 'supplier:modal-create' %}">
<span class="glyphicon glyphicon-plus"></span>
New Supplier
</button>
<div class="modal fade" id="modal-popup" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
{% block extra_script %}
<script>
var loadForm = function () {
var btn = $(this);
$.ajax({
url: btn.attr("data-url"),
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal-popup .modal-content").html("");
$("#modal-popup").modal("show");
},
success: function (data) {
$("#modal-popup .modal-content").html(data.html_form);
}
});
};
/* Binding */
// Create book
$(".js-create-supplier").click(loadForm);
$("#modal-popup").on("click", "#popup-submit", function(e){
e.preventDefault();
var form = $('.popup-form');
var selector = $(this).attr('data-selector');
var model_name = $(this).attr('data-model-name');
$.ajax({
url: form.attr("action"),
data: form.serialize(),
type: form.attr("method"),
success: function (data) {
if (data.form_is_valid) {
$("#modal-popup").modal("hide");
toastr.success("New "+model_name+" Created!");
}
else {
$("#modal-popup .modal-content").html(data.html_form);
}
}
});
return false;
});
});
</script>
{% endblock %}
Raw
supplier.html
<form method="post" action="{% url 'supplier:modal-create' %}" class="popup-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">Create Supplier</h4>
</div>
<div class="modal-body">
{% for field in form %}
<div class="form-group{% if field.errors %} has-error{% endif %}">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
<div class="text-danger">{{ field.errors.as_text|cut:'* ' }}</div>
</div>
{% endfor %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="popup-submit" class="btn btn-primary" data-model-name="Supplier"
data-selector="id_supplier">
Create Supplier
</button>
</div>
</form>
Raw
views.py
class ModalFormMixin:
template_name = ''
form_class = None
def get(self, request, *args, **kwargs):
return JsonResponse({'html_form': self.get_html_form(self.form_class())})
def get_html_form(self, form):
return render_to_string(self.template_name, {'form': form}, request=self.request)
def post(self, request, *args, **kwargs):
form_is_valid = False
form = self.form_class(self.request.POST)
if form.is_valid():
form.save()
form_is_valid = True
return JsonResponse(self.get_return_data(form_is_valid, form))
def get_return_data(self, form_is_valid, form):
return {
'html_form': self.get_html_form(form), 'form_is_valid': form_is_valid,
'id': form.instance.id if form_is_valid else None, 'name': form.instance.name if form_is_valid else None,
}
class SupplierModalCreateView(ModalFormMixin, View):
template_name = 'item_code/modals/supplier.html'
form_class = SupplierModalForm
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment