Extra elements getting appended during AJAX call on html page

I have a piece of code that refreshes an HTML table every 5 seconds using AJAX calls

I am basically emptying out the HTML table and then appending all of its data again every 10 seconds to achieve this

Something like this –

$('#_appendHere').html('')
$('#_appendHere').append(response);

JavaScript
​x
 
$('#_appendHere').html('')
$('#_appendHere').append(response);
​

where _appendHere is the id attribute of the table

This is my HTML code – (the data is being passed from my Django view to this page)

<body>
    <div>
        <div>
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
        </div>
    </div>

    <br>
    <br>
    <br>
    <br>

    <table id="_appendHere" class="table table-striped table-condensed">
        <tr>
          <th>Username</th>
          <th>Email</th>
          <th>Gender</th>
        </tr>
        {% for item in info_data %}
          <tr>
            <td>{{item.username}}</td>
            <td>{{item.email}}</td>
            <td>{{item.gender}}</td>
          </tr>
        {% endfor %}
      </table>

</body>

JavaScript
 
<body>
    <div>
        <div>
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
        </div>
    </div>
​
    <br>
    <br>
    <br>
    <br>
​
    <table id="_appendHere" class="table table-striped table-condensed">
        <tr>
          <th>Username</th>
          <th>Email</th>
          <th>Gender</th>
        </tr>
        {% for item in info_data %}
          <tr>
            <td>{{item.username}}</td>
            <td>{{item.email}}</td>
            <td>{{item.gender}}</td>
          </tr>
        {% endfor %}
      </table>
​
</body>
​

The CSS –

<style>
    table, td, th {  
        border: 1px solid #ddd;
        text-align: left;
    }
    
    table {
        border-collapse: collapse;
        width: 100%;
    }
    
    th, td {
        padding: 15px;
    }
</style>

JavaScript
 
<style>
    table, td, th {  
        border: 1px solid #ddd;
        text-align: left;
    }
    
    table {
        border-collapse: collapse;
        width: 100%;
    }
    
    th, td {
        padding: 15px;
    }
</style>
​

And this is the javascript section –

var append_increment = 0;
    setInterval(function() {
        $.ajax({
            type: "GET",
            url: {% url 'App1:tempPage' %},  // URL to your view that serves new info
            data: {'append_increment': append_increment},
        })
        .done(function(response) {
            $('#_appendHere').html('')
            $('#_appendHere').append(response);
            append_increment += 10;
        });
    }, 5000)

JavaScript
 
var append_increment = 0;
    setInterval(function() {
        $.ajax({
            type: "GET",
            url: {% url 'App1:tempPage' %},  // URL to your view that serves new info
            data: {'append_increment': append_increment},
        })
        .done(function(response) {
            $('#_appendHere').html('')
            $('#_appendHere').append(response);
            append_increment += 10;
        });
    }, 5000)
​

The GET request is being made to this URL in a Django view which renders the same page –

from django.contrib import admin
from django.urls import path,include
from App1 import views
app_name = 'App1'

urlpatterns = [
    path('temp/', views.tempPage,name="tempPage"),
]

JavaScript
 
from django.contrib import admin
from django.urls import path,include
from App1 import views
app_name = 'App1'
​
urlpatterns = [
    path('temp/', views.tempPage,name="tempPage"),
]
​

The views.py file –

from django.shortcuts import render
from App1.models import Info

# Create your views here.
def tempPage(request):
 
    info_data = Info.objects.all()
    context={"info_data":info_data}
    return render(request, 'App1/temp1.html', context)

JavaScript
 
from django.shortcuts import render
from App1.models import Info
​
# Create your views here.
def tempPage(request):
 
    info_data = Info.objects.all()
    context={"info_data":info_data}
    return render(request, 'App1/temp1.html', context)
​

For some reason, this code appends the input tag (the search box) as well.. but does it only once

And I am not sure why this is happening

I tried putting the input tag in a different div but that also does the same thing

Any help would be highly appreciated!! Thanks!!

Answer

I suspect your AJAX response contains the full Django response each time – it looks like you also have all those line-breaks <br> as well as the search form in the AJAX response.

You need to create a version that just supplied the inner HTML you want to put inside the element (specifically, just the table rows).

    <tr>
      <th>Username</th>
      <th>Email</th>
      <th>Gender</th>
    </tr>
    {% for item in info_data %}
      <tr>
        <td>{{item.username}}</td>
        <td>{{item.email}}</td>
        <td>{{item.gender}}</td>
      </tr>
    {% endfor %}

JavaScript
 
    <tr>
      <th>Username</th>
      <th>Email</th>
      <th>Gender</th>
    </tr>
    {% for item in info_data %}
      <tr>
        <td>{{item.username}}</td>
        <td>{{item.email}}</td>
        <td>{{item.gender}}</td>
      </tr>
    {% endfor %}
​

With just the rows in the response, you can replace them “in one hit” with:

$('#_appendHere').html(response);

JavaScript
 
$('#_appendHere').html(response);
​

Alternatively, you can handle receiving the full response by loading it into jQuery and then selecting out the table specifically.

var div = document.createElement('div');
div.innerHTML = response;

var html = div.querySelector('#_appendHere').innerHTML;

$('#_appendHere').html(html);

JavaScript
 
var div = document.createElement('div');
div.innerHTML = response;
​
var html = div.querySelector('#_appendHere').innerHTML;
​
$('#_appendHere').html(html);
​

Advertisement

Answer