Developing SPA with templates

I am new to Django and need some direction on what is the best way to achieve the below

I am redesigning the frontend of a web application and indent it to behave as a SPA. I have a base.html that has the base layout of the page and want to show the relevant content on the page based on user selection by using block section (within base.html) and templates.

Kindly advice.

An SPA means that you’re not going to do full page refreshes. Your JavaScript on the front end will be invoking views and retrieving JSON data responses or HTMX / HTML fragments - any of which can be used by the JS to update the page being viewed.

What you won’t be doing is creating a full page using templates. Each view that you write will be responsible for providing the updates / changes to the page in the browser.

True, the frontend JS is requesting HTML fragments that also contain jinja variables that are not populated and are rendered as text. posting code snippets for clarity:

base.html

<section id="contentArea">
        <!-- All the active4 content to be placed here  -->
        {% block content123 %} {% endblock %}
</section>

index.html

{% block content123 %} 
<div id="home-ready-top-area" class="">
<div class="summary-detail">
<label class="label-static">Total Prints</label><label id="layer-height" class="label-values">{{tstat.TotalPlatePrints}}</label>
</div>...</div>...

Based on the navigation link selection the block content needs to be refreshed. kindly advice.

The selected navigation link needs to trigger some JS function. That JS function will call a view. The view will return either JSON or HTML to your JS code. Your JS code is then responsible for updating the page.

exactly. However, the variables (like {{tstat.TotalPlatePrints}}) are not getting populated when JS gets the HTML and replaces contentArea div with new code. All the variables are displayed as text and the values are not rendered.

Is there another approach that I need to take here?

Your view still needs to render the template, that’s not something that the JS can do. (Your view needs to return HTML, not Django or Jinja templates.)

Is there a way to achieve this (render the jinja templates) without having to modify the server-side of the webapp?

No. The process of converting a template to HTML occurs in the server, not in the browser.

is there a way to achieve SPA functionality by using jinga templates for the active area?

excuse my naivety…

Yes, but the rendering of that template to html must be done in the server.

true. I understand! can you advice on further steps?

The specifics are going to depend upon which JavaScript framework you’re using in the browser. I would suggest you start with what your framework-of-choice has to say about AJAX (or whatever term they choose to use for supporting SPA functionality. The bulk of the work for this is done in the browser.

Currently, I am using vanilla JS and Jquery for all the client-side functionality. Is it possible to request a jinja template (within templates folder) using a get method in javascript? or is there another way to do this?

You don’t request a jinja template. You request some HTML or JSON.

Your JS get will invoke a Django view. That view is responsible for returning either a rendered template or a JSONResponse with JSON data. Your JS will receive that response and update the page accordingly.

I tried the below from JS and it doesn’t work

var pageName ="/templates/index.html"; 
$.get(pageName, function (context) {
$("#contentArea").html(context);
});

Correct. It’s not going to work like that, nor is it supposed to.

If you are not familiar with the structure of Django to understand the differences between a template, a file and a url, and the HTML rendered by a view, you should probably work through either (or both) of the official Django tutorial or the Django Girls tutorial.

okay, let me go through the tutorials and then further dive into this.

Thanks for all the help, much appreciated.