Django/HTML：ボタンをクリックして情報を送信しますか？

私のページには、購入確認を求めるポップアップがあります。このモーダルは、私の「店」内の各項目に対応する10の異なるボタン・プレスによってトリガーされます。可能であれば、商品の価格、{{ item.price }}がモーダルウィンドウ内に表示されるようにしたいと思います。この情報をボタンプレスと一緒にどうやって送るのですか？ 10種類のモーダルを定義する必要がありますか？Django/HTML：ボタンをクリックして情報を送信しますか？

<!DOCTYPE html> 

{% extends 'base.html' %} 

{% load staticfiles %} 

{% block content %} 
<div class="row centre-v"> 
    <div class="card shop-card"> 
    <div class="card-block shop-clock"> 
     <h3><span class="shop-tag">Shop</span></h3> 
     {% if items %} 
     {% for item in items %} 
     <div class="alert alert-shop" role="alert"> 
     <span class="shop-title">{{ item.perk }}</span> 
     <span class="shop-cost"><button type="button" class="btn btn-primary btn-shop" data-toggle="modal" data-target="#shopModal">Buy:&nbsp;{{ item.price }}<img class="coin-img shop-coin" src="{% static 'assets/coin.png' %}" height="20px" width="auto"></button></span> 
     <div style="clear: right;"></div> 
     </div> 
     {% endfor %} 
     {% endif %} 
     </div> 
    </div> 
</div> 

<div class="modal fade" id="shopModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Purchase confirmation:</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     This will cost you {{ item.price }} 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 
{% endblock %}

出典

2017-05-30 iFengo

テンプレートに必要なすべての情報が既に用意されているため、ページをリロードするか、AJAXを使用する必要はありません。ボタンのonclickイベントをオーバーライドします。新しい関数は、モーダルに表示したいすべての情報を受け取ります。

あなたがボタンを持っているとしましょう：

<button onclick="showMyModal({{ item.price }})">Buy</button>

次にあなたがjsの関数を作成する必要があります。

function showMyModal(itemPrice){ 
    /* populate the element with the price */ 
    document.getElementById("modal-price-element").innerHTML = itemPrice; 
    /* Show the modal */ 

}

あなたが機能を通じてより多くの情報を送信したいとにデータを追加しますモーダル。 JQueryを使い慣れている場合は、JQueryを使用することもできます。

出典

2017-05-30 19:26:18

魅力のように動作します、ありがとうございます。 – iFengo

嬉しいです！ –

whileループで10の異なるモーダルを作成することは可能ですが、それは悪い習慣です。適切な解決策は、JavaScriptを使用してサーバーにAJAX呼び出しを行うためです。

アイテムのIDを使用してサーバーへのAJAX呼び出しを行うJavaScriptスクリプトを作成する必要があります。 Djangoでは、JSONを使用して価格（およびその他の情報）を返すビューを作成する必要があります。

このようなことをたくさん行う必要がある場合は、Django RESTフレームワークを参照することをお勧めします。

出典

2017-05-30 19:03:34

私の場合、適切な解決策は、1つのモーダルマークアップを作成することです。そして、AJAXコールを使ってサーバーにロードするボタンをクリックして表示します。

出典

2017-05-30 19:34:51

Django/HTML：ボタンをクリックして情報を送信しますか？

答えて

関連する問題