Ayoubich Escobar Ayoubich Escobar - 1 year ago 62
Python Question

Passing data form datatable to modal django

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 Source

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

You never posted this code so I had to figure out how it looked like, and do some changes based on it. 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>

I actually didn't test any code, but it shouldn't have bigger issues. Give it a try and tell me. If you would like to see the Client processed HTML option I can update my answer also.

Regards.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download