Django template not re-rendering on successful AJAX get request - ajax

Question

I have written a very simple ajax code which makes a get request, and it expects django template values as response. So when I try to execute this ajax code, in chrome under network, I can see that the get request was successful and in the preview section under network, I can see the template values that I had expected but the webpage remains same, doesn't get rendered again.
My view:
def test(request,id=1):
return render(request,'test.html',{'num':id,'next':9})
My template and ajax code:
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<p>{{num}}</p>
<button onclick='test({{next}})'>Test</button>
<script>
function test(next){
$.ajax({
url:'/test/'+next,
type: 'GET',
success: function(){
console.log('done');
}
});
}
</script>
Please check this sample image of my problem when I started on '/test/66' , made a click on the button, got the required response, still no change.

Answer 1

You're mixing server side rendering (DTL) and client side (javascript). Once django as rendered the template, you're javascript has no access to server side variable as {{ text }}.
You will have to do :
Template before SSR
<div id="content">
<p>{{num}}</p>
<button onclick='test({{next}})'>Test</button>
</div>
<script>
function test(next){
$.ajax({
url:'/test/'+next,
type: 'GET',
success: function(data){
document.querySelector('#content p').innerHTML(data);
}
});
}
</script>
Template after SSR (something like this, you get the point)
<div id="content">
<p>66</p>
<button onclick='test(66)'>Test</button>
</div>
<script>
function test(next){
$.ajax({
url:'/test/'+next,
type: 'GET',
success: function(data){
document.querySelector('#content p').innerHTML(data)
}
});
}
</script>