Instructions on creating a dropdown menu that displays all items in my product inventory

Below is the code snippet for iterating over different products to create a dropdown list:

<li
{ % if not category % }class = "selected" {% endif % }>

<a href="{% url "shop:product_list" %}">All</a>

</li>

{% for c in categories %}

    <li {% if category.slug == c.slug %}class="selected"{% endif %}>
        <a href="{{ c.get_absolute_url }}">{{ c.name }}</a>
    </li>
{% endfor %}

It seems that after the 'Books' category, nothing is being displayed in the dropdown list.


I would like to add the following code snippet to the dropdown list:

        <li {% if not category %}class="selected"{% endif %}>
            <a href="{% url "shop:product_list" %}">All</a>
        </li>
        {% for c in categories %}
            <li {% if category.slug == c.slug %}class="selected"{% endif %}>
                <a class="dropdown-item" href="{{ c.get_absolute_url }}">{{ c.name }}</a>
            </li>
        {% endfor %}

However, the above code snippet is not displaying anything in the dropdown list. Here's the relevant views.py and models.py files for reference.

--------------------------------------------------------------------------------

Answer №1

In my opinion, the issue might be occurring due to nesting a ul within a p, which is considered invalid HTML markup.

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

Changing the orientation of the column and row headers in Handsontable to be the

Typically, the HandsOnTable displays A,B,C.. in the column header and 1,2,3.. in the row header. I am looking to switch it around. That is, have A,B,C.. for the row header and 1,2,3.. for the column header. Thank you, Santhosh ...

Div content with a unique angle

I need to create a website with slanted div elements that must meet the following criteria: The sections should have a height of approximately 400px when displayed side by side, and about 800px when they stack vertically. It would be ideal if this could ...

What is the method for deactivating a hyperlink with CSS?

Within my wordpress page, there is a specific link present. This particular link belongs to a class. Is it viable to deactivate this link solely through the use of CSS? <a class="select-slot__serviceStaffOrLocationButton___5GUjl"><i class="mater ...

Issue remaining with Selenium trying to click on a hyperlink within an <li> tag

Having an issue with the code "var links = driver.FindElement(By.XPath("/html/body/div[2]/div[1]/div/div/div/div[1]/div/nav/ol/li[3]")); I am facing difficulties in clicking a link using Selenium that is within an li tag (var links), even though it is cli ...

Issue with event listener arising once elements have been loaded into the dom

I have a project where I want to click on a category card to obtain its id and then redirect to the movies screen. I understand that using row.eventlistener() in index.js executes before the elements are rendered, causing the id not to be captured. How ca ...

What is the best way to position a div at the bottom of a web page?

I have a question that may seem basic, but I've been struggling to find a solution. Despite searching for answers, none of the suggestions I've come across have worked for me. My application has two main containers - a header and a content div. T ...

The process of embedding a .js file into an HTML document involves

The question appears to be straightforward. The common approach is to simply utilize this code snippet: <script src='https://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js' type='text/javascript'/> Alternatively, in Jsfiddle, we ...

Ensure that the table header remains in place while scrolling within a fixed height constraint

I am experiencing a repeated <tbody> element in my bootstrap table with a fixed height of 140px, and I have implemented scrolling if the data exceeds that height. I am encountering challenges in keeping the header with values 'Season 2018 2019 ...

Ways to modify the color of a container's border by interacting with radio buttons through JavaScript

I'm currently facing a challenge with creating a settings dropdown menu that allows users to select different themes. Each theme is supposed to modify the background color and border color, but I have successfully implemented only the background color ...

Looking at an HTML string in its natural HTML form

In my AngularJS app, I have autogenerated HTML code that highlights certain texts. The specific line of code responsible for generating this HTML looks like this: var replaced = original.replace(regEx, '<span style="background-color: red;">&apo ...

Is it possible for a label to contain elements other than the input field for accessibility purposes?

Issue with Accessibility: Is it possible for a <label>...</label> to contain elements other than an <input ... />? In our project, we are utilizing Material UI, and their <Switch /> component is structured as follows: <label> ...

What is the best method for reducing the length of the user input in a JQuery auto-complete box?

Is there a method to eliminate leading and trailing spaces from the user's input in a jQuery auto-suggesting text <input> box before comparing it to a list of names and values? In my current setup, users are expected to enter names into a textbo ...

Tips for making slanted lines using CSS

Can this image be created using CSS and/or Bootstrap 4? https://i.sstatic.net/ajzk6.png ...

Tips for adjusting the font size according to the varying number of characters entered

I am currently facing a challenge with adjusting the font size based on the dynamic number of characters. For example, I have a set of characters with a font-size of 40px, and as more characters are added, the font size should decrease to fit within the av ...

Steps to bold a specific word within a div on react native

Hey there! I'm working with the code below: getDescription = () => { return( <div className="Description">{this.props.mytext + ': ' + this.name} </div> ) } Is it possible to bold only the specific te ...

Transform a Django/Python dictionary into a JavaScript dictionary using JSON

I need to convert a Python dictionary into a JavaScript dictionary. From what I understand, I have to first convert the Python dict into JSON format and then transform it into a JavaScript Object. view.py jsonheaderdict = json.dumps(headerdict) {{jsonhe ...

The scrolling function of the jQuery UI select menu is not working properly on the Android browser

I am currently developing a mobile application that utilizes the jQuery UI select menu. The functionality works well, but I have encountered an issue with certain drop downs being too long to display properly. While my PC shows scrollable floating divs as ...

Vue Django application access denied: CSRF verification failed

It seems like I have encountered a Django issue with the backend system. My Vue code is located in frontend/ (127.0.0.1:8080) while the Django code resides in backend/ (127.0.0.1:8000). I have carefully followed the instructions provided by Django regardin ...

Trouble with CSS: struggling to remove the bullet point from the <li> tag

I have created a CSS style for the layout of my basic document: div#content li { font-size:95%; list-style-image:url(/css/bullet_list.gif); line-height:1.5; } Further down in another document, I've included a CSS file that defines .code ...

Exploring jQuery: Techniques for Hovering, Changing, and Toggling Images

Currently, I am busy working on my project and I am attempting to achieve this by... I ideally want everything to be operational through click actions for each individual image, allowing them to have their unique "paper". I am aiming for a hover effect an ...