Only the First Button works in Django loop-CodePudding

The div only appears if the first button is clicked. Its works as i wanted but only for the first button in loop. When i manually put display = "block" it appears though on bith loop. What i want is to toggle the class "bg-model" by clicking on the class "editTime".

Any help would be appreciated. Thanks in advance...

HTML

<h4>Appointments</h4>
                    {% if upcomming_appointments %}
                        {% for d in upcomming_appointments %}
                        <li >
                            <h6 >
                                <ion-icon name="medkit"></ion-icon> Appointment with <strong>{{d.PatientName}}</strong><a 
                                    id="sessionBtn" href="{% url 'medicalReport' d.id %}">Start Session</a>
                            </h6>
                            <span >
                                Date: <strong>{{d.appoitmentDate}}</strong> <br>
                                Time: <strong>{{d.appoitmentTime}}</strong><br>
                                Symptoms: <strong>{{d.symptoms}}</strong><br>
                                Comment: <strong>{{d.Comments}}</strong><br>
                            </span>
                            <a id = "changeTime" >Change time</a>
                            <a  id="logoutBtn" href="{% url 'delete_appointment' d.id %}"
                                onclick="return confirm('Are you sure you want to cancel this appointment? This action is irreversible.')">Cancel
                                Appoitment</a>
                            <div >
                                <div >
                                    <div > </div>
                                    <form method="POST">
                                        <h5>Change Appointment Time</h5>
                                        {{d.id}}
                                        <input type="hidden" name="SessionID" value="{{d.id}}">
                                        <input type="time" id="timeChange"  placeholder="Time">
                                        <button type="submit" >Submit</button>
                                    </form>
                                </div>
                            </div>
                        </li>

document.querySelector('.editTime').addEventListener("click", function() {
    document.querySelector('.bg-modal').style.display = "flex";
});

document.querySelector('.close').addEventListener("click", function() {
    document.querySelector('.bg-modal').style.display = "none";
});

views.py

def doctorProfile(request):
    upcomming_appointments = Appoitment.objects.all().filter(
        DoctorEmail=request.user, appoitmentDate__gte=timezone.now()).order_by('appoitmentDate')
    past_appointments = Appoitment.objects.all().filter(
        DoctorEmail=request.user, appoitmentDate__lt=timezone.now()).order_by('-appoitmentDate')
    g = request.user.groups.all()[0].name
    if g == 'Doctor':
        doctor_details = Doctor.objects.all().filter(EmailAddress=request.user)
        d = {'doctor_details': doctor_details,
             'upcomming_appointments': upcomming_appointments,
             'past_appointments': past_appointments}
    return render(request, 'doctorProfile.html', d)

CodePudding user response：

There is an issue with your template. This is happening because HTML ids are strictly unique and since you are looping through, the id "changetime" is getting duplicated and thus only the first button is working.

The workaround through this is that first, you make the IDs unique by adding a variable, it could be like- id="changeTime_{{d.id}}" or you can completely remove the ID if it isn't being used anywhere. Secondly, you add onClick handler to the tag.

You can do as follows:

<a href id="your_id"  onclick="showModal()">

in your js file:

function showModal() {
    document.querySelector('.bg-modal').style.display = "flex";
}

EDIT:

Make sure to put your modal outside the for loop

Since you want to also update the fields of the modal, you will have to use it via javascript. Change your modal as follows:

 <div >
                                <div >
                                    <div > </div>
                                    <form method="POST">
                                        <h5>Change Appointment Time</h5>
                                        <span id="appId"></span>
                                        <input type="hidden" name="SessionID" value="">
                                        <input type="time" id="timeChange"  placeholder="Time">
                                        <button type="submit" >Submit</button>
                                    </form>
                                </div>
                            </div>

change on click functionality:

html

<a href id="your_id"  onclick="showModal('{{d.id}}')">

JavaScript

function showModal(appointmentId) {
    document.querySelector('.bg-modal').style.display = "flex";
    document.getElementByName('SessionID')[0].value = appointmentId;
    document.getElementById('appId').textContent = appointmentId;
}