将数据表格数据传递给modal django

Question

我想显示从数据表到模态引导程序的数据.

例:

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>

views.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

你的模态代码包含一个form,但是你在询问如何显示一些数据,所以这让我有点困惑你真正想做的事情.请更清楚.

我假设你想在a上显示一些数据modal,并且应该使用AJAX从服务器检索数据.

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

1.服务器处理HTML

在您的初始模板中,您只有一个空div,您可以使用HTML代码更新.

每次你想要显示一些数据时,你会做一个AJAX请求,它会返回HTML代码(在这种情况下是modalHTML代码),你只需将它插入你的div.

2.客户端处理HTML

在您的初始模板中,您可能拥有HTML代码的框架(在本例中为modalHTML框架),并且您可以通过javascript更新其中的某些值.

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

差异

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

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

码

由于我更喜欢​​在后端工作而不是编写太多的javascript,因此以下解决方案将是Server Processed 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 class="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调用,设置返回的HTML modal-div并最终打开全新的模态.

你的控制器(Django视图):

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>

我实际上没有测试任何代码,但它不应该有更大的问题.试一试告诉我.如果您想查看客户端处理的HTML选项,我也可以更新我的答案.

问候.