ajaxcore.js

The AJAX JSP Tag Library is a set of JSP tags that simplify the use of Asynchronous JavaScript and X

/**
 * Copyright 2005 Darren L. Spurgeon
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * -----
 *
 * liveUpdater function and other portions copyright by:
 * Copyright 2004 Leslie A. Hensley ([e-mail])
 *   you have a license to do what ever you like with this code
 *   orginally from Avai Bryant
 *   http://www.cincomsmalltalk.com/userblogs/avi/blogView?entry=3268075684
 */

//
// GLOBAL OPTIONS
//

var isSafari = false;
var isMoz = false;
var isIE = false;

if (navigator.userAgent.indexOf("Safari") > 0) {
  isSafari = true;
  isMoz = false;
  isIE = false;
}
else if (navigator.product == "Gecko") {
  isSafari = false;
  isMoz = true;
  isIE = false;
} else {
  isSafari = false;
  isMoz = false;
  isIE = true;
}


//
// GLOBAL FUNCTIONS
//

/* Functions to handle browser incompatibilites */
function eventElement(event) {
  if (isMoz) {
    return event.currentTarget;
  } else {
    return event.srcElement;
  }
}

function addKeyListener(element, listener) {
  if (isSafari)
    element.addEventListener("keydown",listener,false);
  else if (isMoz)
    element.addEventListener("keypress",listener,false);
  else
    element.attachEvent("onkeydown",listener);
}

function addListener(element, type, listener) {
  if (element.addEventListener) {
    element.addEventListener(type, listener, false);
  } else {
    element.attachEvent('on' + type, listener);
  }
}

function removeListener(element, type, listener) {
  if (element.removeEventListener) {
    element.removeEventListener(type, listener, false);
  } else {
    element.detachEvent('on' + type, listener);
  }
}

/* XML Helper functions */
function flatten(node) {
  if (node.nodeType == 1) {
    return '<' + node.nodeName + flattenAttributes(node) + '>' +
    flattenChildren(node.childNodes) + '</' + node.nodeName + '>';
  } else if(node.nodeType == 3) {
    return node.nodeValue;
  }
}

function flattenAttributes(node) {
  var buffer = '';
  for (var i=0;i<node.attributes.length;i++) {
    var attribute = node.attributes[i];
    buffer += ' '+ attribute.name + '="' + attribute.value + '"';
  }
  return buffer;
}

function flattenChildren(nodes) {
  var buffer = '';
  if (nodes.length > 0) {
    for (var i=0;i<nodes.length;i++) {
      buffer += flatten(nodes[i]);
    }
  }
  return buffer;
}

function copyAttributes(source, destination) {
  for (var i=0;i<source.attributes.length;i++) {
    var attribute = source.attributes[i];
    destination.setAttribute(attribute.name, attribute.value);
  }
  destination.className = source.getAttribute('class');
}

function getElementY(element){
  var targetTop = 0;
  if (element.offsetParent) {
    while (element.offsetParent) {
      targetTop += element.offsetTop;
      element = element.offsetParent;
    }
  } else if (element.y) {
    targetTop += element.y;
  }
  return targetTop;
}

function getElementX(element){
  var targetLeft = 0;
  if (element.offsetParent) {
    while (element.offsetParent) {
      targetLeft += element.offsetLeft;
      element = element.offsetParent;
    }
  } else if (element.x) {
    targetLeft += element.yx;
  }
  return targetLeft;
}



/**
 * Returns true if an element has a specified class name
 */
function hasClass(node, className) {
  if (node.className == className) {
    return true;
  }
  var reg = new RegExp('(^| )'+ className +'($| )')
  if (reg.test(node.className)) {
    return true;
  }
  return false;
}

/**
 * Adds a class name to an element
 */
function addClass(node, className) {
  if (hasClass(node, className)) {
    return false;
  }
  node.className += ' '+ className;
  return true;
}

/**
 * Removes a class name from an element
 */
function removeClass(node, className) {
  if (!hasClass(node, className)) {
    return false;
  }
  node.className = eregReplace('(^| )'+ className +'($| )', '', node.className);
  return true;
}

/**
 * Emulate PHP's ereg_replace function in javascript
 */
function eregReplace(search, replace, subject) {
  return subject.replace(new RegExp(search,'g'), replace);
}



//
// LIVE UPDATE CORE
//
/*
  liveUpdater returns the live update function to use
  uriFunc: The function to generate the uri
  postFunc: <optional> Function to run after processing is complete
  preFunc: <optional> Function to run before processing starts
*/
function liveUpdater(uriFunc, handlerFunc, preFunc, emptyFunc, errorFunc) {
  if (!handlerFunc) handlerFunc = function() {};
  if (!preFunc) preFunc = function () {};
  if (!emptyFunc) emptyFunc = function () {};
  if (!errorFunc) errorFunc = function () {};

  return createLiveUpdaterFunction(uriFunc, handlerFunc, preFunc, emptyFunc, errorFunc);
}

