Is there a way to incorporate a Django template variable as a parameter in order to invoke a JavaScript function?

1. Here is an example of HTML code where I am calling the javascript function changeButton:

 <a href="#" class="btn btn-primary btn-sm" onclick="changeButton( "{{ request.session.variable }}" );return false;">Button</a>

2. This is the JavaScript function being called:

  function changeBookNowButton(variable) {
  document.getElementById("bookButton").innerHTML=variable
  }

3. The value of the argument 'request.session.variable' is: joe

I encountered an error: 1. SyntaxError: syntax error occurs if I pass the argument in double quotes "{{ request.session.variable }}" 2. Without quotes, {{ request.session.variable }} results in a ReferenceError: joe is not defined.

Answer №1

Here is a suggestion for you to try:

<a href="#" class="btn btn-primary btn-sm" onclick="updateButton( '{{ request.session.data }}' );return false;">Click Me</a>

'{{ request.session.data }}'

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

Refine radio button list based on input typed in text box

How can I filter my checkbox list based on letters typed into a textbox? The data for my checkbox list comes from a database. I attempted to do this using JavaScript, but it's not working. Is there a better way to achieve this functionality? <asp: ...

In Vue, props are not automatically assigned; be sure to avoid directly mutating a prop when assigning it manually to prevent errors

I am working with two Vue components: GetAnimal.vue and DisplayAnimal.vue. GetAnimal.vue sends a JSON object containing animal data to DisplayAnimal.vue using router push. DisplayAnimal.vue then displays this data. The process flow is as follows: I navigat ...

In Javascript, the function sets a Boolean value to true but unexpectedly returns false

I have encountered an issue with my Audio Player. I created it in the document ready and set a variable for playing to false. However, even though the function seems to be called correctly, it does not set that variable to true as expected. The code for ...

What is the best way to set up jest to generate coverage reports for Selenium tests?

I recently made the switch to using jest for testing my JavaScript project after encountering coverage issues with mocha and chai. While my unit tests are providing coverage data, my Selenium tests are not. I've tried various solutions found in outdat ...

How to access and utilize parent directive methods effectively in AngularJS

Looking for advice on the best way to utilize parent directive methods in its child directive. Option one: Pass it as a scope parameter in the HTML where you initialize the child directive. Option two: Make the parent directive required and gain ...

Difficulty with CasperJS multi-select functionality

I am currently attempting to utilize CasperJS for choosing both options in a multiple select within an HTML form: <select id="bldgs" name="bldgs" multiple="multiple" size="6" autocomplete="off"> <option value="249759290">Southeast Financia ...

What is the best way to properly redirect a page using a router link in Vue.js 2?

I've encountered an issue with the router-link component in Vue.js 2. I have set up my router file index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import HomeView from '../views/HomeView.vue'; import ...

Minifying Angular using grunt leads to 'Error initializing module' issue

Currently, I have multiple controllers, models, and services set up as individual files for preparation before minification. My goal is to combine and minify all these files into one JS file for production. To illustrate how my files are structured, here ...

Certain URLs do not receive requests when using jQuery.ajax(), while others are successful

Our Rails application features inline editing, allowing users to submit changes back to the server via PUT requests. The URL for the PUT request varies based on the object being edited and the page the user is on. The same JavaScript code supports this fea ...

Tips for determining the actions of a node prior to its inception

Is there a way to automatically run scripts on specific elements after their creation? For example, using a jQuery plugin like autoresize to expand the height of a textarea. If I use $('.textarea').autosize(), only the current textareas will be a ...

Exploring the functionality of Kendo Grid within an Angular application

Currently, I am facing some challenges while trying to execute my Karma tests using the kendo grid within a fresh Angular project. The specifications for this specific component are outlined below: import { async, ComponentFixture, TestBed } from '@a ...

What is the easiest method for querying one-to-many connections in Django?

Looking for a more efficient way to return a dictionary in JavaScript that includes data from both a Category table and Sub_category table. The desired format is 'Category1': 'Sub_cat1, Sub_cat2, ...'. Any ideas on a better approach? T ...

Importing a Javascript file into an Angular project

I am currently working on an Angular application where routes are redirected to specific HTML pages. However, I am unsure about how to include related JavaScript files along with this redirection process. For instance, when a user clicks on a link that lo ...

Troubleshooting: JQuery dropdown selection not updating image display

I am trying to create a select menu that changes the car image when a user selects a different model, but for some reason it is not working. Here is what I have tried: <h2 class="model">A6 <img src="images/3.jpg" id="image" width="544" height="2 ...

Finding the main page URL using PHP within a JavaScript include: A comprehensive guide

I am facing an issue where I have a page with a header include that needs the phone number to change only if the filename of the current page contains a specific word. Typically, for a change outside of an include, the following code would suffice. <? ...

Enhancing Dataset Quality: Incorporating Failed Results with Apify

We have implemented the Apify Web Scraper actor to execute a URL validation task that retrieves the input URL, the title of the page, and the HTTP response status code. Our testing includes 5 URLs - 4 valid ones and 1 non-existent URL. The successful resul ...

Include web browsing history

In my ASP.Net/VB project, I am facing an issue with floating DIVs. Whenever users try to close the floating DIV by clicking on the back button in their browser, it creates a confusing experience. My solution is to add a "#" entry to the browser history wh ...

"Utilizing jQuery and AJAX to manage identical-named option boxes with

I am encountering an issue with multiple select boxes that share the same name. Currently, when I choose a value from one select box, it submits that selection and updates the database. However, when I select an item from another select box, it still submi ...

Ionic (Angular) experiencing crashes due to numerous HTTP requests being made

My template contains a list of items <ion-list class="ion-text-center"> <div *ngIf="farms$ | async as farmData"> <ion-item (click)="selectFarm(farm)" *ngFor="let farm of farmData" detail=&quo ...

What is the best way to access the EXIF data of an image (JPG, JPEG, PNG) using node.js?

In my quest to access the EXIF data of an image in order to extract GPS information such as Latitude and Longitude, I have experimented with approximately 4-5 EXIF packages available on npm/node, including exif, exif-parser, node-exif, exifr, exif-js, and ...