django template内でselect(ForeignKey)のvalue(pk)を取得してurlsのリンクに渡す方法

python初心者です。お手数をおかけしますが有識者の皆さん力を貸してください。
blogを作成しており、記事(post)にカテゴリー(category)とタグ(tag)の設置をしています。
記事の作成(PostCreateView)時にカテゴリーとタグを設定するように設計しているのですが。
記事の作成の時に新規のカテゴリーとタグを追加できるように考えています。
以下の様に『＋』のアイコンを押すと新規追加で、『ペン』のアイコンはカテゴリーで選択されているものを編集で、同様に『ゴミ箱』は削除を考えています。

そして、カテゴリーの新規追加(category_create)、編集(category_update)、削除(category_delete)は以下のようにurls.pyを設定し
編集(category_update)、削除(category_delete)には、category_idを指定しています。

<urls.py>

python
1urlpatterns = [
2    path('', views.PostListView.as_view(), name="post_list"),
3    path('create/', views.PostCreateView.as_view(), name="post_create"),
4    path('<int:pk>/', views.PostUpdateView.as_view(), name="post_update"),
5    path('<int:pk>/', views.PostDeleteView.as_view(), name="post_delete"),
6    path('category/create/', views.CategoryCreateView.as_view(), name="category_create"),
7    path('category/<int:category_id>/', views.CategoryUpdateView.as_view(), name="category_update"),
8    path('category/<int:category_id>/', views.CategoryDeleteView.as_view(), name="category_delete"),
9]

質問は、記事の作成時にカテゴリーの編集や削除のリンクに必要なcategory_idに設定する値をどうやって、カテゴリーのselectから取得するかです。
記事作成ページ上で、カテゴリーを選択して、編集ボタンアイコンをクリックしたさいに編集ボタンアイコンのリンクに選択したカテゴリーのpkを渡す方法を知りたいです。
href={% url 'sample:category_update' category_id=<ここにselectで設定しているcategoryのpkを入れたい> %}
テンプレートのカテゴリーのselectのoptionのvalueをpkとして使えばよいと思っています。

記事の作成のテンプレートは以下です。

html
1{% block body_block %}
2<h1>
3    {% if not form.instance.pk %}
4    Create Post
5    {% else %}
6    Update Post
7    {% endif %}
8</h1>
9
10    <form class="" method="post">
11        {% csrf_token %}
12        <ul>
13          <li>
14            {{ form.title.label_tag }}
15            {{ form.title }}
16          </li>
17          <li>
18            {{ form.text.label_tag }}
19            {{ form.text }}
20          </li>
21          <li>
22            {{ form.category.label_tag }}
23            {{ form.category }}
24            <a class="btn btn-sm btn-primary" href="{% urls "sample:category_create" %}">
25              <span class="fa fa-plus"></span>
26            </a>
27            <a class="btn btn-sm btn-primary" href="{% urls "sample:category_update" category_id=???? %}">
28              <span class="fa fa-pencil"></span>
29            </a>
30            <a class="btn btn-sm btn-danger"  href="{% urls "sample:category_delete" category_id=???? %}">
31              <span class="fa fa-trash"></span>
32            </a>
33          </li>
34          <li>
35            {{ form.tags.label_tag }}
36            {{ form.tags }}
37          </li>
38        </ul>
39        <input type="submit" class="btn btn-primary" value="submit">
40    </form>
41    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
42    {{ form.media.js }}
43
44{% endblock %}

実行時の"{{ form.category }}"は、以下に変換されています。

selectのoptionのvalueをjavascriptで取得しようと考えているのですがもっと良い方法があるような気がしており、質問投稿させていただきました。
何か良い方法があればご教示いただけると幸いです。

ちなみにタグは、django-select2のModelSelect2TagWidgetを使用して、複数タグ選択と複数同時に新規追加はできているので問題ないです。
categoryもdjango-select2を使ってどうにかならないか検討中です。何かあれば別の投稿で質問させていただきたいです。

＜models.py＞

python
1class Category(models.Model):
2    name = models.CharField('カテゴリー', max_length=50)
3
4    def __str__(self):
5        return self.name
6
7
8class Tag(models.Model):
9    name = models.CharField('タグ名', max_length=255, unique=True)
10
11    def __str__(self):
12        return self.name
13
14
15class Post(models.Model):
16        title = models.CharField('タイトル', max_length=255)
17        text = models.TextField('本文', blank=True, max_length=1000)
18        category = models.ForeignKey(Category, verbose_name='カテゴリー', on_delete=models.PROTECT)
19        tags = models.ManyToManyField(Tag, verbose_name='タグ', blank=True)
20
21        def __str__(self):
22            return self.title
23

