In Django, I am assigning the URL as the category but encountering an error that is expecting a semicolon in JavaScript

I am currently trying to set the category as the URL in Django but I am running into an error that states '; expected.javascript'

{% for category in all_categories %}
    <div onclick="location.href='{% url 'category' category.category %}';"
        style="box-shadow:0 5px 30px 0 rgba(0,0,0,.05);"
        class="hover:scale-105 hover:transform transition duration-300 cursor-pointer bg-gray-900 rounded-lg h-40 w-full my-4 text-center p-5 grid place-items-center">
        <div>
            <p class='text-4xl my-2'><i
                    class="bi bi-tags text-transparent bg-clip-text bg-gradient-to-r from-cyan-200 to-blue-500"></i>
            </p>
            <p class='text-base'>{{ category.category }}</p>
        </div>
    </div>
    {% endfor %}

Answer №1

onclick='location.href="{% url 'category' category.category %}";' 

Is it confirmed that the inner field within the category model is named category?

If this method is not working as expected, I suggest constructing the URL using JavaScript instead.

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

Unpacking nested objects using dynamically generated property names in a React state - a guide

Having trouble with using setState and figuring out how to destructure the object with a dynamic property name, denoted by id. The state looks like this after computation: { "inputConfig": { "5d4d684cadf8750f7077c739": { "0": "5d4d ...

What is the best way to emphasize specific months and years in an Angular Material datepicker?

I have an array of days, which can be from any year. I am attempting to customize the Angular Material datepicker to highlight specific months and years in the selection views based on the array of days. .html <input [matDatepicker]="picker" ...

What could be causing the malfunction of Bootstrap Multiselect functionality?

I have been attempting to set up Bootstrap Multiselect but it simply refuses to work. Despite trying various solutions, I am unable to pinpoint the issue. My index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

A guide on serializing multiple objects returned from a loop using JSON.stringify

My MVC code involves adding multiple travelers objects to the travelers array generated in a loop, and then using JSON.stringify on them. return amadeus.booking.flightOrders.post( JSON.stringify({ 'data':{ 'type ...

What could be causing my <UL> to not properly expand around the <LI> items inside of it?

I am currently working with WordPress and have created a menu using a list structure. Here is an example of how it looks: <ul> <li>Home</li> <li>About</li> <li>ParentItem <ul> <--- The heig ...

CSS: Inject Text at the End of Input Text's Value

Hey there, I'm facing a minor issue. The user wants to add some funny text to an input field if a specific condition is met. For example: Normal Condition: the input field shows "#{model.user}" Abnormal condition: the input field should display "# ...

What is the best way to retrieve information from a table that is connected to another table which in turn is linked to yet another table?

There are three tables in my database: result, course, and study. Here is a snippet of their structure: class Study(models.Model): id_study = models.IntegerField(primary_key=True) study_name = models.CharField(max_length=45) description = mode ...

Every time I try to create a new React app, I consistently run into the same error

I keep encountering this error every time I try to create a React app using create-react-app. ...

Does the Error page in Next JS 13 fail to properly manage fetch API errors?

After referencing the documentation for Next.js with app router, I followed the instructions to create an error.tsx page within my app folder (app/[lang]/error.tsx). This file contains the code provided in the docs. Additionally, I included some API calls ...

Exploring the World of AJAX with CodeIgniter

I've been on the hunt for a solid working example of using AJAX with Codeigniter, but most resources I've found are outdated. As an AJAX beginner, I'm struggling to find up-to-date tutorials. What I'm aiming for is an input form on a w ...

Minimize the vertical gap between menu items when they wrap onto a new line

When examining the screenshot of the website, you'll notice a considerable space between the first and second rows of menu items. I'm aiming to minimize this spacing as much as possible. The following CSS pertains to this issue: .gva-navigatio ...

Height and placeholder issue with ion-searchbar

Hey there, I hope everything is going well for you. I've encountered a problem with the Ionic 5 - Angular Searchbar feature. This is how I added the searchbar: <ion-searchbar [(ngModel)]="text" (ionChange)="sear ...

React with Typescript - Type discrepancies found in Third Party Library

Recently, I encountered a scenario where I had a third-party library exporting a React Component in a certain way: // Code from the third party library that I cannot alter export default class MyIcon extends React.Component { ... }; MyIcon.propTypes = { ...

Ways to make the background color white in Bootstrap 5

Can someone assist me in changing the background color of my portfolio to white? I attempted to use global CSS, but the black background on both sides of the page is preventing the change. return ( <> <Navbar /> <main className= ...

Arrange array of objects with unspecified and non-existent values

Is there a way to sort an array of objects in JavaScript that contains null and undefined values? The goal is to display items with a "jobTitle" property first, sorted by rating, followed by items without a "jobTitle" also sorted by rating. Sample Data: d ...

A JavaScript alert function that triggers no matter the return value

An alert is being sent by a function when a radio box's value returns as null, even though it should have a value that is not null. The issue lies in another function on the page that hides the tables where these radios are located, making it difficul ...

What circumstances could lead to a timeout while executing sequelize in a Node.js environment?

Within my application built with Node.js version 10.15.0, I utilize the sequelize package (version 4.44.3) to establish a connection to a remote MySQL database. This application operates within a Docker container. However, after prolonged usage, I encounte ...

What is the most effective method for declaring a constant within a WebComponent?

After receiving questions, I included more details on how I'm utilizing the constants. The main issue I am encountering is that the constants are being added to the global object, which raises concerns about potential name collisions. I created a Web ...

Difficulty encountered when transferring an array from Xcode to JavaScript via SBJSON

In an attempt to transfer an array from Xcode to a local HTML file, I am utilizing jQuery in the HTML code. This involves using loadHTMLString: with baseURL to read both the HTML and included .js files. However, I am encountering an issue when trying to us ...

Adjust the size of a textarea once text is removed

When you type text, a textarea expands in size. But what if you want it to dynamically decrease its height when deleting text? $('textarea').on('input', function() { var scrollHeight = parseInt($(this).prop('scrollHeight&apos ...