Question 293162 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How do I update the current row?

I have a addRow button which dynamically add rows to a table.

$("#addRow").click(function(){
    $.ajax({
        url:    "php/insertPersonnel.php",
        type:   "POST",
        dataType:"JSON",
        data: {
            firstName:      $("#addPersonnelFirstName").val(),
            lastName:       $("#addPersonnelLastName").val(),
            emailAddress:   $("#addPersonnelEmailAddress").val(),
            jobTitle:       $("#addPersonnelJobTitle").val(),
            departmentID:   $("#selectPersonnelDepartment").val()
        },
        success: function (result) {
                var markup = "";
                markup += '<tr>';
                markup += '<td>' + result.data[0].firstName + result.data[0].lastName + result.data[0].jobTitle+ result.data[0].email + '</td>';
                markup += '<td><button type="button" class="btn btn-primary btn-sm editPersonnelBtn" data-bs-toggle="modal" data-bs-target="#editPersonnelModal" data-id = '+result.data[0].id+'> <i class="fa-solid fa-pencil fa-fw"> </i></button><button type="button" class="btn btn-primary btn-sm deletePersonnelBtn" data-bs-toggle ="modal" data-bs-target="#deletePersonnelModal" data-id= '+ result.data[0].id+ '> <i class="fa-solid fa-trash fa-fw"></i> </td>';
                markup += '</tr>';
                $("#personnelTable").append(markup);
                }
    }); 

    document.getElementById("addPersonnelForm").reset();    
});

I have a edit button that allows the user to modify the user values.

$(".editPersonnelBtn").on("click", function (e) {
    var $rowToUpdate = $(this).closest("tr");

})

After I have managed to retrieve the row which has been selected I don’t know how to edit the current row and replace it with new values. Any advice would be appreciated.

Tags:

2

Answers


  1. 0

    It looks like your missing an identifier. Right now, there’s nothing in your code to let your backend know which record you are trying to modify. If you were to submit any changes, this script would call php/insertPersonnel.php via POST.

    The code snippet, as currently provided, would provide everything you need for creating a record. To be able to edit an existing record, you’ll need to provide an immutable identifier, often a table id (though I prefer a UUID myself) that is a hidden input field.

    If you want to reuse what you currently have within php/insertPersonnel.php, you’ll have to add logic to check for the table id and do an update instead of an insert.

    If you want to go full CRUD, you can switch the call from POST to PUT (or PATCH).

    Login or Signup to reply.
  2. 0 
    $(".editPersonnelBtn").on("click", function (e) {
  var $rowToUpdate = $(this).closest("tr");
})

    — binds the event to the elements that are present at the time the event is created. To get around this, use:

    $(document).on('click', '.editPersonnelBtn', function(){
  // ...
})```
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search