How to use several bootstrap modal in one view for CRUD action in Django?-CodePudding

I have a view by several modal and forms like Add_image , Add_birthday and a table for show all objects.

I want for every ROW create button and modal for edit. When user click Edit_button open a modal show form model object and user edit forms and save it. How to show special object and update it in modal.

CodePudding user response：

I have done precisely this in an application that supports organization of project information.

I suppose there are many different ways to approach this problem but the path that I chose was to override the view's post method. Take, for example, the code in the following abbreviated view:

class HomeView(LoginRequiredMixin, PermissionRequiredMixin, TemplateView):

    permission_required = 'app.view_project'
    reviewtype = None
    template_name = "home.html"

    def post(self, request, *args, **kwargs):
        """ a) There are two forms for each project accordion button
               displayed by this HomeView and,
            b) We are displaying those forms in a Bootstrap 5 'modal' (as
               opposed to redirecting the user to a new view for the form(s))

               Override the POST method for this view so that the forms can be
               processed correctly. 
        """
        # Determine which form is being sent in the post request.
        if 'owner' in request.POST:
            # 'owner' was in the POST data:  NoteForm was sent in
            form = NoteForm(data=request.POST)

        elif 'changed_by' in request.POST:
            # 'changed_by' was in POST data:  ReviewStatusForm was sent in
            form = ReviewStatusForm(data=request.POST)

        elif 'project_company_approval' in request.POST:
            # 'project_company_approval' was in POST data:  EditFieldForm was sent in
            form = EditCompanyApprovalForm(
                data=request.POST,
                instance=Project.objects.get(project_number=request.POST['project_number']),
            )

You'll notice that the view checks to see if the field that the user wanted to edit is present in the POST data and if it is, it fires up the appropriate form and populates the form with the data present in the form.

As far as the modal itself goes, that's handled by the following template:

{% load crispy_forms_tags %}

<!-- Button trigger modal -->
<i type="button"  style="color : green" data-bs-toggle="modal" data-bs-target="#editCompanyApprovalModal{{ project.project_number }}" onclick="open_modal({{ project.project_number }},'_project_approval','{{ project.project_approval }}')" ></i>


<!-- Modal -->
<div  id="editCompanyApprovalModal{{ project.project_number }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel{{ project.project_number }}" aria-hidden="true">
    <div >
        <div >              
            <div >                
                 {% crispy form %}
            </div>
        </div>
    </div>
</div>

Hopefully that helps answer your question? Let me know if there's anything more you would like to see and I'll see what I can do to get it out with the answer.

Depending on your specific implementation, you might also have to override the view's get_context_data() method, too.

Best of luck to you.

CodePudding user response：

when I use this syntax "id="editCompanyApprovalModal{{ project.project_number }}"" , my modal not work