【django】【javascript】現在開いているページにリロードではなく再アクセスしたい

Question

前提・実現したいこと

現在，djangoにてwebページを作成しています．
javascriptを組み込んで，自動的なページの遷移を実装したいと考えています．

発生している問題・エラーメッセージ

javascriptにてurlを読み込ませ，http://127.0.0.1:8000/topに再アクセスさせようとしていますが，
urlがおかしくなってしまい，表示したいhttp://127.0.0.1:8000/topが表示できません．

Page not found (404)
Request Method: 	GET
Request URL: 	http://127.0.0.1:8000/top/%7B%25%20url%20'coloring:top'%20%25%7D
//urlが~/topで終わらず,文字列が追加されてしまっている

Using the URLconf defined in config.urls, Django tried these URL patterns, in this order:

    1. admin/
    2. top/ [name='top'] 

The current path, top/{% url 'coloring:top' %}, didn't match any of these. 

該当のソースコード

top.html

{% extends 'coloring/base.html' %}
{% load static %}
{% block title %} top {% endblock title %}
{% block h1 %} title {% endblock h1 %} {% block contents %}


{% if first %}
  <form method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="btn btn-primary">送信</button>
  </form>
{% else %}
  <!--ここでjavascriptによってページの再アクセスを実行-->
  <script type="text/javascript" src="{% static 'js/link_top.js' %}"></script>
{% endif %}

{% endblock contents %}

link_top.js

window.location.href = "{% url 'coloring:top' %}";

試したこと

「django javascript url」や
「django javascript location.href」
などで検索をかけてみましたが，現在の自分の知識ではうまく活用できそうなものを見つけられませんでした．

不勉強ではありますが，ご助力いただければ幸いです．

補足情報（FW/ツールのバージョンなど）

iMac 10.15.6
python 3.8.2
django 3.1.1

Answer 1

回答

link_top.jsはJavaScriptの静的ファイルとして提供しているので、
Djangoのテンプレート処理を埋め込むことはそのままでは出来ません。

「JavaScript側で遷移させる」ことを前提とする場合だと、思い浮かぶ方法としては

1. jsファイルを使わずにテンプレート側に直接スクリプトを埋め込み、そこで変数を使う。
2. jsファイルでもともとの処理をする関数を定義して、引数として変数を渡す形式で関数を実行する。
3. jsファイルもDjangoのviewsで作成する

あたりが挙げられそうです。

1の例

※該当部分の修正例の差分です

  <!--ここでjavascriptによってページの再アクセスを実行-->
-  <script type="text/javascript" src="{% static 'js/link_top.js' %}"></script>
+  <script>
+    window.location.href = "{% url 'coloring:top' %}";
+  </script>

2の例

※該当部分の修正例の差分です

  <!--ここでjavascriptによってページの再アクセスを実行-->
   <script type="text/javascript" src="{% static 'js/link_top.js' %}"></script>
+  <script>
+    jump("{% url 'coloring:top' %}");
+  </script>

function jump(link) {
  windows.location.href = link';
}

蛇足

viewsの内容が質問に載ってないのでテンプレートを元にした感想なのですが、
firstがviews側で決定されているように見えました。
この場合だと、ブラウザで遷移する前に、viewsの段階でリダイレクトしたほうが良いとは思いました。

Comments

[kureid]

ご回答いただきありがとうございます！
ご教示いただいた1,2の方法でうまくページの遷移を実行することができました！

attekei様の仰る通り，viewsでfirstを定義しているので，確かにviewsで遷移させた方が良かったですね．盲点でした．

お忙しい中ご協力いただきありがとうございました！