ajaxcore.js

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

    if (timeout)
      window.clearTimeout(timeout);

    var key = 0;
    if (e.keyCode) { key = e.keyCode; }
    else if (typeof(e.which)!= 'undefined') { key = e.which; }
    var fieldLength = inputField.value.length;

    //up arrow
    if (key == 38) {
      if (current > 0) {
        items[current].className = '';
        current--;
        items[current].className = 'selected';
        items[current].scrollIntoView(false);
      }

    //down arrow
    } else if (key == 40) {
      if(current < items.length - 1) {
        items[current].className = '';
        current++;
        items[current].className = 'selected';
        items[current].scrollIntoView(false);
      }

    //enter or tab
    } else if ((key == 13) && popup.style.visibility == 'visible') {
      inputField.value = items[current].innerHTML;
      targetField.value = items[current].getAttribute("id");
      popup.style.visibility = 'hidden';
      inputField.focus();
      if (isIE) {
        event.returnValue = false;
      } else {
        e.preventDefault();
      }
      postFunc();

    //escape
    } else if (key == 27) {
      hidePopup();
      if (isIE) {
        event.returnValue = false;
      } else {
        e.preventDefault();
      }

    } else {
      // increment/decrement fieldLength for correct count
      if (key == 8 || key == 46) {
        fieldLength -= 1;
      } else {
        fieldLength += 1;
      }

      // Check for empty input field or not enough characters
      if (fieldLength < minimumCharacters) {
        // hide popup and return
        hidePopup();
      } else if (key != 9) {
        timeout = window.setTimeout(updater, 300);
      }
    }
  }

  addKeyListener(inputField, start);
  addListener(popup, 'mouseover', handlePopupOver);
  addListener(popup, 'mouseout', handlePopupOut);
}


//
// SELECT/DROPDOWN POPULATION
//
function populateSelect(id, targetId, uri, paramName, postFunc, emptyFunc, errorFunc) {
  var inputField = document.getElementById(id);
  var targetField = document.getElementById(targetId);
  if (!postFunc) postFunc = function () {};
  if (!emptyFunc) emptyFunc = function () {};
  if (!errorFunc) errorFunc = function () {};

  function constructUri() {
    var separator = "?";
    if (uri.indexOf("?") >= 0)
        separator = "&";
    return uri
      + separator
      + paramName
      + "="
      + escape(inputField.options[inputField.selectedIndex].value);
  }

  function handleChange(e) {
    var updater = liveUpdater(constructUri, handlerFunc, null, emptyFunc, errorFunc);
    var timeout = window.setTimeout(updater, 0);
  }

  function handlerFunc(xmlDoc) {
    var root = xmlDoc.documentElement;

    // clear existing options
    targetField.options.length = 0;

    if (root != null) {
      targetField.disabled = false;
      var items = root.childNodes;
      for (var i=0; i<items.length; i++) {
        targetField.options[i] = new Option(items[i].firstChild.nodeValue, items[i].getAttribute("value"));
      }

      targetField.focus();
      postFunc();
    }
  }

  addListener(inputField, "change", handleChange);
}


//
// ON/OFF TOGGLE
//
function toggle(imgId, targetId, stateId, uri, paramName, imageOn, imageOff, postFunc, emptyFunc, errorFunc) {
  var imageElem = document.getElementById(imgId);
  var targetElem = document.getElementById(targetId);
  var stateIdElem = document.getElementById(stateId);
  if (!postFunc) postFunc = function () {};
  if (!emptyFunc) emptyFunc = function () {};
  if (!errorFunc) errorFunc = function () {};

  function constructUri() {
    var separator = "?";
    if (uri.indexOf("?") >= 0)
        separator = "&";
    return uri
      + separator
      + paramName
      + "="
      + escape(stateIdElem.value);
  }

  function handleClick(e) {
    var updater = liveUpdater(constructUri, handlerFunc, null, emptyFunc, errorFunc);
    var timeout = window.setTimeout(updater, 0);
  }

  function handlerFunc(xmlDoc) {
    var root = xmlDoc.documentElement;

    if (root != null) {
      var items = root.childNodes;
      if (items.length > 0) {
				// fill text (if present)
      	targetElem.innerHTML = items[0].firstChild.nodeValue;

				// replace image
				if ("true".toLowerCase() == (new String(items[0].getAttribute("value"))).toLowerCase()) {
					imageElem.src = imageOn;
					stateIdElem.value = true;
				} else {
					imageElem.src = imageOff;
					stateIdElem.value = false;
				}
      }

      postFunc();
    }
  }

  addListener(imageElem, "click", handleClick);
}


