Как получить поле ввода в javascript при рендеринге формы с помощью django render to string?

Вот моя проблема, и я уже 2 дня пытаюсь понять, что делает мой код? У меня есть форма с моделью django, которая выводится в модальную форму с помощью ajax вызова. Вот модель и форма.

class CreateSagaForm(forms.ModelForm):
class Meta:
    model = Saga
    fields = "__all__"
    widgets = {
        "end_date": forms.DateInput(attrs={"class": "datepicker"}),
        "start_date": forms.DateInput(attrs={"class": "datepicker"}),
    }

def __init__(self, *args, disabled_field=True, **kwargs):
    super(CreateSagaForm, self).__init__(*args, **kwargs)
    self.helper = FormHelper()
    self.helper.form_id = "CreateSagaForm"
    self.helper.layout = Layout(
        "epic_key",
        Row(
            Column("epic_status", css_class="form-group col-md-3 mb-0"),
            Column(
                "start_date",
                HTML("""<i class="fa fa-calendar" ></i>"""),
                css_class="form-group col-md-4 mb-0",
            ),
            Column(
                "end_date",
                HTML("""<i class="fa fa-calendar" ></i>"""),
                css_class="form-group col-md-4 mb-0 text-center",
            ),
        ),

models.py

class Saga(models.Model):

start_date = models.DateField(blank=True, null=True)
end_date = models.DateField(blank=True, null=True)
date_created = models.DateTimeField(auto_now_add=True)
date_updated = models.DateTimeField(auto_now=True)

представление, которое выводит данные модала через ajax.

def get_form(request, key_epic):
instance = get_object_or_404(Saga, epic_key=key_epic)
JsonInstance = serializers.serialize(
    "json",
    [
        instance,
    ],
    use_natural_foreign_keys=True,
    use_natural_primary_keys=True,
)
form = CreateSagaForm(request.POST or None, instance=instance)
context = {"form": form}
template = render_to_string("tracking/get-form.html", context, request=request)
return JsonResponse(
    {
        "sagaForm": template,
        "instance": JsonInstance,
    }
)

ajax call

epic_keys.forEach(epic => {
epic.addEventListener('click', () => {
    var epicKey = epic.textContent;
    url = `/api-sagaForm/${epicKey}/`
    var formLocal = document.querySelector(".sagaFormLocal");
    $.ajax({
        url: url,
        success: function (data) {
            formLocal.firstElementChild.innerHTML = data.sagaForm }); });

Теперь форма отображается с промежутком в несколько секунд, я не знаю почему, и если я пытаюсь получить поле ввода даты начала перед открытием модала, оно возвращает null или пустой объект, если я использую jquery. Но после открытия модала я получаю его правильно. Может ли кто-нибудь объяснить, почему я получаю задержку в одну-две секунды и как я могу получить ввод до загрузки модала. Или любой другой правильный способ сделать это. Кстати, вот модальное окно.

<div class="modal fade" id="createProject" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Creating New Project</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
  
          <div class="modal-body">
                  <div id="epicPreviewForm" class="collapse show" data-parent="#epicPreviewLocal">
                        <div class="sagaFormLocal mb-2 border p-3" >
                            <div class=""></div>
                            <button type="submit" id="editSagaSubmit" name="" form="CreateSagaForm" class="btn btn-primary">Update Epic</button> 
                        </div>
                    </div>
        </div>
    </div>
  </div>

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