How to find the second row of a dynamic table and change its value in jquery?

Question

I have some dynamic table data which created based on how many users I have in my backend. That's just a simple fetch state. But, I'm facing an issue while using a toggle button on that dynamic html. My toggle button motivation is: if an user turn it ON then, it will change the status as "ACTVIE", if turn off, then will say "Inactive". This is working fine and changes are also updated in database while toggling. But the states are not changing just at that moment unless I refresh the page.

Now, I'm confused How can I call that exact row of that table.

What I've done so far I called all the row data of second row , and the changes are reflected on the all table. But I want just my selected toggle tables data should be changed.

$('#dynamicUserDiv').on("change", "input.userStatus", function () {
          var userId = $(this).closest("div.userDiv").attr("userId");
          var isChecked = $(this).is(":checked");
            $.ajax({
                type: "GET",
                url: "/status",
                data: {
                    userId: userId,
                    isActive: isChecked
                },
                success: function (response) {
                  console.log(response) // this response return Active or Inactive based on toggle switch
                  $('.myTable tr:nth-child(2)').html(response);

                },
                async: true
            });

}

this $('.myTable tr:nth-child(2)') is returning all the 2nd row of all tables, that's why my chagnes are reflected on all the 2nd row of all dynamic tables, but I want to select only that table in which toggle was clicked

And the main dynamic row:

$.each(user, function (index, item) {

var $itemUser = '<div class="col-md-6 userDiv" userid="' + item.id + '">'
                + '<div class="dash-widget dash-widget5">'
                + '<div class="dash-widget-info">'
                + '<div class="innerTableHeaderFile"><label class="">' + item.userName + '</label></div>'
                + '<table class="myTable">'               
                + '<tbody>'
                + '<tr>'
                + '<td>User Name:</td>'
                + '<td>' + item.userName + '</td>'
                + '</tr>'
                + '<tr>'
                + '<td>User Status:</td>'
                + '<td>' + item.status + '</td>'  // this is where I want to show the changes when toggle is on/off
                + '</tr>'
                + '<td>User Toggle:</td>'
                + '<td>'
                + '<label class="switch">'
                +  '<input class = "userStatus" type="checkbox" ';
                $itemUser += item.status == "ACTIVE" ? 'checked >': '> ';
                $itemUser += '<span class="slider round"></span>'
                + '</label>'
                + '</tr>'
                + '</tbody>'
                + '</table>'
                + '</div>'
                + '</div>'
                + '</div>'

});

How can I achieve this? Any idea? Thanks

Answer 1

Store a reference to the userDiv instance so you can look for the table row inside it when the success callback runs

$('#dynamicUserDiv').on("change", "input.userStatus", function () {
          // store reference to parent that can be used in success callback
          var $userDiv = $(this).closest("div.userDiv");          
          var userId = $userDiv.attr("userId");
          var isChecked = $(this).is(":checked");
            $.ajax({
               // ...
                success: function (response) {
                  // find the table within current userDiv
                  $userDiv.find('.myTable tr:nth-child(2)').html(response);

                },
                async: true// redundant since this is default
            });

})

Answer 2

Since your outside-div contains the user-id you could call it with a attribute-selector

Like this:

$('#dynamicUserDiv').on("change", "input.userStatus", function () {
var userId = $(this).closest("div.userDiv").attr("userId");
var isChecked = $(this).is(":checked");
$.ajax({
    type: "GET",
    url: "/status",
    data: {
        userId: userId,
        isActive: isChecked
    },
    success: function (response) {
        console.log(response) // this response return Active or Inactive based on toggle switch
        $('div[userid="'+userId+'"] .myTable tr:nth-child(2)').html(response);

    },
    async: true
});

}