AJAX ToDo List

http://www.codepost.org/view/120

todolist.js

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');
}