Leveraging Django template tags in JavaScript

Currently working on a project that does not have a slug field, and this value is created in the template using:

{{ n.title|slugify }}

I need to incorporate the slug into a jQuery function, but the variable always remains empty:

$("select#model").click(function() {
      var u = $(this).find(":selected").val();
      var slg = $(this).find(":selected").text();
      var slug = "{{ slg|slugify }}";
      window.location.href("link that is created with u and slug);
   });

Is there any way to use Django template tags within JavaScript?

Edit:

I have a queryset:

Model.objects.all()

How can I manually add a field to this queryset?

javascriptdjangodjango-templates

Answer №1

Sorry, it is not possible to achieve this directly within JavaScript. You can refer to this solution to slugify a text using jQuery instead.

Answer №2

If you want to include the slug in your HTML markup, you can do so using the data attribute and then extract it using JavaScript.

<select id="model">
   <option data-slug="{{ slg|slugify }}" ... this code snippet is placed in your template
</select>


$("select#model").click(function() {
      var $opt = $(this).find(":selected")
      var u = $opt.val();
      var slug = $opt.data("slug");

      window.location.href("create a link with u and slug");
   });

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

Aligning divs, prevent duplicate HTML within multiple divs

Currently, I am attempting to troubleshoot a jsfiddle issue. The main problem lies in my desire for the first two divs (with class="fbox") to be aligned next to each other on the same level. Furthermore, I am looking to enable dragging the image into the ...

javascriptjqueryhtmlcss

Activate the initial tab in JQuery UI accordion upon initialization

Hello, I have implemented a simple sidenav menu on my website. It consists of parent items and child items structured according to the h3 > div format as suggested by JQuery's documentation. My challenge now is to automatically open the "active" t ...

javascriptjqueryhtmlopencart

Incorporate Ruby's embedded helpers with jQuery for advanced functionality

How do I properly add a ruby helper to iterate through an active record response? I attempted to do so with the following code (.html or .append): $( ".result" ).html('<%= @products.each do |product| %><label>product</label><% e ...

javascriptjqueryruby-on-railsruby

using vuejs to pass a function as a prop

As I work on creating a foundational "TableComponent," incorporating selectable rows and more, I am faced with the requirement for this TableComponent to accept a prop named "buttons." These buttons are expected to be in the form of an array of objects ...

javascriptfunctionvue.jsscopevue-props

What is the reason for the lack of user data being saved in studio3t?

I'm struggling to identify the issue in my app development process. I'm creating an application that collects user email and password, storing them in a database. The problem lies in the fact that while user passwords are successfully stored, the ...

javascriptnode.jsexpressmongooseejs

Display popup just one time (magnific popup)

Attempting to display this popup only once during a user's visit. It seems like I might be overlooking something. <script src="http://code.jquery.com/jquery-1.7.min.js"> <link href="http://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1 ...

javascriptjquerycookiespopup

Guide to displaying database results in an HTML dropdown menu by utilizing AJAX technology

Greetings! As a newcomer to the realms of PHP and AJAX, I am currently on a quest to showcase the outcomes of a query within an HTML dropdown using AJAX. Let's delve into my PHP code: $pro1 = mysqli_query("select email from groups"); I made an attemp ...

javascriptphphtmljqueryajax

Loading screen preceding page change

I've been searching everywhere and can't find a good tutorial on how to smoothly transition pages when clicking a link on my website. I want the page to fade out on click, display a preloader, then fade in the new page once the preloader finishes ...

javascriptjqueryhtmlcss

Two interdependent select fields

I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...

javascriptjqueryhtmlcssselect

Web server experiencing issues with loading scripts and CSS files

After successfully building my project using CodeIgniter on localhost, I encountered an issue when trying to run it on a webhost. The site was functional but the design elements such as scripts and stylesheets were not loading properly. Before uploading t ...

javascriptphpcsscodeigniter

Concealing the parent template in Vue Router when the child is displayed

Having some trouble setting up Vue.js with the router, specifically dealing with view display issues. I've created a router.js file with child routes for breadcrumbs and route clarity purposes. Each individual route loads perfectly fine when opened. ...

javascriptvue.jsvuejs2

Utilize the Twitter Bootstrap modal feature to play autoplaying Youtube videos that automatically pause when

Similar Question: How do I halt a video using Javascript on Youtube? I am curious about how I can utilize the modal feature in Twitter Bootstrap to automatically play a Youtube video, and when a user clicks the "close" button, it will cease the video ...

javascripthtmlyoutubetwitter-bootstrap

Using Socket.io with NGINX has been quite a challenge as I have been struggling to properly configure the sockets

Having my backend set up with socket.io, I wanted to configure socket.io with nginx. Despite configuring nginx with the following settings, my routes other than sockets are functioning properly but my sockets are not working. server_name yourdomain.com ww ...

javascriptnode.jsnginxsocket.ioconfiguration

AngularJS Modals within Modals

I have a website where clicking a button triggers the opening of a modal window. Below is the essential controller code for this functionality: var modalOptions = { animation: true, templateUrl: 'somehtml.html', controller: ' ...

javascriptangularjstwitter-bootstrap

Tips on how to round a whole number to the closest hundred using Javascript

Suppose there is a numerical value given let x = 890 and the objective is to round it off to 900. If the number is 820, then it should be rounded to 800. We can safely assume that the input number (x) will always be an integer. While manually checking ...

javascriptreactjsalgorithmdata-structures

Incorporating text onto an HTML webpage

Context: My program reads a file and displays it on an HTML page. The code below utilizes regex to extract errors from the file. Instead of using console.log for debugging, is there a way to display the results on the HTML page? When attempting: document ...

javascripthtmlregexangularjswhile-loop

Selection determines the value of two fields

This form has predefined values that are used to create a link, but the issue is that these values vary depending on the location. Can you assist me with this problem? <input type="radio" id="iconapp1" name="department" value="1250"/><label for ...

javascriptphpjqueryhtmlforms

The style from 'http://localhost:2000/cssFile/style.css' was rejected because its MIME type was 'text/html'

Currently, I am attempting to include my style.css file in the home.ejs file being rendered by express.js. However, I keep encountering the following error: Refused to apply style from 'http://localhost:2000/cssFile/style.css' because its MIME t ...

javascripthtmlnode.jsexpressejs

How to open a PDF file in a new tab using Angular

Within my Angular 12 application, I am seeking to enable users to "view" a PDF file stored locally in the application within a new tab on Google Chrome. Currently, when implementing the code below in HTML, the file downloads rather than opening in a new ta ...

javascripthtmlangulartypescript

Can the ES2016 Proxy be used to intercept the "typeof" operation?

Can a handler property be defined to intercept typeof proxyObject? It is not mentioned in any of the traps listed on Mozilla. ...

javascriptecmascript-6