I rewrote your script a little more.
The contacts should now be stored as JSON, like so:
Code:
{
"contacts":[
{
"firstName":"Jessica",
"middleName":"Claire",
"lastName":"Biel",
"sex":"female",
"birthday":"03-mar-1982",
"address":"27 texas avenue",
"phone":"(53)2344223",
"email":"jbiel@yahoo.com"
},
{
"firstName":"Kate",
"middleName":"Bailey",
"lastName":"Beckinsdale",
"sex":"female",
"birthday":"26-jul-1973",
"address":"#23 underworld drive",
"phone":"(621) 142-7827",
"email":"kate@lycans.net"
},
{
"firstName":"Johnny",
"middleName":"Christopher",
"lastName":"Depp",
"sex":"male",
"birthday":"09-jun-1963",
"address":"711 pirate road",
"phone":"(773) 476-6634",
"email":"jsparrow@piratebay.org"
}
]
}
I broke up your script a little, gave the methods better names and generally tried to make the code more readable.
I also added a function that allows you to sort your contacts by any of the keys. In the example, I used "firstName".
Code:
<!DOCTYPE HTML>
<html>
<head>
<!-- http://www.sitepoint.com/forums/showthread.php?977168-how-to-enable-click-in-retrieved-fragments -->
<title>Fetach AJAX example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
label{
display:inline-block;
width:75px;
margin: 5px 0;
}
</style>
</head>
<body>
<div id="header">
<h1>My Contacts</h1>
</div>
<h2>Contact List</h2>
<div id="header2">
<ul id="list"></ul>
</div>
<div>
<h3>Contact Details</h3>
</div >
<div id="header3">
<form name="myForm">
<div>
<label for="ajaxName">First name:</label>
<input type="text" id="ajaxName" name="firstName"><td>
</div>
<div>
<label for="ajaxBday">Birthday:</label>
<input type="text" id="ajaxBday" name="birthday"><td>
</div>
<div>
<label for="ajaxAddress">Address:</label>
<input type="text" id="ajaxAddress" name="address"><td>
</div>
<div>
<label for="ajaxPhone">Phone:</label>
<input type="text" id="ajaxPhone" name="phone"><td>
</div>
<div>
<label for="ajaxEmail">Email:</label>
<input type="text" id="ajaxEmail" name="email"><td>
</div>
</form>
</div>
<script type="text/javascript">
function sortByKey(array, key) {
return array.sort(function(a, b) {
var x = a[key]; var y = b[key];
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
});
}
function populateContactList(contacts){
frag = document.createDocumentFragment();
for (i=0; i < contacts.length; i++){
li = document.createElement("li");
li.innerHTML = contacts[i].firstName;
frag.appendChild(li);
}
document.getElementById("list").appendChild(frag);
}
function makeContactsClickable(contacts){
ul = document.getElementById("list");
li = ul.getElementsByTagName("li");
var inputs = myForm.getElementsByTagName("input");
for (i = 0; i < li.length; i++) {
li[i].onclick = function(contact) {
return function() {
for (j=0; j < inputs.length; j++){
attr = inputs[j].name;
inputs[j].value = contact[attr];
}
}
}(contacts[i]);
}
}
function retrieveContacts() {
var xhr = new XMLHttpRequest();
xhr.open("get", "contacts_json.txt", false);
xhr.send(null);
if (xhr.status == 200) {
json = JSON.parse(xhr.responseText);
contacts = sortByKey(json.contacts, 'firstName');
populateContactList(contacts);
makeContactsClickable(contacts);
} else {
alert("data retrieval failed...");
}
}
window.onload = retrieveContacts();
</script>
</body>
</html>
BTW, I lifted the sort function from StackOverflow: http://stackoverflow.com/questions/8...ing-javascript
Reply With Quote
Bookmarks