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

Рейтинг: 0Ответов: 1Опубликовано: 15.04.2023
  1. есть два модальных окна в них 2 формы своих
  2. модальное окно B с формой B повляется когда нажать на кнопку добавить в модальном окне A с формой A
  3. после нажатия добавить в модальном окне B с формой B, страница не перезагружается, а данные обновляются в модальном окне A с формой A
  4. в идеале чтобы Клиент из модального окна B с формой B подставлялся в Клиента модального окна A с формой A

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

<!-- Модальное окно A-->
<form id="form_a" method="post">
{% csrf_token %}
<label>Книга:</label>{{ form.book }}
<label>Дата:</label>{{ form.date }}
<label>Клиент:</label>{{ form.client }}
<!-- Кнопка-триггер модального окна 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="form_b" method="post" action="{% url 'url-b' %}">
{% csrf_token %}
{{ form_B }}
</form>

 <script>
        $('#form_B').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 = model_A
    form_class = Form_A
    filterset_class = Filter_A
    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['form_B'] = Form_B()
        return super().get_context_data(**kwargs)
python django jquery ajax modal
Источник: Stack Overflow на русском

Ответы

▲ 0

решение оказалось простым, ответ на 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',)

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