Building my first Javascript Application (jQuery), struggling on something

Question

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

1. 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.

2. 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>

Answer 1

I made some significant edits to your demo with quite a few comments. http://jsfiddle.net/FfRcG/1/

First I remapped data from array of arrays, to array of objects. It's typically a lot easier parsing the html when you can write strings like '<td>'+item.name+'</td>' VS '<td>'+item[5]+'</td>'. It's simpler to read what's what and debug. Getting data from server this way is not a lot more code to add at server.

I added an ID for each member in the original data which will help when communicating with server and storing data. This id is also being added to the edit button as an html data- attribute that is easily read with jQuery data() method ( see fiddle example)

It will likely be easier to not worry about storing data local for now, and simply update server with ajax call every time an add/edit is made. For this reason I set up a row parser to update your edit form when edit button is clciked. Adding classes for each column helps simplify the form update process. My thinking about storing local is it's just one less step for now, and server will stay current with page.

Remember that element ID's must be unique in a page so the duplicates in forms need to be changed.

As for the visuals between the 2 forms, I added title option to dialogs, and changed "save" button text a bit. If you are wondering where css for dialogs comes from, it is set in the "Manage Resources" panel of fiddle and comes from Google CDN.

SOme of these ideas should help. good luck.

Answer 2

I try something about input values. You can use .attr() for change input value. Here working (only calls 1st Person from jSON.) copy http://jsfiddle.net/serkanalgur/zs3tW/

What i added;

    // Bind a dialog to the edit link
$(".edit").click( function(){ 

    // Trigger our dialog to open
    $("#edit").dialog("open");
    $('input#name').attr('value', people.DATA[0][1]); // for name
    $('input#age').attr('value', people.DATA[0][2]); // for age. but needed dynamic ids
    return false;
});

Answer 3

1) Index can be passed via hidden value or by changing the form url. If you use a template for the form you might be able to just fill the form in on the fly and re-render it. If your site is RESTful the url change might be the more appropriate choice.

You may then need to also write a helper for the URL. The helper function will help figure out the appropriate url depending if it is "new" or a "edit". Next you can use "serialize" http://api.jquery.com/serialize/ to grab all the fields in the form and convert it to key-value pair for $.POST if needed.

2) You have 2 options: Try making 1 form, or use a template. If you just have 1 form at the start then your only option is to use .val() to change the form's values.

If you use the template approach you could either just have the template embedded on the page, or you can pull the final form using $.GET on the server. One nice approach might be to use haml or jade as your templating language. You can then mix and match the approaches. By that I mean you can actually create a template tag on your page and load up the template as the page is initially rendered and fill it with just the form partial. You can then use that form on various other pages including just a basic edit page not in a dialog box.

Answer 4

Look into using the clone method, and creating it on the fly when the user clicks the add/edit link (if you have more than one edit). You can then set values on the fly by selecting the inputs and setting their val property.

As for passing the id for the edit you can either use a:

<input type="hidden" name="index" value="" />

Or you can add a property to the div like so:

<div id="edit" data-index="1">

and then referencing it with a

$('#edit').click(function() {
    $(this).attr('data-index');
});

inside the click handler to grab the id.