Can't open and update a modal popup with ajax and materialize CSS (CRUD table edition)

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.

Hi @croustibat222

Your question is pretty vague - you haven’t specified what’s not working, what (if any) errors you’re seeing, and your code examples aren’t wel formatted in the post. See this Stack Overflow guide on asking good questions, it will help you get help: https://stackoverflow.com/help/how-to-ask .

Thanks,

Adam

Hi Adamchainz,
Thank you for your answer…
What’s not working is the popup itself with its updated content.
I dont’ get any django error on the code neither in the browser console.
Thanks I will have a look on your link.