save and exit to edit-mode

85 Views Asked by At

i have tables with edit button on the side. if i click the edit button it works fine, i can change/modify and the button edit change to save button just in case you need to save update the changes in the table. when i click the save button it updates the table but the editable cells in row table, does not exit, even i hit the save button it didn't exit the edit mode. i used javascript for my coding. can you help me please

i just add this line because in my other code work it works.

function saveCV(rowId) {
    var row = document.querySelector("tr[data-id='" + rowId + "']");
    var editableCells = row.querySelectorAll(".editable");

    var formData = new FormData();

    editableCells.forEach(function (cell) {
    var fieldName = cell.getAttribute("data-field");
    var newValue;

    if (fieldName === "cvdate") {
        var inputElement = cell.querySelector("input");
        newValue = inputElement ? inputElement.value : "";
    } else if (fieldName === "branch") {
        var selectElement = cell.querySelector("select");
        newValue = selectElement ? selectElement.value : "";
    } else if (fieldName === "booknumber" || fieldName === "costcenter") {
        var selectElement = cell.querySelector("select");
        newValue = selectElement ? selectElement.value : "";
    } else {
        var inputElement = cell.querySelector("input");
        newValue = inputElement ? inputElement.value : "";
    }

    formData.append(fieldName, newValue);
    });

    var actionsCell = row.querySelector(".center-align-column");
    actionsCell.innerHTML = `
    <button class='edit-button' onclick='editCV(${rowId})'>Edit</button>
    <button class='delete-button' onclick='deleteCV(${rowId})'>Delete</button>`;

    row.removeAttribute("data-edit-mode"); // Clear the edit mode flag
    row.removeAttribute("data-original-values"); // Clear the original values data attribute
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "updateCV.php?id=" + rowId, true);
    row.setAttribute("data-edit-mode", "true"); // Restore edit mode
    row.classList.add("editing"); // Add 'editing' class to indicate edit mode
    xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
           // exitEditMode(row);
        } else {
           // Update failed
          alert("Failed to update record");
        }
    }
    };
    xhr.send(formData);

}

above code, im expecting it to save/update changes in my table and exit from edit mode

0

There are 0 best solutions below