addModal is not defined

JavaScript
1 
class DataManagement {
    constructor(apiEndpoint) {

        this.imageAdded = false;

        this.addModal = new bootstrap.Modal('#add-new-modal', {});
        this.editModal = new bootstrap.Modal('#edit-new-modal', {});
        this.viewModal = new bootstrap.Modal('#view-new-modal', {});

        this.initEventListeners();
        this.apiEndpoint = apiEndpoint;
    }

    initEventListeners() {

        document.addEventListener('DOMContentLoaded', () => {
            this.sendData({}, 'read');
        });

        document.querySelector('#add-new-modal').addEventListener('submit', (e) => {
            e.preventDefault();
            this.addNew(e.target);
        });

        document.querySelectorAll('.btn-edit').forEach((editButton) => {
            editButton.addEventListener('click', (e) => {
                const rowId = e.target.dataset.rowId;
                this.getEditRow(rowId);
                this.editModal.show();
            });
        });

        document.querySelectorAll('.btn-delete').forEach((deleteButton) => {
            deleteButton.addEventListener('click', (e) => {
                const rowId = e.target.dataset.rowId;
                if (confirm(`Are you sure you want to delete row number ${rowId}?`)) {
                    this.deleteRow(rowId);
                }
            });
        });

        document.querySelectorAll('.btn-view').forEach((viewButton) => {
            viewButton.addEventListener('click', (e) => {
                const rowId = e.target.dataset.rowId;
                this.getViewRow(rowId);
                this.viewModal.show();
            });
        });
    }


    sendData(obj, type) {
        const apiUrl = `${this.apiEndpoint}?data_type=${type}`;
        const form = new FormData();

        for (const key in obj) {
            form.append(key, obj[key]);
        }

        form.append('data_type', type);


        const ajax = new XMLHttpRequest();

        ajax.addEventListener('readystatechange', () => {
            if (ajax.readyState === 4) {
                if (ajax.status === 200) {
                    this.handleResult(ajax.responseText);
                } else {
                    alert("An error occurred");
                }
            }
        });

        ajax.open('post', apiUrl, true);
        ajax.send(form);
    }


    handleResult(result) {
        const obj = JSON.parse(result);

        if (typeof obj === 'object') {
            switch (obj.data_type) {
                case 'read':
                    this.populateTable(obj.data);
                    break;
                case 'save':
                case 'edit':
                case 'delete':
                    alert(obj.data);
                    this.sendData({}, 'read');
                    break;
                case 'get-edit-row':
                    this.fillEditModal(obj.data);
                    break;
                case 'get-view-row':
                    this.fillViewModal(obj.data);
                    break;
                default:
                    // Handle other cases or errors
                    break;
            }
        }
    }

    populateTable(data) {
        console.log(data);
        const tbody = document.querySelector(".js-table-body");
        let str = "";

        if (typeof data === 'object') {
            for (const row of data) {
                str += `<tr>
                    <td>${row.id}</td>
                    <td>${row.name}</td>
                    <td>${row.email}</td>
                    <td>${row.age}</td>
                    <td></td>
					<td>${row.city}</td>
					
                    <td>
                        <button class="btn btn-primary btn-sm btn-view" data-row-id="${row.id}">View</button>
                        <button class="btn btn-primary btn-sm btn-edit" data-row-id="${row.id}">Edit</button>
                        <button class="btn btn-danger btn-sm btn-delete" data-row-id="${row.id}">Delete</button>
                    </td>
                </tr>`;
            }
        } else {
            str = "<tr><td>No records found!</td></tr>";
        }

        tbody.innerHTML = str;
    }

    fillEditModal(data) {
        const editModal = document.querySelector("#edit-new-modal");

        for (const key in data) {
            if (key === "image") {
                document.querySelector(".js-edit-image").src = data[key];
            }

            const input = editModal.querySelector(`#${key}`);
            if (input !== null && key !== "image") {
                input.value = data[key];
            }
        }
    }

    fillViewModal(data) {
        const viewModal = document.querySelector("#view-new-modal");

        for (const key in data) {
            if (key === "image") {
                document.querySelector(".js-view-image").src = data[key];
            }

            const input = viewModal.querySelector(`#${key}`);
            if (input !== null && key !== "image") {
                input.innerHTML = data[key];
            }
        }
    }

    addNew(form) {
        const obj = {};
        const inputs = form.querySelectorAll("input, select, textarea");

        for (const input of inputs) {
            if (input.type === 'file' && input.files.length > 0) {
                obj[input.id] = input.files[0];
            } else {
                obj[input.id] = input.value;
            }

            input.value = "";
        }

        this.sendData(obj, 'save');
        this.addModal.hide();
    }

    editRow(form) {
        const obj = {};
        const inputs = form.querySelectorAll("input, select, textarea");

        for (const input of inputs) {
            if (input.type === 'file' && input.files.length > 0) {
                obj[input.id] = input.files[0];
            } else {
                obj[input.id] = input.value;
            }

            input.value = "";
        }

        this.sendData(obj, 'edit');
        this.editModal.hide();
    }

    deleteRow(id) {
        if (!confirm(`Are you sure you want to delete row number ${id}?`)) {
            return;
        }

        this.sendData({ id: id }, 'delete');
    }

    getViewRow(id) {
        this.sendData({ id: id }, 'get-view-row');
    }

    getEditRow(id) {
        this.sendData({ id: id }, 'get-edit-row');
    }
}

the event listener at the constructor is not working well . each time i click the modal with the id of #add-new-modal is returned addModal is not defined. Can some one please point me the rigjt direction

2

hello and welcome to fcc forum :slight_smile:

  • this doesnt seem correctly binded

perhaps consider looking into how to “explicitly blind” event handlers in react class components https://legacy.reactjs.org/docs/handling-events.html

happy coding :slight_smile:

3

It isn’t React.

You will have to provide the complete code if you want us to be able to debug this. Post a repo with all the code.

Does the error go away if you remove this?

this.addModal.hide();

.hide() is a jQuery method and I doubt you can call it directly on what the Bootstrap modal constructor returns. You might be able to call it on this.addModal._element but the _ is signaling to you that it is an internal/private property so it really is likely not meant to be used like that.

Edit: It would likely need to be wrapped inside a jQuery object/selector.

$(this.addModal._element).hide()
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.