title: Building my first Javascript Application (jQuery), struggling on something
body: <p>I'd really appreciate recommendations on the most efficient way to approach this.</p>
  
  <p>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.</p>
  
  <p>Here's a working prototype of this: <a href="http://jsfiddle.net/FfRcG/" rel="nofollow">http://jsfiddle.net/FfRcG/</a></p>
  
  <p>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.</p>
  
  <p>I need help on how to approach two problems</p>
  
  <ol>
  <li><p>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.</p></li>
  <li><p>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. </p></li>
  </ol>
  
  <p>Here is my code for reference</p>
  
  <pre><code>$(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 = '&lt;table width=50%&gt;&lt;tr&gt;&lt;td&gt;date&lt;/td&gt;&lt;td&gt;name&lt;/td&gt;&lt;td&gt;age&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;';
  
  for(var i=0;i&lt;members.length;i++)
  {
      newcontent+= '&lt;tr id="member'+i+'"&gt;&lt;td&gt;' + members[i][0] + '&lt;/td&gt;';
      newcontent+= '&lt;td&gt;' + members[i][1] + '&lt;/td&gt;';
      newcontent+= '&lt;td&gt;' + members[i][2] + '&lt;/td&gt;';
      newcontent+= '&lt;td&gt;&lt;a href="#" class="edit" id=edit'+i+'&gt;Edit&lt;/a&gt;&lt;/td&gt;&lt;td&gt;';
  }
  newcontent += "&lt;/table&gt;";
  $("#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(); 
  
  });
  </code></pre>
  
  <p>And here's the HTML</p>
  
  <pre><code>&lt;h1&gt;People&lt;/h1&gt;
  
  &lt;a href="#" class="add"&gt;Add a new person&lt;/a&gt;
  
  &lt;!-- Where results show up --&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
  
  &lt;!-- 
  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.
  --&gt;
  &lt;div id="edit"&gt;
  &lt;form&gt;
      &lt;p&gt;Name:&lt;br/&gt;&lt;input type="text" id="name" value="foo"&gt;&lt;/p&gt; 
      &lt;p&gt;Age:&lt;br/&gt;&lt;input type="text" id="age" value="33"&gt;&lt;/p&gt;
      &lt;input type="submit" value="Save" id="submitEdit"&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;!-- 
  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?
  --&gt;
  &lt;div id="add"&gt;
  &lt;form&gt;
      &lt;p&gt;Name:&lt;br/&gt;&lt;input type="text" id="name"&gt;&lt;/p&gt;
      &lt;p&gt;Age:&lt;br/&gt;&lt;input type="text" id="age"&gt;&lt;/p&gt;
      &lt;input type="submit" value="Save" id="submitEdit"&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>