I have a table Product that shows information of a group of products.
<table id="item_table" class="table table-sm table-hover table-bordered">
<thead class="thead-inverse">
<tr>
<th colspan="2">Date</th>
<th colspan="6">Product name</th>
<th colspan="2">Category</th>
<th colspan="2">Amount</th>
</tr>
</thead>
<tbody>
{% for item in product_list %}
<tr>
<td colspan="2">{{ item.date }}</td>
<td id="item_name_format" colspan="6">{{ item.name }}</td>
{% if item.category_id %}
<td id="item_name_format" colspan="2">{{ item.category_id.level1_desc }}</td>
{% endif %}
<td id="item_amt_format" colspan="2">${{ item.amount|intcomma }}</td>
</tr>
{% endfor %}
</tbody>
</table>
I am using the below Ajax call you update the table.
$(document).ready(function(){
// Submit post on submit
$('.item_num').on('click', function(event){
event.preventDefault();
var item_num = $(this).attr('id');
update_item(item_num);
});
function update_item(item_num) {
console.log(item_num) // sanity check
$.ajax({
type: 'GET',
url:'update_items',
data: { 'item_num': item_num },
success: function(result){
console.log(result);
???$('item_table').product_list = result;???
},
... more code
How do I update the variable product_list with 'result' from my Ajax call?
This should update the table right?
Thanks
you cannot this way. Better way would be to load that part of your html via ajax.
your ajax view:
def update_items(request):
product_list = your_data
return render(request, 'table_body.html', {'product_list':product_list})
your main html:
<tbody class="table_body">
{% include 'table_body.html' %}
</tbody>
table_body.html:
{% for item in product_list %}
<tr>
<td colspan="2">{{ item.date }}</td>
<td id="item_name_format" colspan="6">{{ item.name }}</td>
{% if item.category_id %}
<td id="item_name_format" colspan="2">{{ item.category_id.level1_desc }}</td>
{% endif %}
<td id="item_amt_format" colspan="2">${{ item.amount|intcomma }}</td>
</tr>
{% endfor %}
your ajax would look like this:
function update_item(item_num) {
console.log(item_num) // sanity check
$('.table_body').html('').load(
"{% url 'update_items' %}?item_num=" + item_num
); // <--- this code instead of $.ajax(lala)
you use this load() here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With