Question

在我的页面上，我有一个弹出模式要求购买确认。这个模态可以通过10个不同的按钮按下来触发，这些按钮对应于我的＆＃34; shop＆＃34;中的每个项目。如果可能的话，我想让项目{{ item.price }}的价格在模态窗口中可见。如何在按下按钮的同时发送此信息？我是否必须定义10种不同的模态？

<!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 %}

Answer 1

可以在while循环中制作10种不同的模态，但这是不好的做法。正确的解决方案是使用JavaScript对服务器进行AJAX调用。

您需要制作一个JavaScript脚本，该脚本将使用该项的ID对服务器进行AJAX调用。在Django中，您需要编写一个视图，通过使用JSON返回价格（和其他信息）。

如果您需要做很多这样的事情，我建议您查看Django REST框架。

Answer 2

正如我所看到的，您已经拥有模板中所需的所有信息，无需重新加载页面或使用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。

Answer 3

至于我，正确的解决方案是创建一个模态标记。并通过AJAX调用点击按钮加载信息到服务器。

Django / HTML：通过点击按钮发送信息？

3 个答案: