CODEWITHSUNDEEP
htmldjango
user13137381
user13137381

Reputation: 135

django message alert exit button doesn't work

I'm new in django. I try to use the message alert to highlight the succes in posting new item to the display. I try to do it using bootsrtrap . Alert window includes exit button 'x' to dismiss alert. Message window works but the exit button doesn't and I can't figure out why.

My home html:

    {% extends 'base.html' %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% block content %}

    {% if messages %}
    {% for message in messages %}
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
             <span aria-hidden="true">&times;</span>
        </button>
      {{ message }}
    </div>
{% endfor %}
{% endif %}
    

{% if list_items %}
{% for item in list_items %}
{{ item.item }} |{{ item.completed }}<br>

{% endfor %}
{% endif %}




{% endblock %}




</body>
</html>}

base.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="{% url 'home' %}">To do list</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">



      </ul>
      <form class="d-flex" method="post">
          {% csrf_token %}
        <input class="form-control me-2" type="search" placeholder="Add to list" aria-label="Search" name="item" required>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
    <h1>Hello, world!</h1>
     <div class="container">
    {% block content %}

{% endblock %}
         </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script
              src="https://code.jquery.com/jquery-3.6.0.js"
              integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
              crossorigin="anonymous"></script>
  
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

  </body>
</html>

My view:

from django.contrib import messages
...
...
messages.success(request,('Succes'))

Can you tell me, why it doesn't work?

Upvotes: 0

Views: 1508

Answers (2)

eshaan7
eshaan7

Reputation: 1068

First, you haven't mentioned you are using bootstrap but from your HTML it's pretty obvious. Please try to include all details when asking a question, it helps everyone.

The problem here is one of grammar/spelling mistake. You have written .alert-dismissable but it actually is alert-dismissible. (reference to bootstrap docs)

In any case, this should work:

{% for message in messages %}
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
          {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
{% endfor %}

EDIT: Updated answer for bootstrap 5.0

Upvotes: 3

Medinios
Medinios

Reputation: 344

did you add all of the bootstrap cdns? Jquery , Js , min css? Can you try this code? I followed bootstrap:

<div class="alert alert-warning alert-dismissible " role="alert"> <button class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"><small><sup>x</sup></small> </span></button> {{message }} </div>

Upvotes: 0

Related Questions