Hi,
I’m looking for help maintaining the nested dictionary list event_info. In the radio button table I place this information I place this data in clears when I select an input and submit it. I want to maintain the data in the table so a user can choose another option after they have processed their previous selection.
{% extends 'main.html' %}
{% load static %}
{% block content %}
<style>
.tableFixHead2 {
overflow-y: scroll; /* make the table scrollable if height is more than 200 px */
height: 200px; /* gives an initial height of 200px to the table */
}
.tableFixHead2 thead th {
position: sticky; /* make the table heads sticky */
top: 0px; /* table head will be placed from the top of the table and sticks to it */
}
.tableFixHead2 table {
border-collapse: collapse; /* make the table borders collapse to each other */
width: 33%;
}
th,
td {
padding: 8px 16px;
border: 1px solid #ccc;
}
th {
background: #eee;
}
</style>
<style>
.tableFixHead {
overflow-y: scroll; /* make the table scrollable if height is more than 200 px */
height: 300px; /* gives an initial height of 200px to the table */
}
.tableFixHead thead th {
position: sticky; /* make the table heads sticky */
top: 0px; /* table head will be placed from the top of the table and sticks to it */
}
.tableFixHead table {
border-collapse: collapse; /* make the table borders collapse to each other */
width: 100%;
}
th,
td {
padding: 8px 16px;
border: 1px solid #ccc;
}
th {
background: #eee;
}
</style>
<h1>{{participant.participant_id}}</h1>
<br>
<ul>
<li>Location: {{participant.location}}</li>
<li>Isansys File Path: {{participant.isansys_file_path}}</li>
<li>Processed File Path: {{participant.processed_file_path}}</li>
<li>Reports File Path: {{participant.report_file_path}}</li>
</ul>
<br>
<h3>Isansys Files available for processing:</h3>
<form name="isansysForm" id="isansysForm" action="" method="POST">
{% csrf_token %}
<div class="tableFixHead2">
<table>
<thead>
<tr>
<th>Select</th>
<th>Isansys Filename</th>
</tr>
</thead>
<tbody>
{% for isansys_file in isansys_file_list %}
<tr>
<td><input type="radio" name="isansys_file" value="{{ isansys_file }}" id="{{ isansys_file }}"></td>
<td><label for="{{ isansys_file }}">{{ isansys_file }}</label></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<input type="submit" name="{{ isansys_file }}" class="btn btn-primary" value="Process" onclick="submitForm(event)" />
</form>
<br>
<h3>WFDB Files available for reporting:</h3>
<form id="wfdbForm" method="POST" action="">
{% csrf_token %}
<div class="tableFixHead">
<table id="eventTable">
<thead>
<tr>
<th>Select</th>
<th>Event Name</th>
<th>Event No.</th>
<th>Start Time</th>
<th>Classification</th>
<th>Dropped Events</th>
<th>Short Event</th>
</tr>
</thead>
<tbody>
{% for row in event_info %}
<tr>
<td><input type="radio" name="event_info" value="{{ row.name }}" id="{{ row.name }}"></td>
<td><label for="{{ row.name }}">{{ row.name }}</label></td>
<td>{{row.id}}</td>
<td>{{row.timestamp}}</td>
<td>{{row.classification}}</td>
<td>{{row.drop}}</td>
<td>{{row.short}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<input type="submit" name="processed_file" class="btn btn-primary" value="Process" onclick="submitForm2(event2)" />
</form>
<script>
function submitForm(event) {
event.preventDefault();
document.getElementById("isansysForm").submit();
document.querySelector('input[type="submit"]').value = "Processing...";
document.querySelector('input[type="submit"]').disabled = true;
}
</script>
<script>
const eventInfo = event_info;
console.log("Here is event_info: ")
console.log(eventInfo);
</script>
<script>
function submitForm2(event2) {
event2.preventDefault();
document.getElementById("wfdbForm").submit();
document.querySelector('input[type="submit"]').value = "Processing...";
document.querySelector('input[type="submit"]').disabled = true;
}
</script>
{% endblock content %}