Javascript calls view URL to get form for modal

Using Django Templates & Frontend
1

This is actually a continuous question from my previous post.
The goal is to make a Javascript call to get get object create form from existing view and form classes, and put the form into modal.
I tried to use fetch(createUrl). I do got the form, with two issues:

  1. a foreign key field, which uses select2 for display, worked fine prior using modal, but now is not displaying correctly on modal.
  2. the code I used to insert data to modal triggered warning below on console:
$('#modal-body-placeholder').html(data);

“Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/”
I searched and got saying that async = false should NOT be used. But I have nowhere using it. I used async function call to get the data, still got the same warning.

Anyway, I feel using fetch() or get() is probably not a Django way to do this work.Since I think “click a button on object list to pop up a modal window to complete object creation” is a pretty common task, and using view and form classes to construct the form should be also common. I’d like to hear the approaches how others achieve this. Any input appreciated.

2

This really doesn’t have anything to do specifically with Django - this is strictly a client-side issue.

We would need to see the complete JavaScript function performing the get in order to diagnose it.

I currently avoid the worst of writing the JavaScript code by using HTMX to issue the request and to put the retrieved HTML into the appropriate <div>.

3

I don’t quite understand what you said since I’m not sure if what I did was called HTMX or not.
Did you mean I was not on the best path? If so, I’m not surprised since I’m not sure how this should be achieved. The way I tried just was the only approach I found.
Anyway, the complete javascript function is as below.

    async function getObjectForm(createUrl) {
        response = await fetch(createUrl);
        data = await response.text();
        return data
    };

    $('#addNewObjectBtn').on('click', async function () {
        var createUrl = $(this).data('url');
        data = await getObjectForm(createUrl)
        $('#modal-body-placeholder').html(data);
        $('#create-modal').modal('show');
    });

Initially I didn’t use ‘fetch’, but used ‘get’, and got that warning. So I changed to this. But still the same. I put alert debug before and after the line I mentioned to be sure it was this line generated the warning.
I’m ready to try any other approach. Since I already have the view and form classes worked when not using modal, just hope I can continue using the classes without big change on them.

4

HTMX - See https://htmx.org/

Regarding the use of fetch - see the docs at fetch() global function - Web APIs | MDN and the related example at Fetch Request example for the use of the then function to properly chain code in a fetch request.

5

So I was on the right path, just need to iron out the issues with it?
About the example you posted, actually I tried using that already. The only difference is, the example used response.blob(), while I used response.text(). Just tried using blob(), seems this function doesn’t exist – returned nothing.