Gorgon_Union Gorgon_Union - 1 year ago 65
Javascript Question

Updating existing table row by pulling data into form

I'm working a project where I can add 'Actors' to a table via Form input, that allows me to click on a table row and pull the data of the selected Actor back into the form for update/delete. I'm able to select the data, and delete the row, but I cannot figure out how to update an existing row. I can't seem to find anything to help link new input to existing object data.

******* Updated *********

var actors = [];


var selectActor = function (e) {
e.preventDefault();
var rowClicked = $(this).parent().parent();
row = rowClicked.index();
alert(actors[row].fName + " " + actors[row].lName + " " + actors[row].gender + " " + actors[row].birthDate + " " + actors[row].action + " " + actors[row].comedy + " " + actors[row].drama + " " + actors[row].suspense + " " + actors[row].sciencefiction + " " + actors[row].horror);
console.log(actors[row]);
var idx = $(this).attr("data-idx");
var actor = actors[idx];
$("#updateActor").attr("rowid",idx);
for (var key in actor) {
var ele = $("#" + fieldTypes[key].id);
var type = fieldTypes[key].type;
switch (type) {
case "input":
ele.val(actor[key]);
break;
case "radio":
var name = fieldTypes[key].name;
$("[name='" + name + "']").prop({ checked:false });
$("[name='" + name + "'][value='" + actor[key] + "']").prop({ checked:true });
break;
case "checkbox":
$("#" + fieldTypes[key].id).prop("checked", actor[key]);
break;

}
}
actorState("old");
};


It's able to update thanks to the help from the posters below.

var updateActor = function() {
$("#updateActor").unbind();

// Assigning Form values to variables
var firstN = $("#fName").val();
var lastN = $("#lName").val();
var gender = $("[name='gender']:checked").val();
var birthdate = $("#birthDate").val();
var action = $("#action").prop('checked');
var comedy = $("#comedy").prop('checked');
var drama = $("#drama").prop('checked');
var sciencefiction = $("#sciencefiction").prop('checked');
var horror =$("#horror").prop('checked');
var suspense = $("#suspense").prop('checked');

// creates updateActor variable that contains an object for each input value
var updateActor = {fName: firstN, lName: lastN, gender: gender, birthDate: birthdate, action: action, comedy: comedy, drama: drama, suspense: suspense, sciencefiction: sciencefiction, horror: horror}

var rowId = $("#updateActor").attr("rowid");

// Creates a table of links for each added actor with an id based from # of actors
$("#actorsTable").find("a[data-idx='"+rowId+"']").replaceWith("<a href='' onclick='deleteActor(this)' class='update' data-idx='" + rowId + "'>" + updateActor.fName + " " + updateActor.lName + "</a>");

actors.push(updateActor);
actorState ("new");

};


Example in action

Answer Source

Make few changes in your script and there you go.

1) When you are selecting your record by clicking on table row, apply that respective data-idx value to the "updateActor" button by adding some attribute to it(i.e rowid).

Add following code line after "var actor = actors[idx];" to do the same in your "selectActor" function

$("#updateActor").attr("rowid",idx);

2) Change your code in "updateActor" function as below:

2.1) Replace

var firstN = $("#fName"[row]).val();

with

var firstN = $("#fName").val();

2.2) Add following line of code after creating "updateActor" variable that contains an object for each input value (i.e. var updateActor = {fName: firstN, lName: lastN, ...)

var rowId = $("#updateActor").attr("rowid");

2.3) Replace

$("#actorsTable").append("<tr><td><a href='' onclick='deleteActor(this)' class='update' data-idx='" + actors.length + "'>" + newActor.fName + " " + newActor.lName + "</a></td></tr> ");

with

$("#actorsTable").find("a[data-idx='"+rowId+"']").replaceWith("<a href='' onclick='deleteActor(this)' class='update' data-idx='" + rowId + "'>" + updateActor.fName + " " + updateActor.lName + "</a>");