Render content to a particular section of a HTML page using Django

Hello,

I am doing a project using Django and I am have problem rendering the content to a particular section of an html page.

Example, I have an html page with different sections. The last section in it is called ‘demo’ which has a button. On click of the button, some logic is done and the whole template is rendered to the user including the result. So, the user has to again scroll down to check the result in demo section. So, how do I render the template exactly to the demo section?

The section id in index.html is, <a ---- id='demo>

In views.py, I render the template in the following manner:

context = {‘res’ : res}
render(request, ‘myapp/index.html’, context)

Instead, I would like to do something like this,
render(request, ‘myapp/index.html#demo’, context)

This is not something handled by Django. Using the octothorpe (hash character) is purely a client-side facility. So what you want to do is include the fragment identifier on your URL for the form or button that submits the form. Your browser tracks that identifier locally then goes to it when the response is received, assuming the response contains an html element with that fragment identifier as an id attribute.

You can see this working by trying it on your admin page. Go to /admin/#content-main, and you’ll see the page scrolled to the first app in admin and not at the top of the page.

I was facing the similar issue.

You can solve this using the “AJAX REQUEST”
in response to the ajax request, return a html fragment using HttpResponse For Example HttpResponse(‘Hi There’)
on successful receival of the response, render that html fragment in the particular div, For example:

success: function(datareceived) {
    $("#list_contents_div").html(datareceived)
 }

This will surely solve your problem.