質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.22%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 1,628

mulberryfields

score 805

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で対応するしかないのかと思います。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2016/07/09 20:08

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

    キャンセル

  • Lhankor_Mhy

    2016/07/09 20:12

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

    キャンセル

  • mulberryfields

    2016/07/10 09:36

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

    キャンセル

回答 1

checkベストアンサー

+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も全くわかないので外してるかもしれませんが、こういう意味じゃない?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/10 10:40

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

    {% 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タグをこのようなことに使ってはいけないのかもしれませんが、何か良い方法が分かるまでとりあえずこの方法で対応しようと思います。

    キャンセル

  • 2016/07/10 13:16

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

    キャンセル

  • 2016/07/10 15:06

    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;
    })
    });
    で実装できました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る