ｊQueryのイベント発生により生じた結果をURLディスパッチャに渡す方法

Question

Djangoでwebアプリを作成しています。

ボタンを押したら、そのボタンに付いているid（tagname）を取得して、
URLディスパッチャを通して、tag/tagnameのURLに飛ぶようにjQueryを書こうと考えました。

<button type="button" class="tag" id="{{tagname}}">{{tagname}}</button>

<script>
$(function(){
    $("button.tag").click(function(){
        tagname = this.id;
        window.location.href = '{% url 'site:tag' tagname %}';    
    })
});
</script>

# urls.py
url(
    r'^tag/(?P<tagname>\w+)$',
    views.tag,
    name='tag'
)

しかし、このページにアクセスした時に、
NoReverseMatch at /
Reverse for 'tag' with arguments '('',)' and keyword arguments '{}' not found. 1 pattern(s) tried: ['tag/(P<tagname>)/$']
というエラーが出てしまいました。

理由は、
{% url 'site:tag' tagname %}は、Djangoのテンプレートであるため、HTMLを吐き出す時点でデータが埋まっていなければならないのに、
実際にはボタンを押して初めてtagnameという変数に値が渡されるので、
HTMLを読み込んだ時点ではエラーが出てしまうということだと思います。

jQueryのイベント発生により生じた結果をURLディスパッチャに渡す方法は、ないでしょうか？
もし無理なら、ページ遷移にあたり、jQueryを使わずに、formで対応するしかないのかと思います。

お分かりの方、ご教示頂ければ幸いです。
よろしくお願いいたします。

Comments

[Lhankor_Mhy]

それは無理なんじゃ…… Djangoがテンプレートレンダリングを完了しなければjavascriptは動作しないと思うのですが。どうしてもというなら、URLディスパッチャを応答させるAjax用ページを作成して、jQueryから叩いて取得するとか？

[Lhankor_Mhy]

あるいは、tagnameが空文字でもマッチするURLディスパッチャを作っておいて、javascriptで文字列を連結するとか。

[退会済みユーザー]

そうですよね。レンダリング完了した後でJavascriptが起動しないので、私が当初考えていた方法はできないと思います。何か他の方法で検討したいと思います。

Answer 1

<button type="button" class="tag" data="{% url 'site:tag' tagname %}">{{tagname}}</button>

<script>
$(function(){
    $("button.tag").click(function(){
        window.location.href = this.data;
    })
});
</script>
```PythonもDjangoも全くわかないので外してるかもしれませんが、こういう意味じゃない？

Comments

[退会済みユーザー]

ご回答、ありがとうございます。
そういう意味です。
buttonタグの方に書けばうまくいきそうですね。

後は、テンプレートの中のtagnameは、Djangoで渡されるので、
{% url 'site:tag' {{tagname}} %}
のような書き方ができればうまくいくはずなのですが…
考えてみます。

[yuji38kwmt]

細かいことですが、"data"属性でなく、"data-*"属性として書くべきです。
http://www.html5.jp/tag/attributes/data.html
"data-url"などがよいと思います。

[shi_ue]

なるほど。ご指摘ありがとうございます。勉強になります！

[退会済みユーザー]

ご指摘いただき、ありがとうございます。

{% url 'site:tag' {{tagname}} %}という書き方はできなかったので、
結局、下記の方法で対応できました。

<button type="button" class="btn tag" id="/tag/{{tagname}}">{{tagname}}</button>

$(function(){
$("button.tag").click(function(){
data = this.id;
window.location.href = data;
})
});

idタグを利用したのは、data-*タグを使うとNaNが帰ってきてしまうためです。tagnameには、日本語文字が入っているからかもしれません。本来、idタグをこのようなことに使ってはいけないのかもしれませんが、何か良い方法が分かるまでとりあえずこの方法で対応しようと思います。

[yuji38kwmt]

>idタグを利用したのは、data-*タグを使うとNaNが帰ってきてしまうためです。
すみません、jsも修正する必要があることを伝え忘れていました。
"data-url"属性の値は、`this.dataset.url`で取得できます。
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/dataset

[退会済みユーザー]

yuji38kwmtさん、ありがとうございます。

ご指摘いただいたとおり、
<button type="button" class="btn tag" data-url="/tag/{{tagname}}">{{tagname}}</button>

$(function(){
$("button.tag").click(function(){
data = this.dataset.url;
window.location.href = data;
})
});
で実装できました。