Как я могу повторно запустить цикл Django For Loop внутри HTML Div с помощью Javascript по событию Click
У меня есть HTML div следующего вида,
<div class="coment-area ">
<ul class="we-comet">
{% for j in comment %}
<div id="delete_comment{{j.id}}" class="mt-3">
{% if j.post_id.id == i.id %}
<li >
<div class="comet-avatar">
{% if j.user_id.User_Image %}
<img class="card-img-top" style=" vertical-align: middle;width: 50px;height: 50px;border-radius: 50%;" src= {{ j.user_id.User_Image.url }} alt="">
{% else %}
<img class="card-img-top" style=" vertical-align: middle;width: 60px;height: 60px;border-radius: 50%;" src="static\images\resources\no-profile.jpg">
{% endif %}
</div>
Внутри него находится цикл For Loop, который выполняется при первой загрузке страницы.
Ниже этого цикла For Loop находится кнопка Comments Button
<div >
<button type="submit" onclick="comment_save(event,{{i.id}})" class= "my-2 ml-2 px-2 py-1 btn-info active hover:bg-gray-400 rounded ">Comment</button>
</div>
</div>
</li>
</ul>
</div>
При нажатии на кнопку Комментарии вызывается функция на Javascript, которая определена ниже,
function comment_save(event,post_id)
{
var comment_value=$("#comment_value"+post_id).val();
var user_id=$("#comment_user_id"+post_id).val()
postdata={
"comment_value":comment_value,
"user_id":user_id,
"post_id":post_id
}
SendDataToServer("readmore",postdata,function()
{
alert()
})
$("#comment_value"+post_id).val(" ")
<! --- document.location.reload().. Something here that refresh that for loop --->
}
Я хочу, чтобы каждый раз, когда нажимается кнопка, она повторно выполняла этот цикл внутри моего основного div без необходимости обновлять страницу. Я пытался сделать это в течение двух дней, но не смог найти никакого решения. Может ли кто-нибудь помочь мне в этом?
Язык шаблонов Django Templating Language выполняется на стороне сервера. Это означает, что клиент (браузер, запускающий Javascript) не имеет к нему никакого доступа.
Некоторые из ваших вариантов:
- Сделайте все на задней стороне: Перерисовать шаблон (что вы сказали, что не хотите делать).
- Сделайте все front-end: Вы могли бы заставить функцию представления возвращать данные, используемые в цикле шаблона, и повторно реализовать их во front-end (но это делает оригинальный цикл шаблона бессмысленным). .
- Гибрид: Верните данные только для нового комментария в вашем ответе и добавьте его в список с помощью Javascript. .