Uncaught TypeError: Невозможно прочитать свойство addEventListener с нулевым значением в net при очистке фильтра - PullRequest
Новая
       6

Uncaught TypeError: Невозможно прочитать свойство addEventListener с нулевым значением в net при очистке фильтра

1 голос
/ 07 мая 2020 
I'm using Tabulator to implement search

Here's my html -- no problems until I try to search, then, I receive the above-captioned error:


<div>
    <select id="filter-field">
        <option></option>

        <option value="custId">Customer ID</option>
        <option value="custType">Customer Type</option>
        <option value="custName">Customer Name</option>
        <option value="groupId">Group ID</option>

    </select>

    <select id="filter-type">
        <option value="=">=</option>
        <option value="<"><</option>
        <option value="<="><=</option>
        <option value=">">></option>
        <option value=">=">>=</option>
        <option value="!=">!=</option>
        <option value="like">like</option>
    </select>

    <input id="filter-value" type="text" placeholder="value to filter">
</div>

<div id="example-table"></div>


   I'm receiving an error in the JavaScript:
            ````<script>



        var table;


        function handleCellUpdated(cell) {
            console.log(cell);
            console.log(cell.getRow());
            console.log(cell.getRow().getData());
            var record = cell.getRow().getData();

            $.ajax({
                url: "api/SalesTrackerCustomers/" + record.id,
                data: JSON.stringify(record),
                contentType: 'application/json',
                type: "PUT",
                success: function (response, textStatus, xhr) {
                    console.log("success")
                },
                error: function (XMLHttpRequest, textStatus, error) {
                    console.log("error")
                }
            });

        }


        function initTable() {

            //Build Tabulator
            table = new Tabulator("#customers", {
                height: "90vh",
                placeholder: "Loading...",
                addRowPos: "bottom",
                columns: [
                    { title: "Customer ID", field: "custId", width: 150, editor: "input" },
                    { title: "Customer Type", field: "custType", width: 130, editor: "input" },
                    { title: "Customer Name", field: "customerName", editor: "input" },
                    { title: "Group ID", field: "groupId", editor: "number" }
                ],
                cellEdited: handleCellUpdated
            });

            loadCustomers();
        }



        function loadCustomers() {
            console.log("loading data");
            $.ajax({
                url: "/api/SalesTrackerCustomers",
                method: "GET"
            }).done(function (result) {

                table.setData(result);




            });
        }
        // javascript for add/delete
        //Add row on "Add Row" button click
        document.getElementById("add-row").addEventListener("click", function () {
            table.addRow({});
        });

        //Delete row on "Delete Row" button click
        document.getElementById("del-row").addEventListener("click", function () {
            table.deleteRow(1);
        });

        // javascript for search

        //Define variables for input elements
        var fieldEl = document.getElementById("filter-field");
        var typeEl = document.getElementById("filter-type");
        var valueEl = document.getElementById("filter-value");

        //Custom filter example
        function customFilter(data) {
            return data.car && data.rating < 3;
        }

        //Trigger setFilter function with correct parameters
        function updateFilter() {
            var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
            var typeVal = typeEl.options[typeEl.selectedIndex].value;

            var filter = filterVal == "function" ? customFilter : filterVal;

            if (filterVal == "function") {
                typeEl.disabled = true;
                valueEl.disabled = true;
            } else {
                typeEl.disabled = false;
                valueEl.disabled = false;
            }

            if (filterVal) {
                table.setFilter(filter, typeVal, valueEl.value);
            }
        }

        //Update filters on value change
        document.getElementById("filter-field").addEventListener("change", updateFilter);
        document.getElementById("filter-type").addEventListener("change", updateFilter);
        document.getElementById("filter-value").addEventListener("keyup", updateFilter);

        //Clear filters on "Clear Filters" button click
        document.getElementById("filter-clear").addEventListener("click", function () {
            fieldEl.value = "";
            typeEl.value = "=";
            valueEl.value = "";

            table.clearFilter();
        });

Кто-нибудь может добавить информацию об этой ошибке? Я пробовал перемещать JavaScript, и я думаю, что это может быть связано с размещением JavaScript. Выше отображается ошибка с заголовком при // Очистить фильтры при нажатии кнопки «Очистить фильтры»; это также может быть в табуляторе нагрузки javascript функция в таблице

1 Ответ

1 голос
/ 07 мая 2020

Вы получаете сообщение об ошибке, потому что пытаетесь добавить eventListener к нулевому значению. При использовании document.getElementById(''), если он не находит элемент, он возвращает null. Поскольку вы не проверяете, что вы нашли элемент, ваш .addEventListener пытается присоединиться к нулевому значению, поэтому выдается ошибка.

Глядя на ваш код, есть три области, в которых нет html элемент (из того, что включено в вопрос) В вашем HTML нет элемента filter-clear, add-row или del-row. Если вы видите ошибку над document.getElementById('filter-clear').addEventListener(), похоже, что ваш элемент filter-clear не существует.

Вот пример, который обнаруживает ошибку и добавляет ее в тело. https://jsfiddle.net/nrayburn/58he2jr6/6/

...