各株式に固有のモーダルヘッダを取得するにはどうすればよいですか？

Question

私は、各株式についての情報を表示する異なるモーダルを持つ仮想株式市場を作成しようとしています。 しかし、テンプレートはレンダリングして、各在庫に対して一意のモーダルヘッダーを取得できません。

「CIPLA」の在庫をクリックしても、「HDFCを購入する」がモーダルヘッダーとして取得されます。 これは私のdjangoテンプレートです。

{% for stock in user.stocks.all %} 
    <li class="list-group-item"> 
     <b>{{ stock.stock_name }}</b> 
     <p id="curr">Current price : {{ stock.current_price }}</p> 
     Bought at : {{ stock.buy_price }} 
     <button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button> 
     <!--Modal for buy--> 
     <div id="buy-modal" class="modal fade" role="dialog"> 
      <div class="modal-dialog"> 
       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Buy {{ stock.stock_name }}</h4> 
        </div> 
        <div class="modal-body"> 
         <form method="post" action="/stocks/{{ user.id }}/{{ stock.stock_name }}/buy/" > 
          {% csrf_token %} 
         <label for="quantity">Quantity</label> 
         <input type="number" id="quantity-buy" name="quantity"> 
         <button class="btn" id="confirm-buy" type="submit" >Buy</button> 
         </form> 
        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 

      </div> 
     </div> 

私は{% endfor %}で終了しました。

Answer 1

エラーがこの行によって引き起こされている：あなたが見ることができるように

<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button> 

、このラインはdata-target="#buy-modal"にマッピングされます。これは、id="buy-modal"のDom要素がそれによって呼び出されることを意味します。あなたのコード内で見れば

は今、あなたはモーダルの複数の番号（が、同じHTML id付き）を作成しています。

ルートエラーは同じIDを持つ複数のDom要素です。あなたはこの行を見れば：この行

<div id="buy-modal" class="modal fade" role="dialog"> 

（それがループ内で実行されているため）あなたのドム内のn倍に作成されます。これは、同じIDを持つn-modalが存在することを意味します。これはまた、Domには同じ番号のを持つのn個の数値を持つことを意味します。

これは、htmlを書く上で間違った習慣です。

ボタンをクリックするたびに：

<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button> 

HTMLパーサは、あなたのhtml内の各data-targetを探します。 n（あなたがnを作成して以来、1以上）です。今度は、htmlは常にモーダルを初期化している間に1つしか解析しなかったので、常に最初または特定のモーダルを呼び出します。 は、したがって、あなたがボタンをクリックするたびに、同じモーダルだから、あなたが異なるIDと異なるボタンがをトリガーとモーダルを作成する必要があり、この問題を解決するために

をポップアップ表示されます。

これが役に立ちます。ありがとう。