The dropdown is not working after updating navbar content using HTMX #39880

ZeyadMoustafaKamal · 2024-04-08T12:23:47Z

ZeyadMoustafaKamal
Apr 8, 2024

Describe the issue

So I am building a website using HTMX for the frontend so that the website look like the SPA applications. But sometime I might need to update the navbar content in case if the user logged in as it will require me the signup to logout link. But after doing this I can't open the dropdown anymore. and I have a video to show you what is going on. I wanted to make a video with some bigger details but github might not allow it because of the size.

Recording.2024-04-08.140601-2.mp4

And as you see I can't just open it any more.

And here is the navbar code

<nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
    <a class="navbar-brand" href="{% url 'index' %}">
        <img src="{% static 'img/mycoffee.png' %}" class="img-brand" alt="My Coffee">
        My Coffee
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">

          <li class="nav-item active">
              <a class="nav-link" href="{% url 'index' %}">Home <span class="sr-only">(current)</span></a>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Join us
            </a>
            <div class="dropdown-menu animate slideIn" aria-labelledby="navbarDropdown">

                <a class="dropdown-item" href="{% url 'login' %}">Log in</a>
                <a class="dropdown-item" href="{% url 'signup' %}">Sign up</a>
            </div>
          </li>

          <li class="nav-item" id="coffee-nav-item">
              <a class="nav-link" href="#">Coffee</a>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Products
            </a>
            <div class="dropdown-menu animate slideIn" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Caffè Americano</a>
            <a class="dropdown-item" href="#">Café Latte</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Cappuccino</a>
            <a class="dropdown-item" href="#">Espresso</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="{% url 'list_products' %}">All Products</a>
            </div>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="{% url 'about' %}">About</a>
          </li>

        </ul>
        <form class="form-inline my-2 my-lg-0" id="search-form" hx-get="{% url 'list_products' %}" hx-target="#content" hx-push-url=true>
        <input class="form-control mr-sm-2 remove-outline" id="search-input" type="search" name="name__icontains" placeholder="Search" aria-label="Search">
        <input type="hidden" name="description__icontains">
        <input type="hidden" name="price__gt" value="0">
        <div class="btn-group" role="group">
          <button class="btn btn-warning my-2 my-sm-0" type="submit">Search</button>
          <a href="{% url 'search' %}" class="btn btn-warning my-2 my-sm-0" type="submit">
            <svg class="bi bi-gear" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 014.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 01-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 011.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 012.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 012.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 011.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 01-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 018.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 001.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 00.52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 00-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 00-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 00-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 00-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 00.52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 001.255-.52l.094-.319z" clip-rule="evenodd"/>
              <path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 100 4.492 2.246 2.246 0 000-4.492zM4.754 8a3.246 3.246 0 116.492 0 3.246 3.246 0 01-6.492 0z" clip-rule="evenodd"/>
            </svg>
          </a>
        </div>

        </form>
    </div>
</nav>

Reduced test cases

This might be hard because sometimes I do the same thing and it works Ok and sometimes it doesn't. so that why I don't think that it might be easy. and also as I am working on a backend it doesn't seem that there is some way to reproduce the error in codepen.

What operating system(s) are you seeing the problem on?

The code is in the WSL but the browser is in windows.

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

4.4.1

julien-deramond · 2024-04-08T19:51:32Z

julien-deramond
Apr 8, 2024
Maintainer

This might be hard because sometimes I do the same thing and it works Ok and sometimes it doesn't. so that why I don't think that it might be easy. and also as I am working on a backend it doesn't seem that there is some way to reproduce the error in codepen.

Yes, it might be really difficult to spot the issue without any reproducible minimal env TBH.
When it doesn't work, are there any errors in the console? Or is it, just, not working?

0 replies

ZeyadMoustafaKamal · 2024-04-11T17:42:01Z

ZeyadMoustafaKamal
Apr 11, 2024
Author

I started to figure out how to reproduce it. I will make a video but first, let me explain what happens and how to reproduce this.

So I have some HTML that looks like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="{% static 'css/pretty-checkbox.min.css' %}">
    <title>My Coffee</title>
</head>
<body class="min-vh-100 d-flex flex-column">
    the navbar
    <div id="content" hx-history-elt>
        The main content goes here
    </div>
    the footer
</body>
</html>

and ignore the {%%} it's related to the Django template language. But just here is the main thing, my server returns some HTML content that will be added in the div with the id equal to content. and everything works OK but as you notice the navbar and the footer are outside all of that and this is OK in most cases until I need to rerender them like in case of the user logged in this way I will need to update the data in the navbar like changing the navbar item from login to logout and also put the username in the navbar like as you see "Hello, test". and I took care of that so that when the user logs in the whole page is rendered in the beginning, which works ok but after some time it doesn't work, typically when I try to change the content of the page (even if I just change the content of the div with the id of content) as you will see in the video.

Recording.2024-04-11.193744-2.mp4

2 replies

ZeyadMoustafaKamal Apr 16, 2024
Author

If you need me to clarify anything. feel free to tell me.

gerardnico Apr 22, 2024

Di you register your new dropdown?
https://getbootstrap.com/docs/5.3/components/dropdowns/#via-javascript

When the page is loading they are registered via the data attribute but they are not with HTML swapping.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

The dropdown is not working after updating navbar content using HTMX #39880

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Bootstrap

The dropdown is not working after updating navbar content using HTMX #39880

ZeyadMoustafaKamal Apr 8, 2024

Describe the issue

Reduced test cases

What operating system(s) are you seeing the problem on?

What browser(s) are you seeing the problem on?

What version of Bootstrap are you using?

Replies: 2 comments · 2 replies

julien-deramond Apr 8, 2024 Maintainer

ZeyadMoustafaKamal Apr 11, 2024 Author

ZeyadMoustafaKamal Apr 16, 2024 Author

gerardnico Apr 22, 2024

ZeyadMoustafaKamal
Apr 8, 2024

Replies: 2 comments 2 replies

julien-deramond
Apr 8, 2024
Maintainer

ZeyadMoustafaKamal
Apr 11, 2024
Author

ZeyadMoustafaKamal Apr 16, 2024
Author