http://www.codepost.org/view/120
AJAX ToDo List
Posted by Erik on Feb 10 2006 @ 13:41 :: 19622 unique visits Here is the code for my simple AJAX ToDo List, you can use this code to implement a similar todo list on your own website.
Example usage
Hopefully the code contains enough comments to understand what it does.
The Javascript
CODE: JAVASCRIPT
// the list element
var list = document.getElementById('list');
// seperator between the actual list and the add link
var sep = list.appendChild(document.createElement('br'));
// the add link
var add = list.appendChild(document.createElement('li'));
add.innerHTML = '<a href="#" onclick="return false">click here to add a new item</a>';
add.value = '99';
// from: http://www.codepost.org/view/59
function createXMLHttpRequest() {
var types = [
'Microsoft.XMLHTTP',
'MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP'
];
for (var i = 0; i < types.length; i++) {
try {
return new ActiveXObject(types[i]);
} catch(e) {}
}
try {
return new XMLHttpRequest();
} catch(e) { }
return false; // XMLHttpRequest not supported
}
// this function will be called when the add link is pressed
// and when loading the list at startup
function addnote(id, text) {
var item = list.insertBefore(document.createElement('li'), sep);
// span containing the html
var html = item.appendChild(document.createElement('span'));
// input for editing
var edit = item.appendChild(document.createElement('input'));
edit.type = 'text';
edit.value = text;
edit.maxLength = 100;
edit.size = 100;
// image for the delete button
var dele = item.appendChild(document.createElement('img'));
dele.src = 'dele.gif';
dele.style.display = edit.style.display = 'none';
// new note?
if (id == -1) {
// use an xmlhttprequest to get a new id for the note
var req = createXMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
item.id = req.responseText;
}
}
};
req.open('GET', 'todolist.php?getid=1', true);
req.send('');
} else {
item.id = id;
}
item.onclick = function() {
// switch the note to edit mode
html.style.display = 'none';
dele.style.display = edit.style.display = 'inline';
edit.focus();
};
edit.onblur = function() {
var t = edit.value;
t = t.replace(/!(.+)!/g, '<i>$1</i>'); // replace !...! by italic text
t = t.replace(/\*(.+)\*/g, '<b>$1</b>'); // replace *..* by bold text
// has the contents of the note changed?
if (html.innerHTML != t) {
// use an xmlhttprequest to update the note contents in the database
var req = createXMLHttpRequest();
req.open('POST', 'todolist.php', true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send('id=' + item.id + '&text=' + escape(edit.value));
}
html.innerHTML = t;
// switch the note to display mode
html.style.display = 'inline';
dele.style.display = edit.style.display = 'none';
}
// catch the enter key to finish editing the note
edit.onkeydown = function(e) {
var key = 0;
if (window.event) {
key = window.event.keyCode;
} else if (e) {
key = e.keyCode; // e.which
}
if (key == 13) { // 13 is the enter key
edit.onblur();
}
}
dele.onmousedown = function() {
// ask the user if he/she really wants to delete the note
if (confirm('are you sure?')) {
// use an xmlhttprequest to remove the note from the database
var req = createXMLHttpRequest();
req.open('GET', 'todolist.php?del='+item.id, true);
req.send('');
list.removeChild(item);
}
}
// trigger onblur to switch the note to display mode and update it's innerHTML
edit.onblur();
}
add.onclick = function() {
// -1 indicates a new note
addnote(-1, 'click *here* to edit');
}