Using regular django or plain javascript is not efficient enough for this purpose.
Modern JavaScript frameworks like React, Angular, Vue etc are typically used for these case scenarios.
But still, it's not impossible though to do this without JS frameworks.
One of the approaches that you can use is using AJAX.
You can create a base.html which will be our basic template, and then break the application into little components like home.html, product-list.html, view-product.html. Which we can further include according to our requirements.
{% include 'view-product.html' with product=product_object %}
(something like this)
Make an AJAX request to /view_product/<id>/ which should return a JsonResponse about which component to display. And through JavaScript, we can handle loading that specific component.
But again, THIS IS NOT A GOOD PRACTICE, I would recommend using JavaScript frameworks for Single Page Applications.
How to achieve going to another page without refreshing after for example clicking a link to another URL. More examples, I have a list of books display and when I clicked on one of the book, it will redirect me to the selected book page. This is the example of the code link.
<a class="link" href="{% url 'books:view_book_detail' obj.book.name obj.pk %}">View book</a>
I know about the history.pushState() but how to actually use it ? Can it be use with URL from Django. Are there any method else then stated ?
Go to another page without refresh [Django]