Javascript calls view URL to get form for modal

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:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help
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.

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>.

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)

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.

HTMX - See

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.

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.