Django and Javascript

Using Django
1

Hello all

I am new to django and I like it so much.
Actually I am still studying some books that I bought and from internet. Ok I did the examples from book I think i have understand what i have read but as you know you must create something from your own to start learning the real thing.

I am creating a project but i need some help with my javascript example.

I am reading from https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_filters_table&stacked=h , but the code is not working 100% properly. It search but not as the example do. It doesn’t give me the only one record when i search
I think is something wrong with the javascript and django. I have installed bootstap 3
On my settings.py I have the following
INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,

# Thitd party apps
'bootstrap3',

and in the end of this file

Settings for django-bootstrap3

BOOTSTRAP3 = {
‘include_jquery’: True,
}

and below is my code

{% extends "dcsp/base.html" %}

{% block content %}


Filterable Table


Type something in the input field to search the table for first names, last names or emails:














      <tbody id="myTable">
        {% for citizen in citizens %}
            <tr>
                <td>{{citizen.firstname}}</td>
                <td>{{citizen.lastname}}</td>
                <td>{{citizen.tel_home}}</td>
                <td>{{citizen.tel_mob}}</td>
                <td>{{citizen.email}}</td>
            </tr>            
      </tbody>
        {% endfor %}
    </table>
    
    <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>

{% block javascript%}
<script>
    $(document).ready(function()
    {
        $("#myInput").on("keyup", function() 
        {
            var value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function() 
            {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>
{% endblock javascript %}

{% endblock content %}

do you know why this example is not working properly?

Firstname Lastname Telephone Mobile Email
2

I have found the solution
it was the {% endfor %} after tbody and that was the error
Thank you guys

3

In future please format your question nicely, it’s too hard to read to answer.