Home > Back-end >  For loop in django template returning same id for specific column
For loop in django template returning same id for specific column

Time:10-27

I am trying to write an admin panel where videos can be edited, deleted and reviewed using Django. While the loop I have set up runs smoothly, it only accepts the first value as the id value in the video deletion function. I'm pretty sure I closed the for loop in the right place, I guess there's nothing wrong with it.


**This is my template page.**

      {% extends 'dashboard/main.html' %}
    {% load static %}
    
    {% block content  %}
    <div >
        <div >
            <div >
                <h5>Edit / Show Videos</h5>
            </div>
            
            <div >
                
    <form method="get" action="{% url 'videos' %}">             
    <div id="zero-configuration_filter" >
        <label>Search:<input type="search"  placeholder="Type video ID or Title" name="q" aria-controls="zero-configuration"></label>
        </div>
    <div >
        <table id="responsive-table-model"  style="width:100%">
            <thead>
                <tr>
                    <th>Video ID</th>
                    <th>Video Title</th>
                    <th>Video Create Date</th>
                    <th>Video Status</th>
                    <th>Video From</th>
                    <th>Video IMG</th>
                    <th>Video Duration</th>
                    <th>Video Slug</th> 
                    <th> Action </th>      
                </tr>
            </thead>
            <tbody>
                {% autoescape off %}
    
                {% for video in videos reversed %}
                <tr>
                    <td  style="cursor: pointer;"><span >
                        {{ video.id }}</span></td>
                    <td>{{ video.video_title|truncatechars:25 }}</td>
                    <td>{{ video.video_create_date }}</td>
                    <td>{{ video.video_status }}</td>
                    <td>{{ video.video_from }}</td>
                    <td> <div >
                        <img src="{{ video.video_img}}" alt="img"  data-animate="jackInTheBox">
                    </div></td>
                    <td>{{ video.video_duration }}</td>
                    <td>{{ video.video_slug|truncatechars:25 }}</td>
                    <td>
    
    
    
                        <ul >
                            <li >
                                
                                
                                <a  href="{% url 'video' video.video_slug %}">
                                    remove_red_eye
                                    </a>
                            </li>
                            <li >
                               <a  href="{% url 'videosupdate' video.id %}">
                                    edit
                                    </a>
                            </li>
                            <li >
                                
                                <div >
                                    <!-- Button HTML (to Trigger Modal) -->
                                    <a href="#myModal"  data-toggle="modal"><span >
                                                          delete
                                                      </span></a>
                                </div>
                                
                                <div id="myModal" >
                                    <div >
                                        <div >
                                            <div >
                              <div >
                                                    <i >&#xE5CD;</i>
                                </div>              
                        <h4 >Are you sure?</h4>    
                                                <button type="button"  data-dismiss="modal" aria-hidden="true">&times;</button>
                                            </div>
                                            <div >
                                                <p>Do you really want to delete these records? This process cannot be undone. {% url 'videosdelete' video.id %}</p>
                                            </div>
                                            <div >
                                                <button type="button"  data-dismiss="modal">Cancel</button>
                                                <a href="{% url 'videosdelete' video.id %}"><button type="button" >Delete </button></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </li>
                        </ul>
                            
    
                    </td>
              
                </tr>
            </form>
           
              {% endfor %}
              {% endautoescape %}
    
            </tbody>
        </table>
    </div>

**This is my urls.py**

    path ('videos-delete/<int:pk>/',VideosDelete.as_view(),name="videosdelete")

**And delete view.**

    class VideosDelete(View):
        model = Video
        def get (self, request, pk):
            videos = Video.objects.get(id=pk)
            #if request.GET.get('act') == 'delete':
            videos.delete()
            return redirect ('/dashboard/videos/') 

YOU CAN SEE ADMIN DASHBOARD CLICK HERE

When I click the delete button to delete any video http://127.0.0.1:8000/dashboard/videos-delete/4009/

redirects to address. 4009 is the id of the first video. My english not good, sorry for mistakes.

I tried setting up the loop in different ways, but with no results. I tried changing the URL structure and doing href="/dashboard/videos-delete/{{video.id}}", same result.

CodePudding user response:

it is because you loop with the same modal id. JS will only find your first modal and ignore the rest if the element have same id.

I can think of two solution:

Solution 1. add video.id to the Element modal id id="myModal{{video.id}}" and change the modal triger href="#myModal{{video.id}}"

Solution 2. dont include modal in loop. you just need one modal for it. You can pass the id of video using JS. (one modal and you can change the url via JS)

CodePudding user response:

There is some issues in the closing of tags,

  • You have started the forloop right before the <tr> tag and hence it should be closed right after </tr>
                </tr>
           {% endfor %} <!-- you shpuld have closed for here -->             
  • The tag is opened before the <table>, hence it should be closed after the </table> only.
</tbody>
</table>
</form>
  • Related