Building my first Javascript Application (jQuery), struggling on something
- by Jason Wells
I'd really appreciate recommendations on the most efficient way to approach this.
I'm building a simple javascript application which displays a list of records and allows the user to edit a record by clicking an "Edit" link in the records row. The user also can click the "Add" link to pop open a dialog allowing them to add a new record.
Here's a working prototype of this: http://jsfiddle.net/FfRcG/
You'll note if you click "Edit" a dialog pops up with some canned values. And, if you click "Add", a dialog pops up with empty values.
I need help on how to approach two problems
I believe we need to pass our index to our edit dialog and reference the values within the JSON, but I am unsure how to pass the index when the user clicks edit.
It bothers me that the Edit and Add div contents are so similiar (Edit just pre populates the values). I feel like there is a more efficient way of doing this but am at a loss.
Here is my code for reference
$(document).ready( function(){
// Our JSON (This would actually be coming from an AJAX database call)
people = {
"COLUMNS":["DATEMODIFIED", "NAME","AGE"],
"DATA":[
["9/6/2012", "Person 1","32"],
["9/5/2012","Person 2","23"]
]
}
// Here we loop over our JSON and build our HTML (Will refactor to use templating eventually)
members = people.DATA;
var newcontent = '<table width=50%><tr><td>date</td><td>name</td><td>age</td><td></td></tr>';
for(var i=0;i<members.length;i++)
{
newcontent+= '<tr id="member'+i+'"><td>' + members[i][0] + '</td>';
newcontent+= '<td>' + members[i][1] + '</td>';
newcontent+= '<td>' + members[i][2] + '</td>';
newcontent+= '<td><a href="#" class="edit" id=edit'+i+'>Edit</a></td><td>';
}
newcontent += "</table>";
$("#result").html(newcontent);
// Bind a dialog to the edit link
$(".edit").click( function(){
// Trigger our dialog to open
$("#edit").dialog("open");
// Not sure the most efficient way to change our dialog field values
$("#name").val() // ???
alert($());
return false;
});
// Bind a dialog to the add link
$(".edit").click( function(){
// Trigger our dialog to open
$("#add").dialog("open");
return false;
});
// Bind a dialog to our edit DIV
$("#edit").dialog();
// Bind a dialog to our add DIV
$("#add").dialog();
});
And here's the HTML
<h1>People</h1>
<a href="#" class="add">Add a new person</a>
<!-- Where results show up -->
<div id="result"></div>
<!--
Here's our edit DIV - I am not clear as to the best way to pass the index in our JSON so that we can reference positions in our array to pre populate the input values.
-->
<div id="edit">
<form>
<p>Name:<br/><input type="text" id="name" value="foo"></p>
<p>Age:<br/><input type="text" id="age" value="33"></p>
<input type="submit" value="Save" id="submitEdit">
</form>
</div>
<!--
Here's our add DIV - This layout is so similiar to our edit dialog. What is the
most efficient way to handle a situation like this?
-->
<div id="add">
<form>
<p>Name:<br/><input type="text" id="name"></p>
<p>Age:<br/><input type="text" id="age"></p>
<input type="submit" value="Save" id="submitEdit">
</form>
</div>
