Ajax With Django Not Reload Page But Loop will reload - django

Question

<div class="container" id="cd">
<div class="row">
<div class="col-2">
<label for="serialno" class="h4 text-center mx-4"> S.No </label>
</div>
<div class="col-3">
<label for="billno" class="h4 text-center"> Bill No</label>
</div>
<div class="col-5">
<label for="Items" class="h4 text-center"> Items</label>
</div>
<div class="col-2">
<label for="total" class="h4 text-center"> Total</label>
</div>
<hr>
</div>
{% for b,d in history.items %}
<div class="row" id="refresh">
<div class="col-2 py-2">
<label class="h6">{{forloop.counter}}. | {{b.created_at}}</label>
</div>
<div class="col-3 py-2">
<label class="h5">{{b}}</label>
</div>
<div class="col-5 py-2">
{% for i in d %}
<label class="h6">{{i.itemname}} x {{i.qty}} {{i.subtotal}}</label><br>
{% endfor %}
</div>
<div class="col-2 py-2">
<span class="h6">₹</span>
<label class="h6">{{b.grandtotal}}</label>
</div>
</div>
{% endfor %}
</div>
<script>
$(document).on('change','#myform',function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:"{% url 'history' %}",
data:{
tb1:$('#cal').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
},
success:function(response){
},
});
});
</script>
How Can I reload this {% for b,d in history.items() %} without refresh a page using ajax
Any way to change history value using ajax Important Note value processed by onchange event
I am trying to reload the loop without a page reload
I want to change the history.items() django variable value after the ajax call and corressponding values can be iterated

Answer 1

{% for b,d in history.items %}
<div class="row" id="refresh-main">
<div class="row" id="refresh-child">
<div class="col-2 py-2">
<label class="h6">{{forloop.counter}}. | {{b.created_at}}</label>
</div>
<div class="col-3 py-2">
<label class="h5">{{b}}</label>
</div>
<div class="col-5 py-2">
{% for i in d %}
<label class="h6">{{i.itemname}} x {{i.qty}} {{i.subtotal}}</label><br>
{% endfor %}
</div>
<div class="col-2 py-2">
<span class="h6">₹</span>
<label class="h6">{{b.grandtotal}}</label>
</div>
</div>
</div>
{% endfor %}
<script>
$(document).on('change','#myform',function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:"{% url 'history' %}",
data:{
tb1:$('#cal').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
},
success:function(response){
var pageURL = $(location).attr("href");
$('#refresh-main').load(pageURL + ' #refresh-child');
},
});
});
</script>