python - 将数据从数据表传递到模态 django

Question

我想将数据从数据表显示到模式 Bootstrap 。

示例:

Name    | prenom | id |edit
example | test   |  2 |button edit 

按钮会将数据发送到模态以显示更新。

按钮代码:

<a class="btn btn-info" role="button" data-toggle="modal" data-form="{% url 'up' id=val.id }" data-target="#myEdit" >Edit</a>

模态代码:

<div class="modal fade" id="myEdit" role="dialog">
    <div class="modal-dialog">
        <form  class="well contact-form" method="post" action="{% url 
      'up'}">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <label for="usr">Name:</label>
                    <input type="text" class="form-control" required="" name="uss" value="{{ instance.name }}" id="uss">
                    <label for="pwd">Password:</label>
                    <input  type="password"  class="form-control" required="" value="{{ instance.sname }}" name="pwd" id="pwd" >
                </div>
                <div class="modal-footer">
                    <button  type="submit" class="btn btn-default">Valider</button>
                    <button  value="" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>

View .py

def posts_edit(request, id=None):
    instance = get_object_or_404(namemodel, id=id)
    context={
        'instance': instance
    }
    return render(request, '/ges/sortie/', context)

我想在模态中显示两个值Name和prenom，数据显示来自数据库。

我认为最好的解决方案是使用ajax。

Answer 1

您的模态代码包含一个表单，但您询问如何显示一些数据，因此这让我有点困惑您真正想要做什么。请说得更清楚。

我假设您想要在模式上显示一些数据，并且应该使用 AJAX 从服务器检索该数据。

有多种方法可以做到这一点。让我向您解释两个一般选项:

1。服务器处理的 HTML

在您的初始模板中，您只有一个空的 div，您可以使用 HTML 代码对其进行更新。

每次您想要显示一些数据时，您都会执行一个 AJAX 请求它将返回 HTML 代码(在本例中为 modal HTML 代码)，然后您只需将其插入到您的div。

2.客户端处理的 HTML

在您的初始模板中，您可能有 HTML 代码的骨架(在本例中为 modal HTML 骨架)，并且通过 javascript 您可以更新其中的一些值。

每次您想要显示一些数据时，您都会执行一个 AJAX 请求它可能会返回 JSON 数据，并使用该信息更新 HTML 框架中的值。

<小时/>

差异

使用第一个意味着在后端编写更多代码(本例中为 Django 模板)，而后者鼓励您在前端编写更多 javascript 代码。

由于在服务器端渲染模板的速度相当慢，并且传输的数据也较大(所有 HTML 代码通常比原始 JSON 数据包含更多字节)，前一个选项可能会慢一些。无论如何，我相信对于这个简单的情况，这种差异是不相关的。

<小时/>

代码

由于我更喜欢​​在后端工作而不是编写太多 JavaScript，因此以下解决方案将是服务器处理的 HTML 的实现。这是(顺便说一句，你已经非常接近了):

您的主模板:

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Prenom</th>
      <th>ID</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ val.name }}</td>
      <td>{{ val.prenom }}</td>
      <td>{{ val.id }}</td>
      <td><a class="btn btn-info" class="open-modal" data-url="{% url 'up' id=val.id }">Edit</a></td>
    </tr>
    <tr>
      ...
    </tr>
    ...
  </tbody>
</table>

<!-- Here we create this empty div for inserting modal -->
<div id="modal-div"></div>

主模板中的Javacript:

var modalDiv = $("#modal-div");

$(".open-modal").on("click", function() {
  $.ajax({
    url: $(this).attr("data-url"),
    success: function(data) {
      modalDiv.html(data);
      $("#myEdit").modal();
    }
  });
});

这里重要的是我们有我们的按钮和一个当有人点击它时触发的 jQuery 事件。触发的函数执行 AJAX 调用，在 modal-div 中设置返回的 HTML，最后打开全新的模态。

您的 Controller (Django View ):

def posts_edit(request, id=None):
    instance = get_object_or_404(namemodel, id=id)
    context={
        'instance': instance
    }
    return render(request, 'modal.html', context)

您的模态模板modal.html

<div class="modal fade" id="myEdit" role="dialog">
  <div class="modal-dialog">
    <form  class="well contact-form" method="post" action="{% url 'up'}">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <label for="usr">Name:</label>
          <input type="text" class="form-control" required="" name="uss" value="{{ instance.name }}" id="uss">
          <label for="pwd">Password:</label>
          <input  type="password"  class="form-control" required="" value="{{ instance.sname }}" name="pwd" id="pwd" >
        </div>
        <div class="modal-footer">
          <button  type="submit" class="btn btn-default">Valider</button>
          <button  value="" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </form>
  </div>
</div>