【Djangoエラー処理】一発解決!Bootstrap Alertのクローズボタンが動かない!alert-dismissible|jQueryの読み込み方法

Django

(最終更新月:2021年12月)

「BootstrapでAlertをつけたけど、☓ボタンが動かない!」

「jQueryのCDNをつけてるのに正しく動かない!」

という方へ向けて、カンタンに解決できる方法を見つけたのでお伝えします!

当記事を通じて、

  • django-bootstrap4のインストール
  • jQueryが読み込めない!問題を解決する方法

についてお伝えします

CDNからjQueryを読み込めない場合は、django-bootstrap4を使うとカンタンに問題が解決します

【インストール方法】

pip install django-bootstrap4

【設定方法】

settings.pyで、

INSTALLED_APPS = [
    #....,
    'bootstrap4',
]

TEMPLATES = [
    {
        'OPTIONS': {
            'context_processors': [
            #....,
            ],
            'builtins':[  #この箇所を追記します
                'bootstrap4.templatetags.bootstrap4', #この箇所を追記します
            ], #この箇所を追記します
        },
    },
]

とします

【HTMLテンプレートで読み込み】

HTMLテンプレート内で、

{% bootstrap_javascript jquery=’full’ %}

としましょう

一例として、django-allauthのメッセージで適用する場合、

    {% block allauth %}
      {% bootstrap_javascript jquery='full' %}
    {% if messages %}
          <div>
              {% for message in messages %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                  {{message}}
                  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
                </div>
              {% endfor %}
          </div>
      {% endif %}
    {% endblock %}

となります

「Invalid block tag」エラーが出てしまう場合は、{% bootstrap … %}タグの上に{% load boostrap4 %}を入れてみよう!

関連書籍

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

「Djangoでのアプリ開発を学びたい!」
「Djangoで開発したアプリをWebで公開するにはどうするの?」

という方は必見です!

【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

タイトルとURLをコピーしました