//
// FORM UPDATE
//
function formUpdate(sourceId, targetId, actionId, uri, paramName, postFunc, emptyFunc, errorFunc) {
  var sourceElem = document.getElementById(sourceId);
  var actionElem = document.getElementById(actionId);
  var targets = targetId.split(",");
  if (!postFunc) postFunc = function () {};
  if (!emptyFunc) emptyFunc = function () {};
  if (!errorFunc) errorFunc = function () {};

  function constructUri() {
    var separator = "?";
    if (uri.indexOf("?") >= 0)
        separator = "&";
    return uri
      + separator
      + paramName
      + "="
      + escape(sourceElem.value);
  }

  function handleClick(e) {
    var updater = liveUpdater(constructUri, handlerFunc, null, emptyFunc, errorFunc);
    var timeout = window.setTimeout(updater, 0);
  }

	function selectSingleNodeByAttribute(nodes, attribute, value) {
		var ret = null;
		for (var i=0; i<nodes.length; i++) {
			var attr = nodes[i].getAttribute(attribute);
			if (attr != null && attr == value) {
				ret = nodes[i];
				break;
			}
		}
		return ret;
	}

  function handlerFunc(xmlDoc) {
    var root = xmlDoc.documentElement;

    if (root != null) {
      var items = root.childNodes;
      if (items.length > 0) {
      	for (var i=0; i<targets.length; i++) {
	      	var node = selectSingleNodeByAttribute(items, "value", targets[i]);
      		var field = document.getElementById(targets[i]);
	      	if (node != null && field != null && field.type == "text") {
      			field.value = node.firstChild.nodeValue;
	      	}
      	}
      }

      postFunc();
    }
  }

  addListener(actionElem, "click", handleClick);
}


