Gorgon_Union Gorgon_Union - 6 months ago 13
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

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>");
Comments