python - Passing data form datatable to modal django

Question

I want to display data from datatable to modal bootstrap.

Example:

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

Button will send data to modal to display for update.

Button code:

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

Modal code:

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

I want to display two values Name and prenom in modal, the data show it from database.

I think the best solution is using ajax.

Answer 1

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.

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:

1. Server processed HTML

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

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.

2. Client processed HTML

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.

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.

---

Differences

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.

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.

---

Code

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

Your main template:

<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 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();
    }
  });
});

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.

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)

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