Как соединить Ajax и форму, создаваемую при нажатии?

Question

MaratPetrov96 @MaratPetrov96

Django
AJAX

Как соединить Ajax и форму, создаваемую при нажатии?

Доделываю проект на Django для портфолио, остался последний штрих - ответ на комментарий через ajax.

Суть проекта - новости и статьи, которые читатели могут комментировать.

Просто комментарий к записи успешно отправляется через Ajax, для тестирования возвращается не свежий комментарий, а самый первый.

function commFunc() {
              // создаем AJAX-вызов
              $.ajax({
                  data: $(this).serialize(), // получаем данные формы
                  type: $(this).attr('method'), // GET или POST
                  url: $(this).attr('action'),
                  // если успешно, то
                  success: function (response) {
          date = new Date(response[0].fields.date);
          var comm = document.getElementById("comms");
          var comm_day = date.toLocaleDateString();
          var comm_hour = date.getHours();
          var comm_minute = date.getMinutes();
          if (comm_minute<10){
          comm_minute = "0" + comm_minute;
          }
          var comm_main = document.createElement("div");
          comm_main.setAttribute('class','comment');
          comm_main.setAttribute('align','left');
          comm_main.setAttribute('id',response[0].pk);
          var comm_date = document.createElement("div");
          comm_date.innerHTML += "<span class='username'>"+response[0].fields.username+'</span>';
          comm_date.innerHTML += "<span class='comm-date'>"+${comm_hour}:${comm_minute} ${comm_day}+'</span>';
          var comm_content = document.createElement("div");
          comm_content.setAttribute('class','comm-content');
          var content = '<p>'+response[0].fields.content.replace('\r\n','</p><p>')+'</p>';
          comm_content.innerHTML += content;
          comm_main.appendChild(comm_date);
          comm_main.appendChild(comm_content);
          comm_main.innerHTML += '<span onclick="replyForm(this)">Ответить</span>';
          comm.appendChild(comm_main);
                  },
              });
              return false;
          }

А вот ответ на комментарий вызывает переход на HTML страницу с данными о комментарии в формате json, то есть Ajax не срабатывает, в этом, собственно, и проблема

function replyFunc(){
              // создаем AJAX-вызов
              $.ajax({
                  data: $(this).serialize(), // получаем данные формы
                  type: $(this).attr('method'), // GET или POST
                  url: $(this).attr('action'),
                  // если успешно, то
                  success: function (response) {
          var parent = document.getElementById($(this).attr('name'));
          date = new Date(response[0].fields.date);
          var comm_day = date.toLocaleDateString();
          var comm_hour = date.getHours();
          var comm_minute = date.getMinutes();
          if (comm_minute<10){
          comm_minute = "0" + comm_minute;
          }
          var comm_main = document.createElement("div");
          comm_main.setAttribute('class','comment_reply');
          comm_main.setAttribute('align','left');
          comm_main.setAttribute('id',response[0].pk);
          var comm_date = document.createElement("div");
          comm_date.innerHTML += "<span class='username'>"+response[0].fields.username+'</span>';
          comm_date.innerHTML += "<span class='comm-date'>"+${comm_hour}:${comm_minute} ${comm_day}+'</span>';
          var comm_content = document.createElement("div");
          comm_content.setAttribute('class','comm-content');
          var content = '<p>'+response[0].fields.content.replace('\r\n','</p><p>')+'</p>';
          comm_content.innerHTML += content;
          comm_main.appendChild(comm_date);
          comm_main.appendChild(comm_content);
          comm_main.innerHTML += '<span onclick="replyForm(this)">Ответить</span>';
          parent.appendChild(comm_main);
                  },
              });
              return false;
          }

Отслеживание ajax прописано после основного HTML-кода

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
      $(document).ready(function () {
          // отслеживаем событие отправки формы
          $('#comm_form').submit(commFunc);
          $('#reply').submit(replyFunc);
      });
  </script>

Нюанс в том, что форма для ответа создаётся при нажатии на слово "Ответить"

function replyForm(arg){
var check = document.getElementById("reply");
if (check == null){
var parent = arg.parentElement.attributes['id'].value;
var parentInput = document.createElement('input');
parentInput.setAttribute('type','hidden');
parentInput.setAttribute('name','parent');
parentInput.setAttribute('value',parent);
var form = document.createElement('form');
form.setAttribute('id','reply');
form.setAttribute('action','/com'+parent);
form.setAttribute('name',parent);
//console.dir(arg.parentElement);
//console.log(arg.parentElement.attributes['name'].value);
form.setAttribute('method','POST');
var submit = document.createElement('input');
submit.setAttribute('type','submit');
submit.setAttribute('class','username_field');
var csrf = '{% csrf_token %}';
form.innerHTML += csrf;
{% if user.is_authenticated %}
form.innerHTML += '<div class="username_field"><span>{{user.username}}</span></div>';
{% else %}
form.innerHTML += '<div class="username_field"><input type="text" name="username" placeholder="Гость"></div>';
{% endif %}
var textarea = document.createElement('textarea');
textarea.setAttribute('class','comment_form');
textarea.setAttribute('name','text');
textarea.setAttribute('maxlength','20000');
textarea.setAttribute('required',true);
form.appendChild(parentInput);
form.appendChild(textarea);
form.appendChild(submit);
arg.parentElement.appendChild(form);
}
else{
check.remove();
}
}

Коды комментирования и ответа на комментарии

Такое необычное воплощение комментирования я взял у сайта maximonline

@login_required
def comment(request,pk):
    if request.POST['text']:
        '''com = Comment(content=request.POST['text'],record=Record.objects.get(pk=pk))
        if request.user.is_authenticated:
            com.user = request.user
            com.username = request.user.username
        else:
            com.username = 'Гость'
            if request.POST['username']:
                com.username = request.POST['username']
        com.save()
        user_json = serializers.serialize("json", [com])'''
        user_json = serializers.serialize("json", [Comment.objects.get(pk=1)])
        return HttpResponse(user_json, content_type='application/json')

@login_required
def reply(request,pk):
    if request.POST['text']:
        '''parent = Comment.objects.get(pk=pk)
        com = Comment(content=request.POST['text'],record=parent.record,parent=parent)
        if request.user.is_authenticated:
            com.user = request.user
            com.username = request.user.username
        else:
            com.username = 'Гость'
            if request.POST['username']:
                com.username = request.POST['username']
        com.save()
        user_json = serializers.serialize("json", [com])'''
        user_json = serializers.serialize("json", [Comment.objects.get(pk=int(request.POST['parent']))])
        return HttpResponse(user_json, content_type='application/json')

Проект целиком
https://github.com/MaratPetrov96/Pyxim/tree/main/P...