//
// CALLOUT
//
function callout(anchorId, classNamePrefix, uri, paramName, paramValue,
                 boxPosition, useTitleBar, title, timeout, postFunc, emptyFunc, errorFunc) {

  var anchorElem = document.getElementById(anchorId);
  if (!boxPosition) boxPosition = "top-right";
  if (!timeout) timeout = -1;
  if (!useTitleBar) {
    useTitleBar = false;
  } else {
    useTitleBar =
      ("true" == useTitleBar.toLowerCase() || "yes" == useTitleBar.toLowerCase()) ? true : false;
  }
  if ("null" == title) {
    title = null;
  } else {
    useTitleBar = true;
  }
  var targetElem = constructBox(classNamePrefix);
  if (!postFunc) postFunc = function () {};
  if (!emptyFunc) emptyFunc = function () {};
  if (!errorFunc) errorFunc = function () {};

  function constructUri() {
    var separator = "?";
    if (uri.indexOf("?") >= 0)
        separator = "&";
    if (null == paramName || (null != paramName && null == paramValue)) {
      return uri;
    }
    return uri
      + separator
      + paramName
      + "="
      + escape(paramValue);
  }

  function handleClick(e) {
    var updater = liveUpdater(constructUri, handlerFunc, null, emptyFunc, errorFunc);
    var upTimeout = window.setTimeout(updater, 0);
  }

  function handleCloseClick(e) {
    targetElem.style.display = "none";
    removeListener(this, 'mousemove', handleHover);
    document.releaseEvents(Event.MOUSEMOVE);
  }

  function handlerFunc(xmlDoc) {
    var root = xmlDoc.documentElement;

    if (root != null) {
      var items = root.childNodes;
      if (items.length > 0) {
				// fill text (if present)
        if (useTitleBar) {
          if (!title) {
            targetElem.childNodes[1].innerHTML = items[0].getAttribute("value");
          } else {
            targetElem.childNodes[1].innerHTML = title;
          }
          targetElem.childNodes[2].innerHTML = items[0].firstChild.nodeValue;
        } else {
          targetElem.childNodes[1].innerHTML = items[0].firstChild.nodeValue;
        }
      	
      	// move box to new location
        moveBox(anchorElem, targetElem);

        // bring box to front
        targetElem.style.display = "block";

        if (timeout > 0) {
          window.setTimeout(hookHover, timeout);
        }
      }

      postFunc();
    }
  }

  function constructBox(classNamePrefix) {
    // create base
    var eBox = document.createElement("div");
    eBox.className = classNamePrefix+"Box";
    document.documentElement.appendChild(eBox);

    // add elements
    var eClose = document.createElement("div");
    eClose.className = classNamePrefix+"Close";
    eClose.appendChild(document.createTextNode("X"));
    eBox.appendChild(eClose);

    if (useTitleBar) {
      var eTitle = document.createElement("div");
      eTitle.className = classNamePrefix+"Title";
      eBox.appendChild(eTitle);
    }

    var eContent = document.createElement("div");
    eContent.className = classNamePrefix+"Content";
    eBox.appendChild(eContent);

    eBox.style.display = "none";
    document.getElementById("calloutContainer").appendChild(eBox);
    return eBox;
  }

  function moveBox(anchor, box) {
    var posX = anchor.offsetLeft;
    var posY = anchor.offsetTop;
    box.style.position = "absolute";

    if (boxPosition.indexOf("top") >= 0) {
      box.style.top = (posY - (box.offsetHeight) - 10) + "px";
    } else {
      box.style.top = (posY + (anchor.offsetHeight) + 10) + "px";
    }
    if (boxPosition.indexOf("right") >= 0) {
      box.style.left = (posX + 10) + "px";
    } else {
      box.style.left = (posX - (box.offsetWidth) - 10) + "px";
    }

    // Check for off-screen position
    if (box.offsetLeft < 0) {
      box.style.left = 0;
    }
    if (box.offsetTop < 0) {
      box.style.top = 0;
    }
  }

  function closeOnClick(e) {
  	if (targetElem.style.display != "none") {
      var clickX = e.pageX;
      var clickY = e.pageY;
      var boundX1 = targetElem.offsetLeft;
      var boundX2 = boundX1 + targetElem.offsetWidth;
      var boundY1 = targetElem.offsetTop;
      var boundY2 = boundY1 + targetElem.offsetHeight;
      if (clickX < boundX1 || clickX > boundX2 || clickY < boundY1 || clickY > boundY2) {
      	handleCloseClick();
      }
    }
	}

  function hookHover() {
    document.captureEvents(Event.MOUSEMOVE);
    addListener(this, "mousemove", handleHover);
  }

  function handleHover(e) {
    var clickX = e.clientX;
    var clickY = e.clientY;
    var boundX1 = targetElem.offsetLeft;
    var boundX2 = boundX1 + targetElem.offsetWidth;
    var boundY1 = targetElem.offsetTop;
    var boundY2 = boundY1 + targetElem.offsetHeight;
    if (clickX < boundX1 || clickX > boundX2 || clickY < boundY1 || clickY > boundY2) {
    	handleCloseClick();
    }
  }

  addListener(anchorElem, "click", handleClick);
  addListener(targetElem.childNodes[0], "click", handleCloseClick);
  addListener(this, "click", closeOnClick);
}