How can i update data in html after modify the object?

Question

I have this function that modify my existing object by ID :

   var updateUser = function () {
    var id = $("#userId").val();
    var user = findObjectById(id);

    user.username = $('#username').val();
    user.level = $('#level').val();
    user.regstatus = $('#regstatus').val();
    user.regdate = $('#regdate').val();



    $(".table").show();
    $("#newUser").show();
    $("#userForm").hide();
    $("#updateUser").hide();

};

How can i replace my curent data from HTML with modified data ?

This is my function for creating rows :

 var buildRow = function (data) {
    var html = '<tr id = ' + data.id + '>' +
        '<td>' + data.username + '</td>' +
        '<td>' + data.level + '</td>' +
        '<td>' + data.regstatus + '</td>' +
        '<td>' + data.regdate + '</td>' +
        '<td>' +
        '<button class="btn btn-info"value="Edit" onclick="userList.editUser(' + data.id + ')">Edit</button>' + ' ' +
        '<button class="btn btn-danger" value="Delete" onclick="userList.deleteRow(' + data.id + ')">Delete</button>' + '</td>' +
        '</tr>';


    $("#users").append(html);

};

P.S i want to update in the same place and my id should be the same.

If `#users` doesn't have any data before you append your rows, you can simply replace `.append(html)` with `.html(html)` and call `buildRow(user)` in `updateUser() function` — MayThrow, Jul 28 '14 at 10:16
http://jsfiddle.net/gjrK4/1/ but i take data from json :) so this is how it looks my js code:) — shaker, Jul 28 '14 at 10:19
Have a look at this: http://stackoverflow.com/questions/2160890/how-do-you-append-rows-to-a-table-using-jquery You can also sort tables using jQuery if necessary. http://stackoverflow.com/questions/3160277/jquery-table-sort — Bob Brown, Jul 28 '14 at 10:22

score 1 · Accepted Answer · answered Jul 28 '14 at 11:21

I modified your prototype jsFiddle a bit, so it contains a working example.

I needed to modify some parts to get it work, for example updating the object I added a function.

updateObjectById = function (id, obj){
        for (var i = 0, l = userData.length; i < l; i++) {
           if (userData[i].id == id) {
            userData[i] = obj;
        }
    }
};

You should be able to work it out I guess, by the given jsFiddle

score 0 · Answer 2 · answered Jul 28 '14 at 10:27

As I understand it you want to update the table when running "updateUser". There are basically three ways to update the data in your case.

Rebuild the whole row
Pick out specific cells in the table and change the content
Use a two way databinding framework

In my experience the best solution, and how f.ex. Backbone does it, is just recreating all the HTML when your data changes. two way databinding is even more powerful, but seems overkill in this situation.

So basically in your updateUser function:

var row = buildRow(user);
var $existingRow = $(id);
if ($existingRow.length) {
  $existingRow.replaceWith(row);
} else {
  $('#users').append(row);
}

Now, this of course requires a change to your "buildRow" function, not making it append the row, but return it.

Hope this gets you further...

How can i update data in html after modify the object?

2 Answers2