Sometimes, I sit around scratching my head trying to think of good tutorials to write. This time I am taking a cue from The Tallest. Recently, he wrote the tutorial, Silverlight 2 Transmitting Data Using JSON, which was a direct copy of an earlier post I wrote for Flex - well I decided to do the same thing except use Javascript with jQuery to handle the interaction. Now, I think as far as technologies go I believe it may be slightly easier to do this in Silverlight or Flex. My reasoning behind this is simply because the interface is quicker to layout. Other than that I think that it is just a easy to use jQuery to do this kind of interaction.
Well, below I have the little application we are going to be building today. It should be very close to its Silverlight and Flex companions and function exactly like the others. In this tutorial I will not be going over the PHP that produces the JSON, if your interested in that check out the Flex JSON Tutorial.
Employees
| First Name | Last Name | Address | |
|---|---|---|---|
To get things rolling we are first going to take a look at the HTML used for laying out the pieces. The first couple pieces are a few divs to hold the different items of content.
Once we have the basic divs in place we add a fieldset for the text inputs (read-only in this tutorial) to display the person's information. I am borrowing a layout idea from a pretty form article from A List Apart. It is an interesting technique that makes layout very easy.
To display the employee list of a manager I have a very simple table. A basic table header and table body and that is pretty much it. The final pieces to add are a couple buttons to get an employee or manager. These are added to the final div. This gives us the complete html that we are going to use.
<div id="person-area">
<fieldset>
<legend>Personal Info</legend>
<ul>
<li>
<label for="name">Name: </label>
<input id="name" readonly="true" type="text">
</li>
<li>
<label for="email">E-mail: </label>
<input id="email" readonly="true" type="text">
</li>
<li>
<label for="address">Address: </label>
<input id="address" readonly="true" type="text">
</li>
<li>
<label for="title">Title: </label>
<input id="title" readonly="true" type="text">
</li>
<li>
<label for="hasEmployees">Has Employees: </label>
<input id="hasEmployees" readonly="true" type="text">
</li>
</ul>
</fieldset>
</div>
<div id="employee-area">
<h4>Employees</h4>
<table id="employee-table">
<thead>
<tr>
<th class="firstname">First Name</th>
<th class="lastname">Last Name</th>
<th class="email">E-mail</th>
<th class="address">Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="firstname"> </td>
<td class="lastname"> </td>
<td class="email"> </td>
<td class="address"> </td>
</tr>
<tr>
<td class="firstname"> </td>
<td class="lastname"> </td>
<td class="email"> </td>
<td class="address"> </td>
</tr>
<tr>
<td class="firstname"> </td>
<td class="lastname"> </td>
<td class="email"> </td>
<td class="address"> </td>
</tr>
<tr>
<td class="firstname"> </td>
<td class="lastname"> </td>
<td class="email"> </td>
<td class="address"> </td>
</tr>
</tbody>
</table>
</div>
<div id="button-area">
<input id="getEmployees" value="Get Employee" type="button">
<input id="getManager" value="Get Manager" type="button">
</div>
</div>
We also have some css to make things look pretty. I am not going to cover the stylesheet. Just going to throw it out there.
width: 600px;
margin: 0 auto;
border: 2px groove threedface;
}
#person-area fieldset {
border: 0;
}
#person-area legend {
font-weight: bold;
}
#person-area ul{
list-style: none;
}
#person-area label {
width: 150px;
float: left;
display: block;
}
#person-area input {
width: 250px;
}
#employee-area {
padding: 10px;
}
#employee-table {
border-collapse: collapse;
border: 1px solid #999;
border-top: none;
border-right: none;
}
#employee-table tr {
height: 25px;
}
#employee-table thead th {
padding: 4px;
font-weight: bold;
border: 1px solid #999;
border-bottom: none;
border-left: none;
}
#employee-table tbody td {
padding: 3px;
border: 1px solid #999;
border-bottom: none;
border-left: none;
}
.firstname {
width: 70px;
}
.lastname {
width: 70px;
}
.email {
width: 120px;
}
.address {
width: 240px;
}
#button-area {
margin: 10px auto;
width: 260px;
}
#button-area input {
width: 125px;
display: inline;
margin: 0;
padding: 0;
}
Okay, let's actually do some javascript. The first thing we are going to do is add the document ready function that is basis of jQuery. Inside the document ready function we add the click handler for the get manager and employee buttons.
$("#getEmployees").click(function() {
});
$("#getManager").click(function() {
});
});
The next function to we are going to use is jQuery's getJSON. This is one of the built in AJAX functions in jQuery. It makes getting and using JSON in javascript so very easy. We simply pass the url to get data from and a callback function. This adds a slight bit of code to get the correct information.
$("#getEmployees").click(function() {
$.getJSON("http://proj.local/jquery-json/json_tutorial.php?getPerson",
function(data) {
});
});
$("#getManager").click(function() {
$.getJSON("http://proj.local/jquery-json/json_tutorial.php?getManager",
function(data) {
});
});
});
To display the personal information returned we will create a function to update the text inputs. To do this we use jQuery selectors and the val function to update the value.
{
var title = "No Title";
var hasEmployees = "No";
$("#name").val(person.first_name + " " + person.last_name);
$("#email").val(person.email);
$("#address").val(person.address);
if(person.title) {
title = person.title;
}
if(person.employees) {
hasEmployees = "Yes";
}
$("#title").val(title);
$("#hasEmployees").val(hasEmployees);
}
We need one more function which will update the table. This uses a little bit of jQuery finesse, the function is passed the employees array which can be found in the data returned from the PHP. We then use a jQuery function each to loop through each employee. The each function will run a callback function for each item in the array passing the index and the item. The callback function sets the columns of a row in the html table. It it is able to get the correct row by using a fancy jQuery selector :eq(#), which will grab the matched item and then pull out the # result. Taking a look at the code may make more sense.
{
$.each(employees, function(i,employee){
$("#employee-area table tbody tr:eq(" + i +") td:eq(0)").html(
employee.first_name
);
$("#employee-area table tbody tr:eq(" + i +") td:eq(1)").html(
employee.last_name
);
$("#employee-area table tbody tr:eq(" + i +") td:eq(2)").html(
employee.email
);
$("#employee-area table tbody tr:eq(" + i +") td:eq(3)").html(
employee.address
);
});
}
To finish the javascript off we simply need to call these inside the callback functions for the getJSON calls. If we get the results back from a getPerson call we also clear the table columns of their data. This leaves us with the complete javascript code.
$("#getEmployees").click(function() {
$.getJSON("http://proj.local/jquery-json/json_tutorial.php?getPerson",
function(data) {
setPersonInfo(data);
$("#employee-area table tbody td").html("");
});
});
$("#getManager").click(function() {
$.getJSON("http://proj.local/jquery-json/json_tutorial.php?getManager",
function(data) {
setPersonInfo(data);
setEmployees(data.employees);
});
});
});
function setPersonInfo(person)
{
var title = "No Title";
var hasEmployees = "No";
$("#name").val(person.first_name + " " + person.last_name);
$("#email").val(person.email);
$("#address").val(person.address);
if(person.title) {
title = person.title;
}
if(person.employees) {
hasEmployees = "Yes";
}
$("#title").val(title);
$("#hasEmployees").val(hasEmployees);
}
function setEmployees(employees)
{
$.each(employees, function(i,employee){
$("#employee-area table tbody tr:eq(" + i +") td:eq(0)").html(
employee.first_name
);
$("#employee-area table tbody tr:eq(" + i +") td:eq(1)").html(
employee.last_name
);
$("#employee-area table tbody tr:eq(" + i +") td:eq(2)").html(
employee.email
);
$("#employee-area table tbody tr:eq(" + i +") td:eq(3)").html(
employee.address
);
});
}
With that, this tutorial is over and I hope everyone found something somewhat useful. If anyone has any questions feel free to drop a line. Until next time have a good one and keep programming.
01/22/2009 - 14:28
Nice post.
You might find my tableFormSynch jQuery plugin to be of interest (http://www.swartzfager.org/blog/jQuery/plugins/tableFormSynch/). It works in conjunction with the metadata jQuery plugin to store record data within each row of a table without having to display, then lets you pull out that data into a form for editing and writes the changes back to the row (updating any visual data that has changed).
So instead of coding buttons or links to pull down each record one at a time, you could pull down all of the records into a table and only make additional calls to the back-end (using your preferred AJAX methods) whenever you wanted to add, update, or delete a record.