Hello to all,
I can’t have a modal working with a form using dynamic content with materialize CSS.
What I am trying to achieve is open a modal popup to edit class objects that are displayed in a table.
I have used a tutorial as inspiration but it’s with bootstrap. https://simpleisbetterthancomplex.com/crud-ajax
The fact is that I can’t have this working with materialize CSS and I wonder if I am doing wrong or using a CSS that cannot handle it. My code is running and I don’t have errors displayed by Django and in the web browser console, I can see all my print.log messages so the code executing…
My view:
def invoice_create(request):
form = InvoiceForm()
print("Invoice create view")
context = {'form': form}
html_form = render_to_string('main/includes/partial_invoice_create.html',
context,
request=request,
)
print(f"{JsonResponse}")
return JsonResponse({'html_form': html_form})
My modal:
<!-- THE MODAL -->
<div class="modal" id="modal-invoice">
<div class="modal-content">
</div>
</div>
My script:
<!--$(document).ready(function(){-->
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
// the "data-source" attribute of .modal-trigger must specify the url that will be ajaxed
$('.js-modal-trigger').click(function(){
console.log("Hello world!");
$.ajax({
url: 'invoice_create/',
type: 'get',
dataType: 'json',
beforeSend: function () {
console.log("Before send!");
},
success: function (data) {
console.log("Success!");
$("#modal-invoice").append(data);
$('#modal-invoice').html(data.html_form)
$('#modal-invoice').modal();
}
});
});
</script>
My button:
edit
Modal HTML:
{% load widget_tweaks %}
<form method="post">
{% csrf_token %}
<div class="modal">
<h4>Title</h4>
<div class="modal-content">
{% for field in form %}
<div class="form-group{% if field.errors %} has-error{% endif %}">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{% render_field field class="form-control" %}
{% for error in field.errors %}
<p class="help-block">{{ error }}</p>
{% endfor %}
</div>
{% endfor %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Create book</button>
</div>
</div>
</form>
If anyone could help me debug or propose another way of doing it.
Thank you very much in advance.