如何动态重新渲染模板？

Question

Currently I am trying to create a dynamic filter for listing model objects in a template. Here is the django view:

def view_data(request):
    text = request.GET.get('text')
    persons = None
    if text:
        try:
            persons = models.Person.objects.get(code__regex=text)
        except models.Person.DoesNotExist:
            pass
    return render(request, 'view_data.html',
                  {'persons': persons if not isinstance(persons, models.Person) else [persons]})

The related part from the template:

<div class="jumbotron row">
  <form>
    <label>Alanyok szűrése</label>
    <input id="filter" type="text" placeholder="Keresett alany">
  </form>
</div>

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      {% for person in persons %}
        <a class="list-group-item list-group-item-action" id="list-{{person.code}}" data-toggle="list" href="#" role="tab" aria-controls="{{person.code}}">{{person.code}}</a>
      {% endfor %}
    </div>
  </div>
  <div class="col-8">
    <div class="visualisation content">
        <div class="canvas_div">
          <canvas id="Canvas1" width="540" height="250" style="border:1px solid #202020;">
          </canvas>
        </div>
    </div>
  </div>
</div>

The input field with filter id has a callback on keyup event which sends a request to django with the content of the input field which is used in the view for query. Here is the callback:

$( "#filter" ).keyup(function() {
    $.get("", {text: $('#filter').val()});
});

When I checked it with Pycharm debugger, the render returns the correct html but on the client side the html doesn't change. How to re-render with the new object list?

Answer 1

Take a part of your html code that you want to replace and place it inside a new html file like this:

new_html:

<div class="list-group" id="list-tab" role="tablist">
  {% for person in persons %}
    <a class="list-group-item list-group-item-action" 
       id="list-{{person.code}}" data-toggle="list" 
       href="#" role="tab" aria-controls="{{person.code}}">
       {{person.code}}
    </a>
  {% endfor %}
</div>

now in your view replace the name of your old html file ( that you are rendering ) with the new html file like this:

 return render(request, 'new_html.html',
             {'persons': persons if not isinstance(persons,models.Person) else [persons]})

and now in your ajax you can dynamically load this new_html like this :

 $( "#filter" ).keyup(function() {
    $.get("", 
          {text: $('#filter').val()},
          function(data){
              $( "#list-tab" ).replaceWith( data );
          } 
    );
});

Answer 2

You are not doing nothing with the returned data. Add a callback function in the get method call. You get the response from the server in the first argument. Use that to hide and show contents on the page. Or you can even replace elements in the DOM. See jquery.replaceWith .

$( "#filter" ).keyup(function() {
    $.get("", {text: $('#filter').val()}, function(response){  });
});