Displaying data in Modal html

Using Django Mystery Errors
1

HI, I am new to Django, I want to display table data to Modal html form but it always shows the 1st record on Modal form. For e.g. in the image below, I have clicked on 43. TEST - 4, 43 is the primary key, I want to display the primary key in the Modal title, But
the Modal title shows the primary key 41 which is 1st record.

image
image893×548 22.7 KB

here is the html code

        <div class="col-md-7 col-lg-6.5" style="height: 600px; overflow: scroll;">
            <!-- List of all the tasks for the day -->
            {% for i in dictTask %}
            <div class="card m-1">
                <div class="card-body">
                    {{i.pk}} - {{i.firstname}} - {{i.lastname}}  - {{i.phonenumber}}
                    <span style="position: relative; float: right;">
                        <a href="{% url 'markasdonename' i.pk %}" class="btn btn-success" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-check"></i> Mark as Done</a>

            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">PRIMARY KEY {{i.pk}} </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        <input type="text" name="firstname" class="form-control" placeholder="First Name"  value="{{ i.firstname}}"><br>
                    </button>
                    </div>
                    <div class="modal-body">
                    ...
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
                </div>
            </div>
                    </span>



                </div>
            </div>
           
            {% endfor %}
        </div>
2

Please post the code for the view that is generating the table and the view that is rendering the html for the modal.

3

Hi, This is the view for landing page

from django.shortcuts import render
from members.models import memberdetails
def home(request):
        tasks = memberdetails.objects.filter(is_completed=False).order_by('created_at')[:10]
        complete = memberdetails.objects.filter(is_completed=True).order_by('updated_at')
        context = {
                        'dictTask':tasks,
                        'dictcomp':complete,
                }
        return render(request, 'home.html',context)

And this is the view for making udpate

#MARK AS DONE
def markasdone(request, pk):
    markasdonetask = get_object_or_404(memberdetails, pk=pk)
    print(pk)
    markasdonetask.is_completed = True
    markasdonetask.save()
    return redirect('myhome')

This is the url for landing page

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.home,name='myhome'),
    path('waaralist/',include('members.urls')),
]

This the URL for making udpate

          path('markdone/<int:pk>', views.markasdone, name='markasdonename'),

Thanks so much!

4

I’m not following you here.

When and where is this modal form being rendered?

What are you clicking on to have it displayed?

5

When the green button on (Mark as Done) on Landing page is clicked, The popup Modal is being displayed, which shows primary key in the title.
HTML code for Mark as Done button is - Mark as Done

6

But markasdone is returning a redirect to myhome.

Again, I’m not seeing where and how this model is being rendered and displayed.

7

Hi Ken, To make it more simple, I am attaching this HTML code screen shot

MODAL2
MODAL21426×625 45 KB

In this screen shot, I have pointed out two {{ i.pk }} primary key values in the code.
One is Yellow arrow and other is Orange arrow.
The Yellow Arrow {{ i.pk }} shows the correct value of the primary key,
But the Orange Arrow always shows the very first record’s primary key on Modal menu.

8

Yes. I understand that.

What I don’t see from what you’ve posted here is where and when you are rendering this modal, and where the data is coming from to render it.

9

Hi Ken, Thanks for your time, I found the issue, It is with the Boot strap modal code, whenever I am using this modal code, the primary key is not rendering, when I remove the modal code everything is fine