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

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

ただいまの
回答率

90.01%

Django+Jqueryで追加ボタンで追加した行を削除するボタンを実装したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 849

07290729

score 10

構成管理のためにサーバの情報を取得して
DBなどに登録するUIを作っているのですが
jqueryで、disk2, 3, 4, ...
のように数値を遷移させる方法がわからず困っています、、、
djangoのコードの一環のため以下のドキュメントを参照させていただいています。
※内容はjqueryに起因するものという認識なので上記タグで投稿しました

https://narito.ninja/blog/detail/36/

特に <script>内の
var totalManageElement = $('#id_tr_disk-TOTAL_FORMS');
この部分で操作時点で画面上で操作されている 
<tr><input> で囲まれた行数を取得して
その次の行にIDを振ろうとしているのですが
(さらに、そのIDに従って行を削除するボタンを作るのが最終目的ですが)
これがうまく取得できなくて困っています。。。。

どなたかご教授いただければ幸いですmm

イメージ説明

# cat svradm_design/inspec_ui/forms.py
from django import forms
from .models import Server, Disk

class InspecForm(forms.Form):
  class Meta:
    mode = Server
    fields = '__all__'

DiskFormSet = forms.inlineformset_factory(
  Server, Disk, fields='__all__', extra=1, can_delete=True
)
{% extends "inspec_ui/base.html" %}

{% block content %}

<h1>inspec_ui</h1>
<form action="" method="get">
{% csrf_token %}
  <table>
    <tr><td>ServerName</td><td><input type="test" size="20" name="servername"></td></tr>
    <tr><td>CPU-Memory</td><td><input type="test" size="20" name="cpumemory"></td>
    <tbody id='disk'>
      <tr><td>Disk</td><td>partition_name</td><td>size</td><td>filesystem</td></tr>
      <tr id="disk1">
        <td></td>
        <td><input type="test" size="20" name="disk_partition_name"></td>
        <td><input type="test" size="20" name="disk_size"></td>
        <td><input type="test" size="20" name="disk_filesystem"></td>
        <td><button id="add_disk" type="button" class="btn btn-primary">+</button></td>
      </tr>
    </tbody>
    <tr><td colspan='2'><input type="submit" value="Submit"></td></tr>
  </table>
  servername : {{ servername }}<br>
{% endif %}
{% if cpumemory %}
  cpumemory : {{ cpumemory }}<br>
{% endif %}
{% if disk_partition_name %}
  disk_partition_name : {{ disk_partition_name }}
, disk_size : {{ disk_size }}
, disk_filesystem : {{ disk_filesystem }}
{% endif %}

{% endblock %}

{% block extrajs %}
<script>
//var currentDiskCount
$(function(){
    var totalManageElement = $('#id_tr_disk-TOTAL_FORMS');
    var currentDiskCount = parseInt(totalManageElement.val());
    console.log(`hoge: ${currentDiskCount}`);
    currentDiskCount += 1;
    var disk_id = `disk${currentDiskCount}`
    $('button#add_disk').on('click', function(){
        var disk_partition_nameElement = $('<input>', {
            id: 'id_disk_partition_nameElement-' + currentDiskCount + '-name',
            type: 'disk_patrition_name',
            name: 'disk_set-' + currentDiskCount + '-name',
        });
        var disk_sizeElement = $('<input>', {
            id: 'id_disk_set-' + currentDiskCount + '-src',
            type: 'disk_size',
            name: 'disk_set-' + currentDiskCount + '-src',
        });
        var disk_filesystemElement = $('<input>', {
            id: 'id_disk_set-' + currentDiskCount + '-src',
            type: 'disk_filesystem',
            name: 'disk_set-' + currentDiskCount + '-src',
        });
        var disk_partion_name = jQuery('<div>').append(disk_partition_nameElement.clone(true)).html();
        var disk_size = jQuery('<div>').append(disk_sizeElement.clone(true)).html();
        var disk_filesystem = jQuery('<div>').append(disk_filesystemElement.clone(true)).html();
        var disk_delete = `<button id=\'delete_${disk_id}\'>-</button>`
        var addline = `<tr id=${disk_id}><td></td><td>${disk_partion_name}</td><td>${disk_size}</td><td>${disk_filesystem}</td><td>${disk_delete}</td></tr>`
        console.log(disk_partion_name);
        $('tbody#disk').append(addline)
        totalManageElement.attr('value', currentDiskCount);
        console.log('disk_id:' + currentDiskCount)
    });
    //var currentDiskCount = 1;
    $(`button#delete_${disk_id}`).on('click', function(){
       $('<tr id=\'disk${disk_id}\'>').remove();
       //$(this).remove();
    });
});
</script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • Lhankor_Mhy

    2019/02/08 10:43

    テンプレート部分に、#id_tr_disk-TOTAL_FORMS が存在しないようですが、これはご提示いただいているコードの外にあるものでしょうか?
    そして、その要素には現在の行数が納められている、という理解で合っていますか?

    キャンセル

  • 07290729

    2019/02/10 11:16

    先に、要旨に近いご指摘をいただいていたのですが
    より直接的にご指摘をいただいたgh640さんのコメントをベストアンサーとさせていただきました。
    申し訳ありません。
    ご指摘ありがとうございました。

    キャンセル

回答 1

checkベストアンサー

0

対応する form クラス等がどのようになっているのかわからないため全容はわかりませんが、 xxx-TOTAL_FORMS というのは Django の formset の機能であるということは理解された上で使われていますか? 

formset は使ってなくて自前で input 要素を書かれているのであれば ID xxx-TOTAL_FORMS の要素は存在しないのではないかと思いますが、いかがでしょう。

追記 1

コメントでいただいたリクエストにお応えします。

すみません、補足させていただきました。
リストに追加したものをfomrs.pyとして使用しています。
ただ、こちらが機能していないようで(もしくはTOTAL_FORMSの書き方に問題がありそうですが)
うまく値がとれてないようなのです・・・。

formset の management_form は描画されていますか?手探りであれこれ試されるのでもよいですが、おそらく、一度公式のドキュメントにも目を通して、 formset の TOTAL_FORMS がどのように使えるものなのかを正確に理解した上で取り組まれる方が、近道ではないかと思います。

該当する部分はこのあたり ↓ です。

Stack Overflow の次のページ ↓ の回答等もとてもわかりやすいです。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/10 11:13 編集

    ご指摘のとおり
    ”formset は使ってなくて自前で input 要素を書かれているのであれば”
    で、まだこちらは勉強中でした・・。

    こちら学習して再度コード見直してみます。ご指摘ありがとうございます。

    補足)
    一応 forms.pyにはFormsetを追加しているのですが
    (現在使用しているforms.pyを追記しました
    こちらが機能していないようです・・・
    (おそらく書き方がおかしいのだと思いますが・・・

    キャンセル

  • 2019/02/10 11:41

    そうでしたか。ご丁寧にコメントいただきありがとうございます。

    キャンセル

  • 2019/02/10 11:44

    すみません、補足させていただきました。
    リストに追加したものをfomrs.pyとして使用しています。
    ただ、こちらが機能していないようで(もしくはTOTAL_FORMSの書き方に問題がありそうですが)
    うまく値がとれてないようなのです・・・。
    (Jquery中のcurrentDiskCount が”NaN”になってしまっています)

    キャンセル

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

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