ajaxをdjangoで使いたい
いくつか問題が生じてajaxが実現しない。
エラー対処したこと
まずbootstrapのStarter templateをそのまま使うとajaxが使えないことは知っていた。starter templateではslim版なのでmin版を使いなさいってことは情報収集でわかっていたことだ。
https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template
...starter template <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
というわけでmin版に変更する。
sterter templateのslim.min.jsからslimを削除してmin.jsにしてみたところconsoleでエラーが出てしまった。これに関してminに削除編集を行う方法では不適切であったことが判明した。参考資料:https://www.inet-solutions.jp/technology/jquery-ajax-bootstrap/
min用のものは全く別物であるからきちんとしたところから拾ってくること。これが1つ目の教訓であり注意点だ。
次にconsoleで生じているエラー
Uncaught ReferenceError: jQuery is not defined
このように表示されている。http://ch-mage.hatenadiary.jp/entry/2013/12/12/210939によるとjavascriptの読み込み順序が不適切だとエラーが出るようなことが書いてあった。試験的にajaxを行おうとしていたので、読み込み順序は自分も気になる箇所がある。ちょっと修正してみる。
エラー原因の明確な情報を得られた。当たり前と言われたら当たり前らしいことだけど、jqueryを読み込む前にjqueryのコードを実行することで自分のエラーが生じる。参考資料:http://mikaduki.info/webprogram/js/jquery/1192/
とてもわかり易かった。自分の場合では以下の構成になっていた。
...base.htmlにて ...省略 <body> {% block content %} {% endblock %} #以下にjQuery読み込みコード <script>省略</script> </body>
...detail.htmlにて {% extends "base.html" %} {% block content %} detail.html特有の内容 <script>ajaxのコード</script> {% endblock %}
確かにテンプレートを統合すると、まずbase.htmlが読み込まれ中盤でdetail.htmlを読み込んだ後、base.htmlのjQuery読み込みの順序になる。だからエラーが出たということで間違いないだろう。 じゃあこのエラーを解消するためにはどのような順序を経なければならないか? {% block content %}中にjQueryが読み込まれることが必要だと考える。もっと言えば{% block content %}のscript読み込み前にjQueryのソースを差し込めばいいのではないか?
https://narito.ninja/blog/detail/88/
いつもお世話になっているナリトさんのブログに明快な解決方法があった。ブログどおりにjQueryのコードは別途{% block extrajs %}としてbase.htmlに追加するという方法を用いた。具体的にはbase.htmlでjQueryのソースコードを読み込んで、更にajaxやbootstrapのスクリプトを読み込んだ直後に{% extrajs %}を書き込む。detail.htmlでは{% block content %}に加え、{% extrajs %}でajaxでどのように動くか書く。これだけでよかった。