JavaScript code not functioning properly when accessing all information retrieved from Django Model

Question

JavaScript code not functioning properly when accessing all information retrieved from Django Model

When I retrieve the endDate field from a Django model using a for loop on an HTML page, I want to verify if all the end dates are earlier than today's date. To achieve this, I am utilizing JavaScript code.

Although my code successfully checks the first retrieved date, it fails to work on subsequent dates.

Below is my HTML code for fetching data:

{% for p in object_list %}
    <h4>{{ p.jobName }}</h4>
    <p><b style="color: red">Expires On: </b><b>{{ p.endDate }}</b></p>

    <a href="{{ p.get_absolute_url }}" target="_blank">View info</a>    

    <input type="hidden" id="endDate" name="variable" value="{{ p.endDate }}">
    <span id="check"></span>            

{% endfor %}

JavaScript code for date verification:

<script type="text/javascript">       
    var endDate = document.getElementById("endDate").value;
    var ToDate = new Date();
    if(new Date(endDate).getTime()<=ToDate.getTime()){
        document.getElementById("check").innerHTML = "Expired";
        document.getElementById("check").className = "label danger";
    }
    else{
        document.getElementById("check").innerHTML = "Active";
        document.getElementById("check").className = "label success";
    }
</script>

Currently, I have 2 {{ p.jobName }}. The first one should display as Expired, while the second should show as Active. However, my code only works correctly for the first date (Computer Admin).

This is the output I'm currently receiving: https://i.sstatic.net/MptWt.png

Could someone identify what might be causing this issue?

Thank you

javascript django django-models django-templates

Answer 1

Answer №1

Adding on to the points mentioned in the previous discussions:

The core issue lies within this section of your code:

{% for p in object_list %}
...   
    <input type="hidden" id="endDate" name="variable" value="{{ p.endDate }}">
    <span id="check"></span> 
...
{% endfor %}

In HTML, each element can only have a unique ID attribute. Having multiple elements with the same ID like "endDate" and "check" is not valid as per HTML specifications. This leads to errors in your JavaScript functionality because when there are multiple elements with the same ID, functions like document.getElementById expect only one element to be returned.

To fix this issue, you need to change the IDs to classes (e.g., from id="endDate" to class="endDate") and update your JavaScript accordingly. Instead of using getElementById, utilize getElementsByClassName, which returns a collection that can be iterated over with .forEach. Additionally, ensure you target the adjacent .check span correctly. The below code snippet demonstrates how you can modify your script to handle this situation:

var endDateElts = Array.from(document.getElementsByClassName("endDate"));
var currentDate = new Date();

endDateElts.forEach(function(dateElt) {
    var endDate = dateElt.value;
    var check = dateElt.nextSibling;
    if(new Date(endDate).getTime() <= currentDate.getTime()){
        check.innerHTML = "Expired";
        check.className = "label danger";
    }
    else{
        check.innerHTML = "Active";
        check.className = "label success";
    }
});

Answer 2

Adding on to the points mentioned in the previous discussions:

The core issue lies within this section of your code:

{% for p in object_list %}
...   
    <input type="hidden" id="endDate" name="variable" value="{{ p.endDate }}">
    <span id="check"></span> 
...
{% endfor %}

In HTML, each element can only have a unique ID attribute. Having multiple elements with the same ID like "endDate" and "check" is not valid as per HTML specifications. This leads to errors in your JavaScript functionality because when there are multiple elements with the same ID, functions like document.getElementById expect only one element to be returned.

To fix this issue, you need to change the IDs to classes (e.g., from id="endDate" to class="endDate") and update your JavaScript accordingly. Instead of using getElementById, utilize getElementsByClassName, which returns a collection that can be iterated over with .forEach. Additionally, ensure you target the adjacent .check span correctly. The below code snippet demonstrates how you can modify your script to handle this situation:

var endDateElts = Array.from(document.getElementsByClassName("endDate"));
var currentDate = new Date();

endDateElts.forEach(function(dateElt) {
    var endDate = dateElt.value;
    var check = dateElt.nextSibling;
    if(new Date(endDate).getTime() <= currentDate.getTime()){
        check.innerHTML = "Expired";
        check.className = "label danger";
    }
    else{
        check.innerHTML = "Active";
        check.className = "label success";
    }
});

Answer 3

Answer №2

After evaluating

{% for p in object_list %}
    <h4>{{ p.jobName }}</h4>
    <p><b style="color: red">Expires On: </b><b>{{ p.endDate }}</b></p>

    <a href="{{ p.get_absolute_url }}" target="_blank">View info</a>    

    <input type="hidden" id="endDate" name="variable" value="{{ p.endDate }}">
    <span id="check"></span>            

