Как отобразить форму UpdateView под обновляемым полем

Я пытаюсь изучить web-dev с помощью django. В качестве упражнения я пытаюсь создать что-то, где у вас есть документ, а внутри каждого документа есть блоки текста, которые вы можете обновлять (как вики, но намного проще). Мой models.py выглядит следующим образом,

from django.db import models
from django.urls import reverse

# Create your models here.


class LatexBlock(models.Model):
    code = models.TextField(max_length=2000, help_text='Enter latex code')

    def __str__(self):
        return self.code

class Document(models.Model):
    title = models.CharField(max_length=200)
    code = models.ManyToManyField(LatexBlock)

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        """Returns the url to access a detail record for this book."""
        return reverse('doc-detail', args=[str(self.id)])

Я хотел бы использовать ajax, чтобы заставить форму появиться под LatexBlock и затем иметь возможность обновить ее. Итак, у меня есть представление детализации документа, которое делает это.

{% for block in document.code.all %}
    <div>
        <!--<a href="{% url 'block-update' pk=block.pk%}" class="float-right">[Edit]</a>-->
        <button onclick=TestsFunction("{{block.pk}}","{% url 'block-update' pk=block.pk%}","{{request.path}}") class="btn btn-outline-info btn-sm float-right">Edit</button>   
        {{block|linebreaks}}
        <div id="edit-btn-{{block.pk}}" style="display: none">
            <form action="{% url 'block-update' pk=block.pk%}" method="post">
                {%csrf_token%}
                <input type="text" id="edit-val-{{block.pk}}" name=""><br>
                <input type="submit" value="Submit">
            </form>
        </div>
    </div> 
{% endfor %}

TestsFunction - это место, где я показываю форму, а затем отправляю форму.

<script>
    function TestsFunction(pk,url,success) {
        var T = document.getElementById("edit-btn-"+pk);
        var val = document.getElementById("edit-val-"+pk);
        T.style.display = "block";  // <-- Set it to block
        console.log(url)
        $.ajax({
            url: url,
            dataType: 'json',
            data: {
                'success': success
             },
            success: function (data) {
                val.value=data.out
                val.id="id_code"
                val.name ="code"
            }
        });
    }
</script>

Это работает, но мне приходится вручную вводить url успеха в представлении LatexBlockUpdate. Я бы хотел, чтобы после нажатия кнопки submit я просто обновлял страницу. Я не могу понять, как сделать эту часть. Я хочу попробовать, но не знаю достаточно JS и ajax, сделать так, чтобы форма исчезала при отправке, а затем обновлялся только div с LatexBlock в нем. Или если бы был способ получить url текущего Document внутри LatexBlockUpdateView, но ForiegnKey находится в Document, а не в LatexBlock, так что я совсем запутался.

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