I have an object list view. which trigger a create new object page by using my view class and form class. The form class define the layout, so the template file contains just crispy form placeholder, no details there. These all works fine.
If I want to use modal to display the object creation page, what’s the easiest way to do such conversion? I hope my view and form classes can still be used, just add a new modal template.
I added a modal file without extend the base.html. I changed my view class ‘template_name’ property pointed to the new modal template. It only displayed the form fields without any style, also not a modal. I included more js and css files, such as bootstrap, that is on base.html, then the page went blank, and still not a modal. The browser console only has couple warning messages, no errors.
Is it normal to implement such object create modal with view class and form class? If yes, what did I miss?
Generally, you want your JavaScript and CSS libraries that support the modal to be loaded on the base page.
Since you’re using a modal to create a new instance instead of editing an existing instance, you can render that empty form at the same time and as part of the list page. (You can do something similar for an edit modal, but that generally requires other work to be done.)
The JavaScript on the page then controls when that modal is displayed and how it submits data to a view.
You mentioned bootstrap here, so see the docs at Modal · Bootstrap v5.3
I understand you said using javascript to control the display and submits, but can I continue use the view and form classes somehow? or Bootstrap modal is completely different thing, the existing classes will become useless?
If cannot use the classes, then some good things I used with classes will get lost, then I’d not see as much benefits to use modal as I thought, especially will have to introduce a lots javascripts.
In this case, mostly people use modals for create and update? or use separate pages?
Yes - you would still use the view and forms to process the data on the server. You would still be rendering the form as part of your template. Everything on the server remains the same.
What the JavaScript does is show and hide the modal, and submit the form, when appropriate. It handles the browser side of the processing.
Thanks for confirm this.
Any example code on how to glue the classes with javascript, include getting the form and some additional context variables like modal title?