добавление данных во второе модальное окно, и обновление данных в первом модальном окне, без перезагрузки страницы (ajax)

Question

есть два модальных окна в них 2 формы своих
модальное окно B с формой B повляется когда нажать на кнопку добавить в модальном окне A с формой A
после нажатия добавить в модальном окне B с формой B, страница не перезагружается, а данные обновляются в модальном окне A с формой A
в Идеале чтобы название из модального окна B с формой B подставлялось в одну из строк в модальном окне A с формой A

... на данный момент реализовано при добавлении в модальное окно B с формой B перезагружается страница, и можно вводить данные модальном окне A с формой A

<form id="a_form" method="post">
{% csrf_token %}
{{ A_form }}
<!-- Кнопка-триггер модального окна B-->
<button type="button" class="btn btn-secondary btn-sm m-1" data-bs-toggle="modal"
data-bs-target="#modal_B"><i class="bi bi-plus-lg"></i></button>
</form>

<!-- Модальное окно B-->
<form id="b_form" method="post" action="{% url 'b-url' %}">
{% csrf_token %}
{{ B_form }}
</form>

 <script>
        $('#B_form').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                method: 'POST',
                url: $(this).attr('action'),
                data: $(this).serialize(),
                success: function(data) {
                    $('#modal_B').modal('hide');
                },
                error: function(data) {
                    alert('Ошибка: ' + data.responseText);
                }
            });
        });
    </script>

class A_ListView(LoginRequiredMixin, A_RequiredMixin, CustomSuccessMessageMixin, CreateView, FilterView):
    model = A_model
    form_class = A_Form
    filterset_class = A_Filter
    template_name = 'A.html'
    success_url = reverse_lazy('A')
    success_msg = 'Запись создана'

    def get(self, request, *args, **kwargs):
        if 'company' in request.GET:
            return super().get(request, *args, **kwargs)
        return super(CreateView, self).get(request, *args, **kwargs)

    def post(self, request, *args, **kwargs):
        if 'company' not in request.POST:
            return super(CreateView, self).post(request, *args, **kwargs)
        return super().post(request, *args, **kwargs)

    def get_context_data(self, **kwargs):
        kwargs['A'] = Incoming.objects.all().order_by('-receipt_date')
        kwargs['B_form'] = B_Form()
        return super().get_context_data(**kwargs)

гугл не помог, написал тут, жду помощи ... -/

Answer 1

решение оказалось простым, ответ на 3 пункт:

<script>
        $('#B_form').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                method: 'POST',
                url: $(this).attr('action'),
                data: $(this).serialize(),
                success: function(data) {
                    $('#modal_B').modal('hide');
                    $('#modal_A #id_client').load(location.href + ' #id_client>*', '');
                },
                error: function(data) {
                    alert('Ошибка: ' + data.responseText);
                }
            });
        });
    </script>

на 4 пункт поступил так, сделал сортировку в models.py сделал сортировку по id

class Client(models.Model):

    class Meta:
        ordering = ('id',)

чтобы подставлялся последний созданный клиент в модальное окно А (до этого была сортировка по имени и брал последний по алфавиту элемент) знаю что костыльно, но работает и минимум кода, кто знает как решить более лаконично и правильнее, прошу написать.

БЛОГ НА HUSL

добавление данных во второе модальное окно, и обновление данных в первом модальном окне, без перезагрузки страницы (ajax)

Ответы (1 шт):