How to update a data from a table using data-atributes in jQUery

Question

I have this table in html and I need to update a user using the data-userid, I make I function that to this but this function didn't change anything in web page.

Here, I have the html table code for data-userid:

 <table id="tblList">
        <tbody id="someTest">
          <tr data-userid="801992084067"></tr>
          <tr data-userid="451207954179"></tr>
          <tr data-userid="310896831399"></tr>
          <tr data-userid="863939754980"></tr>
          <tr data-userid="1123542226482"></tr>
        </tbody>
      </table>

And here I have update function.

function updateUser(userId, user) {

    var foundUser = findUser(userId);


    foundUser.username = user.username;
    foundUser.level = user.level;
    foundUser.registrationStatus = user.registrationStatus;
    foundUser.registrationDate = user.registrationDate;


    for(var i = 1; i<userId.length; i++){
        $("#someTest tr[data-userid = 'userid " + userId[i] + "']").each(function () {
            // if (rowId === userId) {

                var table = $('#tblList');

                var row = "<tr data-userid=" + foundUser.id + ">"
                    + " <td>"
                    + "     <img src='resources/img/edit.png' alt='Edit' class='btnEdit'/>"
                    + "     <img src='resources/img/delete.png' alt='deleteUser' class='btnDelete'/>"
                    + "</td>"
                    + " <td>" + foundUser.username + "</td>"
                    + " <td>" + foundUser.level + "</td>"
                    + " <td>" + foundUser.registrationStatus + "</td>"
                    + " <td>" + foundUser.registrationDate + "</td>"
                    + "</tr>";
                table.append(row);
            // }
        });
    }
    hidePopup();
}

My question is the following: What to do in updateUser function because when I change a user, to see that change in browser?

i suppose userId is a numeric value, then userId.length is the problem in the for loop — user2385619
– user2385619, Commented Sep 10, 2016 at 17:09

score 1 · Accepted Answer · 2016-09-10 17:28:21Z

1

try this

function updateUser(userId, user) {

        var foundUser = findUser(userId);


        foundUser.username = user.username;
        foundUser.level = user.level;
        foundUser.registrationStatus = user.registrationStatus;
        foundUser.registrationDate = user.registrationDate;

        var row = " <td>"
                        + "     <img src='resources/img/edit.png' alt='Edit' class='btnEdit'/>"
                        + "     <img src='resources/img/delete.png' alt='deleteUser' class='btnDelete'/>"
                        + "</td>"
                        + " <td>" + foundUser.username + "</td>"
                        + " <td>" + foundUser.level + "</td>"
                        + " <td>" + foundUser.registrationStatus + "</td>"
                        + " <td>" + foundUser.registrationDate + "</td>";


        $("#someTest tr[data-userid = '" + userId + "']").html(row)
        hidePopup();
    }

edited Sep 10, 2016 at 17:28

answered Sep 10, 2016 at 17:17

user2385619

Sign up to request clarification or add additional context in comments.

4 Comments

user6018902 Over a year ago

Without i in $("#someTest tr[data-userid = '" + userId[i] + "']").html(row); line it works. Thank you very much!

R.K.Saini Over a year ago

@atul this line $("#someTest tr[data-userid = '" + userId[i] + "']").html(row) ;should be like this $("#someTest tr[data-userid = '" + userId+ "']").html(row); because i is not there anymore

user6018902 Over a year ago

@atul , but now I have another problem, after I use edit user function, I can't add a new user. why?

user2385619 Over a year ago

As far as I think, from the programming point of view, each and every function must do a single job, to make it clean, maintainable code. So, in this case editUser/UpdateUser ,as the name itself suggest, it sole purpose is to update the information of the existing user and not to add a new user. Therefore, you must create a new method say addUser to add a new user

Collectives™ on Stack Overflow

How to update a data from a table using data-atributes in jQUery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related