{% extends "base.html" %} {% load pretty_money %} {% load i18n %} {% load render_table from django_tables2 %} {% block content %} <div class="row justify-content-center mb-4"> <div class="col-md-10 text-center"> <h4> {% trans "Search button" %} </h4> <input class="form-control mx-auto w-25" type="text" id="search_field" placeholder="{% trans "Name of the button..." %}"> <hr> <a class="btn btn-primary text-center my-1" href="{% url 'note:template_create' %}">{% trans "New button" %}</a> </div> </div> <div class="row justify-content-center"> <div class="col-md-10"> <div class="card card-border shadow"> <div class="card-header text-center"> <h5> {% trans "buttons listing "%}</h5> </div> <div class="card-body px-0 py-0" id="buttons_table"> {% render_table table %} </div> </div> </div> </div> {% endblock %} {% block extrajavascript %} <script type="text/javascript"> $(document).ready(function() { let searchbar_obj = $("#search_field"); var timer_on = false; var timer; function reloadTable() { let pattern = searchbar_obj.val(); $("#buttons_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #buttons_table"); } searchbar_obj.keyup(function() { if (timer_on) clearTimeout(timer); timer_on = true; setTimeout(reloadTable, 0); }); }); // on click of button "delete" , call the API function delete_button(button_id) { $.ajax({ url:"/api/note/transaction/template/" + button_id + "/", method:"DELETE", headers: {"X-CSRFTOKEN": CSRF_TOKEN} }) .done(function() { addMsg('{% trans "button successfully deleted "%}','success'); $("#buttons_table").load(location.pathname + "?search=" + $("#search_field").val().replace(" ", "%20") + " #buttons_table"); }) .fail(function() { addMsg('{% trans "Unable to delete button "%} #' + button_id, 'danger') }); } </script> {% endblock %}