I am facing a challenge in implementing a new feature and I'm unsure of the best approach to take. In my project, I utilize Django for backend logic and templating, as well as the Google Closure JavaScript library for frontend development.
Here is the scenario I need assistance with:
I use a "rate" value to calculate the Total Amount for various entities displayed in a tabular format like this:
<!-- Need to reload this table again. -->
<table class = "striped" ....>
<thead>
<tr>
<th>Entity</th>
<th>Amount (USD)</th>
<th>Rate (%)</th>
</tr>
</thead>
<tbody>
{% for entity in entities %}
<tr>
<td>{{ entity.name }}</td>
<td>${{ entity.total }}</td>
<td>{{ entity.rate }}</td>
</tr>
{% endfor %}
</tbody>
</table>
The rate used to calculate the total amount comes from a database table. However, I need to explore different scenarios by changing the rate and calculating the resulting total amount.
To input a new rate, I have provided an input box as shown below:
<label for="Updated Rate">
<input type=number id="updatedRate" name="updatedRate" value="0" />
<input type="button" value="Update Rate" />
<input type="button" value="Recalculate Entities"/>
<input type="reset" value="Reset rate and Recalculate"/>
When the user clicks the Update Rate button, the updated rate value is stored in local storage. Upon clicking the Recalculate Entities button, an AJAX request will be made to recalculate the values, updating the table with the new information. If the user chooses to reset the rate, the original calculated values will be restored.
While I understand how to send an AJAX request to update the data, I am struggling with re-rendering the table when the "rate" has been modified or reset.