Utilizing Django custom template tags with the power of JavaScript

I have created a custom template tag that fetches the name and roll number of a student based on their ID.

@register.inclusion_tag('snippet/student_name.html')
def st_name_tag(profile, disp_roll=True, disp_name=True):
    #performing some calculations
    return {'full_name':student.name,
            'roll':student.roll_number,
           }

The included template file contains HTML code written in a single line to prevent any issues with JS error messages like unterminated string literal.

My goal is to use the st_name_tag within a JavaScript function.

This is my JS function:

{% load profile_tag %}
<script type = "text/javascript">   
eventclick : function(st){
     var div = ('<div></div>');
     var st_id = st.id;
     if (st.status == 'pass'){
          div.append('<p>Student Name:{% st_name_tag '+st_id+' %}</p>');
     }
}

I have attempted different variations of the approach, such as removing the + and '' signs from the st_id variable without success. Any assistance would be greatly appreciated!

Answer №1

When dealing with rendering templates based on user interaction, the process involves server-side rendering followed by client-side rendering in the user's browser.

The sequence typically goes like this: first, the template is rendered on the server, then it is sent to and displayed in the browser, and finally, the user interacts with JavaScript. Due to this order of events, any changes made within JavaScript will not affect the initially rendered template.

To address this issue, I suggest utilizing ajax. By employing ajax, you can asynchronously request new data from the server whenever a user interaction takes place, allowing for dynamic updates without affecting the original template.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is Angular File API Support Compatible with HTML5?

When checking for HTML5 File API browser support in my code: private hasHtml5FileApiSupport; constructor(@Optional() @Inject(DOCUMENT) document: Document) { const w = document.defaultView; this.hasHtml5FileApiSupport = w.File && w.FileReader & ...

How can I transform an HTML div into a video file like MP4 using Python and Django?

I'm looking to take a HTML page and target a specific <div> within it in order to convert it into video format. Purpose: I understand that HTML is typically static, but I have a requirement to transform it into a video. I'm seeking method ...

Having issues with transferring user input on change to a parent component in React JavaScript

I encountered an issue while passing a method from a parent component to a child component. The parent component, FilterableProductTable, contains a state called filterText. It renders a child component named SearchBar and passes down a function called han ...

Is it necessary to verify the cookie in Django for each page load?

How can I efficiently check if a cookie is set before loading each page in Django? I'm currently working on a website that utilizes LDAP authentication. To prevent excessive server load caused by repeatedly requesting request.META.get('REMOTE_US ...

Issue with Chart.JS bar chart displaying error related to missing parenthesis

I am struggling to create a bar chart and can't seem to figure out the correct syntax. Every time I try, I encounter this error: Uncaught SyntaxError: missing ) after argument list The error seems to be on this line label: 'Dollar Values&apos ...

Using a customized layout, merge AngularJS into Vaadin

I experimented with integrating an angular JS application into Vaadin by utilizing a custom layout as shown below: VerticalLayout mainLayout = new VerticalLayout(); mainLayout.setMargin(true); mainLayout.setWidth("1380px"); setCompositionRoot( ...

Tips for extracting a substring from a Django variable [HTML]

I am struggling to properly format an img element with a src attribute. The URL example I am working with is , where the number 45 represents the first two characters of the full item.image attribute. My trouble lies in extracting the {{item.image[0,2]}} ...

RecoilRoot from RecoilJS cannot be accessed within a ThreeJS Canvas

Looking for some guidance here. I'm relatively new to RecoilJS so if I'm overlooking something obvious, please point it out. I'm currently working on managing the state of 3D objects in a scene using RecoilJS Atoms. I have an atom set up to ...

Issues with displaying markers on Google Maps API using JSON and AJAX

I have successfully coded the section where I retrieve JSON markers and loop through them. However, despite this, the markers do not seem to be appearing on the map. Could someone please assist me in identifying the mistake? $.ajax({ url ...

unable to record the input value in jquery

Snippet for HTML code: <div id="Background"> <input id="search-Bar" type="text"> <button id="SearchButton">Search</button> </div> var name = $("#search-Bar").val(); $("#SearchButton").on("click", function() { co ...

How to Incorporate Templates into Django - Am I on the right track?

SITUATION: I am looking to incorporate multiple Templates into a main Template that is initially rendered. MY STRATEGY: I plan to render index.html, which extends base.html and includes the other templates (include_body.html, include_head.html) base. ...

Identify all div elements with a specific class within the parent div

How can I use query selector to exclusively target the p and p2 divs inside of a r class, without selecting them if they are outside of that class? <div> <div class="r"><div class="p"></div><div class="p2"></div></di ...

Creating a Precise Millisecond Countdown Timer using Angular 4 in Javascript

I'm currently facing a challenge in Angular 4 as I attempt to develop a countdown timer that accurately displays milliseconds once the timer falls below 1 minute (59 seconds or less) for a sporting event clock. My issue lies with the setInterval funct ...

Unable to include checkout and clear cart buttons in popover within bootstrap 5

I am currently working with BootStrap version 5.0.0 beta-2 and facing an issue when attempting to dynamically add a button within my popover. I have ensured that the scripts are included in the following order: <script src="https://ajax.googleapis. ...

Issue: ENOENT - The requested file or directory cannot be found in the context of an Angular2 and Express.js

I have made some changes to the Angular2 app on GitHub in order to use Express.js instead of KOA. However, when I try to load the app in FireFox, I encounter the following error in the `nodemon` console: Error: ENOENT: no such file or directory The Angul ...

Creating personalized Date and Time formatting on the X axis in Lightningchart JS

I have an X-axis representing time intervals in 15-second increments. ["2020-05-22 14:20:22", "173.9"] ["2020-05-22 14:20:40", "175.3"] ["2020-05-22 14:20:58", "172.4"] In my attempt to add this data to the chart, I used the following code: for(var key ...

The function is not operational while executing addEventListener

I'm encountering some bugs in my Angular 1.5 project with TypeScript. I'm trying to retrieve the scrollTop value from the .uc-card element. public container = document.querySelector(".uc-card"); In my $onInit, I have: public $onInit() { this ...

Issue with Facebook authentication in Django-allauth

Currently in the process of setting up login functionality with Facebook and Google using the django-allauth app, I've encountered an error: You are not logged in: You are not logged in. Please log in and try again. My Facebook App Settings https: ...

Exploring jQuery's AJAX capabilities in handling cross-domain requests and implementing Basic Authentication

I attempted the solutions provided in the suggested duplicate question, but unfortunately, they did not yield the desired outcome. I have been struggling to utilize AJAX to POST data to a remote server's API from a local PC client (testing on Chrome ...

What are the reasons behind the code in Django getting broken when data filtering is done?

I'm facing an unusual issue that seems to be linked to this specific line of code: userlist = twitter_user.objects.filter(enabled=True) The strange thing is that commenting out this line allows the code to run smoothly. However, as soon as I uncomme ...