如何在点击事件上使用 Javascript 在 HTML Div 内重新运行 Django For 循环

Question

I have a HTML div like this,

<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>

Inside of it is a For Loop that is executed when the page is first loaded.

Below this For Loop is a 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>

Whenever this button of Comments is clicked, a function in Javascript is called which is defined below,

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 --->
                
                
                
            }

What I want is this that whenever the button is clicked, it re-executes that for Loop inside my main div without having to refresh the page. I have been trying to do this for two days but could not find any solution to this. Can anyone help me in doing this?

Answer 1

The Django Templating Language is executed server-side. That means the client (browser, running Javascript) has no access to it whatsoever.

Some of your options are:

• Do everything back-end: Re-render the template (which you said don't want to do).
• Do everything front-end: You could have your view function return the data used in your template loop and re-implement it in your front-end (but that makes the original template loop kind of pointless).
• Hybrid: Return the data for only the new comment in your response and add it to the list with Javascript.