Как отобразить форму 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
, так что я совсем запутался.