＜forms.py＞

python
1class PostForm(forms.ModelForm):
2    """記事の作成・更新フォーム"""
3
4    class Meta:
5        model = Post
6        fields = '__all__'
7
8class CategoryForm(forms.ModelForm):
9
10    class Meta:
11        model=Category
12        fields='__all__'

何か情報の不足等ございましたら、ご連絡をお願いいたします。
以上、よろしくお願いいたします。

行動規範の内容に同意します

回答2件

自己解決

結局、JavaScriptで対応いたしました。
以下の修正を行いました。

html
1　　　　・
2　　　　・
3　　　　・
4  <body onload="start()">
5
6      {{ form.category.label_tag }}
7      {{ form.category }}
8      <a class="btn btn-sm btn-primary" href="{% url 'sample:category_create' %}">
9        <span class="fa fa-plus"></span>
10      </a>
11      <a class="btn btn-sm btn-primary" id="link_update" href="#" >
12        <span class="fa fa-pencil"></span>
13      </a>
14      <a class="btn btn-sm btn-danger" id="link_delete" href="#" >
15        <span class="fa fa-trash"></span>
16      </a>
17　　　　・
18　　　　・
19　　　　・
20    <script>
21      function start() {
22        document.getElementById("link_update").hidden=true;
23        document.getElementById("link_delete").hidden=true;
24      };
25
26      let select = document.querySelector('[name="category"]');
27      select.onchange = event => {
28        var target_update = document.getElementById("link_update");
29        var target_delete = document.getElementById("link_delete");
30        if (select.selectedIndex > 0){
31          target_update.href = "{% url 'sample:category_update' 123 %}".replace(/123/,select.selectedIndex);<!-- NoReverseMatch対策 -->
32          target_update.hidden = false;
33        } else {
34          target_update.href = "#";
35          target_update.hidden = true;
36        }
37        if (select.selectedIndex > 0){
38          target_delete.href = "{% url 'sample:category_delete' 123 %}".replace(/123/,select.selectedIndex);<!-- NoReverseMatch対策 -->
39          target_delete.hidden = false;
40        } else {
41          target_delete.href = "#";
42          target_delete.hidden = true;
43        }
44      };
45
46    </script>
47  </body>
48</html>

最初に記事投稿(post_create)ページを開くと以下になり、「＋」アイコンだけ表示

カテゴリーを選択すると「ペン」と「ゴミ箱」のアイコンを表示して、選択されたカテゴリーの編集と削除ができるようになりました。

Djangoでどこまでの機能が入っていて、どんなプラグイン（django-xxx）があるのか、まだまだ理解していないため、いろいろ試してみようと思います。
また、React + django rest framework で作成した方が楽な気がしました。

投稿2021/01/24 08:33

編集2021/01/24 08:59

koyakoya

総合スコア6

質問は、記事の作成時にカテゴリーの編集や削除のリンクに必要なcategory_idに設定する値をどうやって、カテゴリーのselectから取得するかです。

Djangoが勝手にやってくれます。
migrateした際に、model=Postに該当するテーブルにブログ上の項目が設定されます。
その際に、ブログ記事レコードのカテゴリとタグの情報として、それぞれのテーブルのpkもセットされるはずです。

categoryもdjango-select2を使ってどうにかならないか検討中です。何かあれば別の投稿で質問させていただきたいです。

model=Post にpk以外に、”記事id”のような連番を項目として持たせます。
それをForeignKeyとして設定します。
カテゴリは、タグと同様に ManyToManyField の設定にすれば良いはずです。

【追記】
model=Categoryのpk(=id ?)を渡すだけで良いです。
もしpkでダメでしたら、category.name でいけるはずです。

html
1          <li>
2            {{ form.category.label_tag }}
3            {{ form.category }}
4            <a class="btn btn-sm btn-primary" href="{% urls "sample:category_create" %}">
5              <span class="fa fa-plus"></span>
6            </a>
7            <a class="btn btn-sm btn-primary" href="{% urls "sample:category_update" category.id %}">
8              <span class="fa fa-pencil"></span>
9            </a>
10            <a class="btn btn-sm btn-danger"  href="{% urls "sample:category_delete" category_id %}">
11              <span class="fa fa-trash"></span>
12            </a>
13          </li>