{% endfor %}

It seems that there are multiple objects sharing the same ID, causing the JavaScript to only affect the first instances of endDate and check.

<input type="hidden" id="endDate" name="variable" value="{{ p.endDate }}">
<span id="check"></span>

Suggested approach:

Utilize document.querySelectorAll() to target multiple DOM elements with identical classes.
Iterate through the NodeList and execute desired operations on each element.

const endDates = document.querySelectorAll('.endDate');
const checks = document.querySelectorAll('.check');
let ToDate = new Date();
let i = 0;
for (const endDate of endDates){
    if(new Date(endDate.value).getTime()<=ToDate){
      checks[i].innerHTML = "Expired";
      checks[i].className = "label danger";
    }
    else{
      checks[i].innerHTML = "Active";
      checks[i].className = "label";
    }
    i++;
}

<div class="container-1">
<input type="text" class="endDate" name="variable" value="2019-11-29">
<span class="check"></span>
<br>
</div>
<div class="container-2">
<input type="text" class="endDate" name="variable" value="2019-11-24">
<span class="check"></span>
<br>
</div>
<div class="container-3">
<input type="text" class="endDate" name="variable" value="2019-11-27">
<span class="check"></span>
</div>

Additional information: If feasible, consider handling the validation in the backend views.py rather than the front-end. This will streamline the process and allow for cleaner manipulation and presentation of data. The suggestion made by @Robin Zigmond to perform this action server-side is worth considering.

Answer 4

After evaluating

{% for p in object_list %}
    <h4>{{ p.jobName }}</h4>
    <p><b style="color: red">Expires On: </b><b>{{ p.endDate }}</b></p>

    <a href="{{ p.get_absolute_url }}" target="_blank">View info</a>    

    <input type="hidden" id="endDate" name="variable" value="{{ p.endDate }}">
    <span id="check"></span>            

{% endfor %}

It seems that there are multiple objects sharing the same ID, causing the JavaScript to only affect the first instances of endDate and check.

<input type="hidden" id="endDate" name="variable" value="{{ p.endDate }}">
<span id="check"></span>

Suggested approach:

Utilize document.querySelectorAll() to target multiple DOM elements with identical classes.
Iterate through the NodeList and execute desired operations on each element.

const endDates = document.querySelectorAll('.endDate');
const checks = document.querySelectorAll('.check');
let ToDate = new Date();
let i = 0;
for (const endDate of endDates){
    if(new Date(endDate.value).getTime()<=ToDate){
      checks[i].innerHTML = "Expired";
      checks[i].className = "label danger";
    }
    else{
      checks[i].innerHTML = "Active";
      checks[i].className = "label";
    }
    i++;
}

<div class="container-1">
<input type="text" class="endDate" name="variable" value="2019-11-29">
<span class="check"></span>
<br>
</div>
<div class="container-2">
<input type="text" class="endDate" name="variable" value="2019-11-24">
<span class="check"></span>
<br>
</div>
<div class="container-3">
<input type="text" class="endDate" name="variable" value="2019-11-27">
<span class="check"></span>
</div>

Additional information: If feasible, consider handling the validation in the backend views.py rather than the front-end. This will streamline the process and allow for cleaner manipulation and presentation of data. The suggestion made by @Robin Zigmond to perform this action server-side is worth considering.

JavaScript code not functioning properly when accessing all information retrieved from Django Model

Answer №1

Answer №2

Similar questions

What are some effective methods for selectively handling batches of 5-20k document inputs when adding them to a collection containing up to one million documents using MongoDB and Mongoose?

Reconfigure an ancestral item into a designated key

Integrating Django templates with AngularJS

Can the issue of mangling be avoided during .NET minification?

The dynamic routing feature in React fails to function properly after the application is built or deployed

Tips for correctly linking an Event Listener to the worldwide 'window' in Angular 6 and higher

Having trouble updating Django forms.py with the latest values from the database

The functionality of the button is affected when it is placed on the same line as a h1 heading

The Ajax request functions correctly in Chrome and Safari but encounters issues in Firefox and Internet Explorer

Replace specific text with a span element around it?

Having difficulty getting a basic code to work: ajax method ($.post) with MySQL is not

Just a Quick Query About Regular Expressions

What is the reason behind only the final input value being shown on the screen?

Is it possible to pass an external function to the RxJs subscribe function?

Sidebar-driven top navigation menu

Ways to invoke a JavaScript function via a hyperlink. Various techniques to achieve this task

The Express application seems to load forever after a certain period of time

Avoiding cheating in a JavaScript game

The reason for setting a variable as void 0 in JavaScript

Using a Function as an Argument to Return an Unnamed Object