且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

将数据表单数据表传递给模态Django

更新时间:1970-01-01 07:58:18

您的模态代码包含form,但是您正在询问如何显示某些数据,因此这让我有点困惑.请更清楚.

Your modal code contains a form, but you are asking how to display some data, so it leaves me a bit confusing what you really want to do. Please be more clear.

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

I am going to suppose you want to show some data on a modal, and that data should be retrieved from the server using AJAX.

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

There are several ways to do this. Let me explain you two general options:

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

In your initial template you just have an empty div which you can update with HTML code.

每次要显示一些数据时,您都会执行AJAX请求,该请求将返回HTML代码(在本例中为modal HTML代码),然后将其插入到div中.

Everytime you want show some data, you do an AJAX request which will return HTML code (in this case the modal HTML code) and you just insert it on your div.

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

In your initial template you may have a skeleton of your HTML code (in this case the modal HTML skeleton), and through javascript you can update some values on it.

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

Everytime you want to show some data, you do an AJAX request which may return JSON data and using that information you update the values in the HTML skeleton.

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

Using the first one implies writing more code in the backend (the Django template in this case) while the latter encourages you to write more javascript code in the frontend.

由于在服务器端渲染模板的速度非常慢,并且传输的数据也更大(所有HTML代码通常包含的字节数都大于原始JSON数据),因此前一种选择可能会更慢.无论如何,我相信对于这种简单的情况,这种区别是不相关的.

As rendering the template on server side is quite slow and the transfered data is also larger (all the HTML code usually contains more bytes than raw JSON data), the former option may be a bit slower. Anyway I believe that for this simple case such difference is not relevant.

由于我更喜欢​​在后端工作而不是编写过多的JavaScript,因此以下解决方案将是服务器处理的HTML 的实现.就在这里(顺便说一句):

As I prefer to work on the backend rather than writing too much javascript, the following solution will be an implementation of a Server Processed HTML. Here it is (you were pretty close btw):

您的主模板:

<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:

Javacript in the main template:

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,最后打开全新的模式.

The important things here are that we have our button and a jQuery event that is triggered when someone clicks on it. The triggered function do the AJAX call, sets the returned HTML in the modal-div and finally opens the brand-new modal.

您的控制器(Django视图):

Your 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>