Django. модальное окно ModelForm отправляет сообщения на страницу, с которой оно открыто

В моем проекте Django есть приложение с представлениями и формами на основе классов. Некоторые формы отображаются в модальном окне с помощью js скрипта. Скрипт отображает формы в модальном окне, но отправка осуществляется Django ModalForm. Это подходит для меня. Примеры формы, js и шаблона ниже.

main.js

function initSampleForm(form, modal) {

    /*initDateFields();*/

    form.find('input[name="cancel_button"]').click(function(event){
        modal.modal('hide');
        return false;
    });

    form.ajaxForm({
        'dataType': 'html',
        'error': function(){
            alert('Помилка на сервері');
            return false;
        },
        'success': function (data, status, xhr) {
            var html = $(data), newform = html.find('form').attr('id', 'content-column');

            modal.find('.modal-body').html(html.find('.alert'));

            if (newform.length > 1) {
                modal.find('.modal-body').append(newform);
                initSampleForm(newform, modal);
            } else {
                modal.find('.modal-body').append(newform);
                initSampleForm(newform, modal);
                setTimeout(function(){location.reload(true);}, 500);
            }
        }
    });
}

function initAddSamplePage() {
    $('a#addSampleBtn').click(function(event){
        event.preventDefault();
        var link = $(this);
        $.ajax({
            'url': link.attr('href'),
            'dataType': 'html',
            'type': 'get',
            'success': function(data, status, xhr){
                if (status != 'success') {
                    alert('Помилка на сервері');
                    return false;
                }
                /*else {
                    html2 = $(data)
                    alert(html2.find('form').attr('id', 'content-column').text());
                }*/
            

                var modal = $('#LgModal');
                html = $(data), form = html.find('form').attr('id', 'content-column');
                modal.find('.modal-title').html(html.find('#Title').text());
                modal.find('.modal-body').html(form);
                
                initSampleForm(form, modal);

                modal.modal('show');

                $('.modal').on('shown.bs.modal', function () {
                            $('select').select2({
                                  theme: 'bootstrap4',
                            });
                  });
            },
            'error': function(xhr, status, error){
                alert('Помилка на сервері');
                return false;
            }
        });
        return false;
    });
}

forms.py

class SampleForm(ModelForm):
    
    class Meta:
        model = Sample
        fields = ['sample_name', 'sample_normative', 'sample_date',
            'sample_unit', 'sample_quantity', 'sample_production_date']
        widgets = {
            'sample_name': forms.Textarea(attrs={'rows':1}),
            'sample_normative': forms.Textarea(attrs={'rows':1}),
        }

    def __init__(self, *args, **kwargs):
        super(SampleForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        # add form or edit form
        if 'instance' in kwargs and kwargs['instance'] is not None:
            self.add_form = False
        else:
            self.add_form = True
        self.helper.form_method = 'POST'
        
        self.helper.help_text_inline = True
        self.helper.label_class = 'centered control-label font-weight-bold'
        
        self.helper.layout = Layout(
            Row(
                Column('sample_name', css_class='form-group col-md-4 mb-0'),
                Column('sample_normative', css_class='form-group col-md-8 mb-0'),
                css_class='form-row align-items-end'
            ),
            Row(
                Column('sample_date', css_class='form-group col-md-4 mb-0'),
                Column('sample_unit', css_class='form-group col-md-2 mb-0'),
                Column('sample_quantity', css_class='form-group col-md-2 mb-0'),
                Column('sample_production_date', css_class='form-group col-md-4 mb-0'),
                css_class='form-row align-items-end'
            ),
        )
        # add buttons

        if self.add_form:
            submit = Submit('add_button', (u"Add sample"),
                css_class="btn btn-primary")
        else:
            submit = Submit('save_button', (u"Update sample"),
                css_class="btn btn-success", onclick="save()")
        
        self.helper.add_input(submit)
        self.helper.add_input(Submit(
            'cancel_button',
            (u"Cancel"),
            css_class="btn btn-secondary", formnovalidate="formnovalidate"))

base.html

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" id="LgModal">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title"></h4>
              </div>
              <div class="modal-body">
              </div>
              
              <div class="modal-footer"> 
              </div>
              
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <!-- Javascripts Section -->

udpate_sample.html

{% extends "laboratory/base.html" %}

{% load static %}
{% load crispy_forms_tags %}

{% block meta_title %}ADD SAMPLE{% endblock meta_title %}

{% block title %}
    <div>
        ADD SAMPLE
    </div>
    
{% endblock title %}

{% block content %}

{% crispy form %}

{% endblock content %}

Все отлично работает для первого приложения. Затем я добавил еще одно приложение. Проблема в том, что во втором приложении форма, отображаемая в модальном окне, отправляется на страницу, с которой была открыта модальная форма. Например: На странице '/laboratory/update-invoice/9/' я открываю другую форму в модальном окне по URL '/laboratory/update-sample/3/'. В терминале я получаю:

GET /laboratory/update-sample/3/ HTTP/1.1

Но когда я отправляю эту модальную форму, я получаю POST:

POST /laboratory/update-invoice/9/ HTTP/1.1

То есть моя форма не отправляется, а открывается форма родительской страницы (обновить счет-фактуру) и ошибки полей - следующие поля должны быть заполнены (поля родительской формы - обновить счет-фактуру).

В шаблоне второго приложения я загружаю main.js из первого приложения. Все скрипты из main.js первого приложения отлично работают во втором, кроме скрипта модального окна. В чем может быть причина такого поведения?

Вернуться на верх