function createLiveUpdaterFunction(uriFunc, handlerFunc, preFunc, emptyFunc, errorFunc) {
    var request = false;
    if (window.XMLHttpRequest) {
      request = new XMLHttpRequest();
    }

    function update() {
      if(request && request.readyState < 4)
        request.abort();

      if(!window.XMLHttpRequest)
        request = new ActiveXObject("Microsoft.XMLHTTP");

      preFunc();
      request.onreadystatechange = processRequestChange;
      request.open("GET", uriFunc());
      request.send(null);
      return true;
    }

    function processRequestChange() {
      if(request.readyState == 4) {
      	if (request.status == 200) {
          var xmlDoc = request.responseXML;
          if (xmlDoc.documentElement == null
          		|| !xmlDoc.documentElement.hasChildNodes()
          		|| xmlDoc.firstChild.nodeName == "parsererror") {
          	emptyFunc();
          } else {
            handlerFunc(xmlDoc);
          }
        } else {
          errorFunc();
        }
      }
    }

    return update;
}


//
// AUTOCOMPLETE
//
function autocomplete(id, popupId, targetId, uri, paramName, postFunc, progressStyle, minimumCharacters) {
  var inputField = document.getElementById(id);
  var popup = document.getElementById(popupId);
  var targetField = document.getElementById(targetId);
  if (!postFunc) postFunc = function () {};
  if (minimumCharacters == null || minimumCharacters == "null") minimumCharacters = 1;
  var items = new Array();
  var current = 0;
  var originalPopupTop = popup.offsetTop;
  
  function constructUri() {
    var separator = "?";
    if (uri.indexOf("?") >= 0)
        separator = "&";
    return uri + separator + paramName + "=" + escape(inputField.value);
  }

  function hidePopup() {
    popup.style.visibility = 'hidden';
  }

  function handlePopupOver() {
    removeListener(inputField, 'blur', hidePopup);
  }

  function handlePopupOut() {
    if (popup.style.visibility == 'visible') {
      addListener(inputField, 'blur', hidePopup);
    }
  }

  function handleClick(e) {
    inputField.value = eventElement(e).innerHTML;
    targetField.value = eventElement(e).getAttribute("id");
    popup.style.visibility = 'hidden';
    inputField.focus();
    postFunc();
  }

  function handleOver(e) {
    items[current].className = '';
    current = eventElement(e).index;
    items[current].className = 'selected';
  }

  function handlerFunc(xmlDoc) {
    var root = xmlDoc.documentElement;
    if (root != null) {
      setProgressStyle();

      var items = root.childNodes;

      // Transform item tags to LI tags
      var ul = xmlDoc.createElement("ul");
      for (var i=0; i<items.length; i++) {
        var li = xmlDoc.createElement("li");
        var liIdAttr = xmlDoc.createAttribute("id");
        var liText = xmlDoc.createTextNode(items[i].firstChild.nodeValue);
        li.setAttribute("id", items[i].getAttribute("value"));
        li.appendChild(liText);
        ul.appendChild(li);
      }

      // Remove item tags
      for (var j=items.length-1; j>=0; j--) {
        root.removeChild(root.childNodes[j]);
      }

      // Add UL tag
      root.appendChild(ul);

      // Set innerHTML for popup
      document.getElementById(popupId).innerHTML = flattenChildren(root.childNodes);

      setSelected();
    }
  }

  function setSelected() {
    current = 0;
    items = popup.getElementsByTagName("li");
    if ((items.length > 1)
       || (items.length == 1
           && items[0].innerHTML != inputField.value)) {
      setPopupStyles();
      for (var i = 0; i < items.length; i++) {
        items[i].index = i;
        addOptionHandlers(items[i]);
      }
      items[0].className = 'selected';
    } else {
      popup.style.visibility = 'hidden';
    }

    resetProgressStyle();

    return null;
  }

  function setProgressStyle() {
    if (progressStyle != null) {
      addClass(inputField, progressStyle);
    }
  }

  function resetProgressStyle() {
    if (progressStyle != null) {
      removeClass(inputField, progressStyle);
    }
  }
  
  function empty() {
    resetProgressStyle();
    popup.style.visibility = 'hidden';
  }

  function setPopupStyles() {
    var maxHeight
    if (isIE) {
      maxHeight = 200;
    } else {
      maxHeight = window.outerHeight/3;
    }
    if (popup.offsetHeight < maxHeight) {
      popup.style.overflow = 'hidden';
    } else if (isMoz) {
      popup.style.maxHeight = maxHeight + 'px';
      popup.style.overflow = '-moz-scrollbars-vertical';
    } else {
      popup.style.height = maxHeight + 'px';
      popup.style.overflowY = 'auto';
    }
    popup.scrollTop = 0;
    popup.style.visibility = 'visible';
    
    // Start playing
    popup.style.top = (getElementY(document.getElementById(id))+document.getElementById(id).offsetHeight+2) + "px";
    popup.style.left = getElementX(document.getElementById(id)) + "px";
    popup.style.width = document.getElementById(id).offsetWidth + "px";
  }

  function addOptionHandlers(option) {
    addListener(option, "click", handleClick);
    addListener(option, "mouseover", handleOver);
  }

  var updater = liveUpdater(constructUri, handlerFunc, null, empty);
  var timeout = false;

  function start(e) {