投稿2021/01/23 09:15

編集2021/01/23 10:54

_whitecat_22

総合スコア1305

koyakoya

2021/01/23 09:38

早急な回答ありがとうございます。質問の仕方が悪かったようです。テンプレート内のselectに設定したcategoryのpkを編集と削除のボタンアイコンのリンクに渡したい。 {% url 'sample:category_update' category_id = <ここにcategoryのpkを入れたい> %} pkを取得するのにテンプレートのselectのoptionのvalueの値を使えばよいと思っています。例えば、カテゴリーのselectで、”python”を設定したさいに”python”が設定されている<select>の<option value="3">python</option> のvalueをcategory_idとして渡せばよいと思うのですがどうやって渡したらよいのか分からない。思いつくのはJavaScriptで渡す処理を追加するぐらいでした。

_whitecat_22

2021/01/23 10:54

回答本文へ追記しました。

koyakoya

2021/01/23 13:28

ご回答ありがとうございます。しかし、このページは、記事投稿(create_post)なので、category.idは、Noneまたは空なので、ご教示頂いた方法では、NoReverseMatchになって記事投稿ページも表示できなくなります。また、selectを変更しても、category.idがダイレクトに変わらない気がするのですが？何か良い方法はないですかね~。

_whitecat_22

2021/01/23 21:42

まず、カテゴリを追加した時点で、カテゴリテーブル上のpkが振られますよね？ submitした時点で、カテゴリテーブルからidを拾ってきて（タグも同様）、記事に各情報とPKが付加されるイメージですが、いかがでしょうか。

koyakoya

2021/01/24 05:23

記事追加の「Create Post」ページのテンプレートに{% url 'sample:category_update' category.id %}を記載すると「Create Post」ページを表示する際にDjangoが{% url 'sample:category_update' category.id %}を変換する際にcategory.idが空なので、NoReverseMatchになるのは当然だと思うのですが？また、submitは、「Create Post」ページのsubmitボタンのことでしょうか？だとしたら質問の内容を理解されていないと思われます。カテゴリーのselectを選択後に「ペン」アイコンのカテゴリー編集(category_update)で選択したカテゴリーのnameを編集したい。このときにselectで選択したpkが欲しい。「Create Post」ページの項目を全て記載後に初めてsubmitボタンを押します。

_whitecat_22

2021/01/24 05:38

記事投稿（create_post）の処理であっても、カテゴリの登録をした際（＋、ペン、ゴミ箱の各アイコンを押して処理した際）に、まずカテゴリテーブルを更新してしまえば良いのですよね？そうすれば、カテゴリテーブルのpk(id)は存在することになりませんか？その後に、記事を投稿する（submitボタンを押下する）ようにすれば、記事とカテゴリ／タグは紐づけできるはずでは？少なくとも、djangoの管理画面から記事投稿する場合も同じ動きになるはずです。

koyakoya

2021/01/24 06:15

記事投稿(create_post)に{% url 'sample:category_update' category.id %}を記載するとNoReverseMatchになるのですけど？ create_postなので、当然category.idは空ですよね！

_whitecat_22

2021/01/24 06:44

私の理解が悪かったようです。申し訳ございません。 create_postの＋、ペン、ゴミ箱の各アイコンをクリックした際は、別タブ（別ウィンドウやダイアログでも良いです）で、まずcategoryフォームを呼び出し、categoryを更新してしまう処理とします。その後、create_post（ブログフォーム）でsubmitした際には、既に更新されたcategoryテーブルを読めますので、post時に category_idを指定できるかと。～/admin/(djangoの管理画面)での動きがそのような動きですので、それに倣うのがよろしいかと思います。いかがでしょうか。

koyakoya

2021/01/24 08:56

全然わからないです。

_whitecat_22

2021/01/24 09:04

一度、djangoの管理画面(/admin)から、記事投稿する際の動きを確認してみてください。 JSで実装されて解決したようで、何よりでした。お役に立てずに申し訳ございません

koyakoya

2021/01/24 09:14

adminを見て、同じ機能ならば、簡単に追加できると思って、出来なかったので質問をしています。最初からJSで組めばできることは分かっていたのですが・・・ createで、{% url 'sample:category_update' category.id %}がNoReverseMatchになることについて、理解されていますか？

行動規範の内容に同意します

あなたの回答