Make Ajax query to retrieve value from text box input

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • mndprasad
    New Member
    • Jan 2008
    • 20

    #1

    Make Ajax query to retrieve value from text box input

    Hi friends,
    Am new to AJAX coding, In my program am going to have two texbox which going to implent AJAX from same table. One box is going to retrieve the value of other and vice versa.

    I have implemented successfully for one text box, but it's done for the other field, since am getting script errors.

    Code:
    <script>
    var queryField;
    var lookupURL;
    var divName;
    var ifName;
    var lastVal = "";
    var val = ""
    var xmlHttp;
    var cache = new Object();
    var searching = false;
    var globalDiv;
    var divFormatted = false;
    var DIV_BG_COLOR = "white";
    var DIV_HIGHLIGHT_COLOR = "#FFC50B";
    function InitQueryCode (hiddenDivName)
    {
    	var queryFieldName="amfiregno";
    	var lookupURLPrefix="Ajax/ARNNO.jsp?id=";
      queryField = document.getElementsByName(queryFieldName).item(0);
      queryField.onblur = hideDiv;	//not common
      queryField.onkeydown = keypressHandler;
      queryField.autocomplete = "off";
      lookupURL = lookupURLPrefix;
      if (hiddenDivName)
        divName = hiddenDivName;
      else
        divName = "querydiv";
      ifName = "queryiframe";
      addToCache("", new Array());
      setTimeout("mainLoop()", 100);
    }
    function addToCache (queryString, resultArray1) //Common
    {
      cache[queryString] = new Array(resultArray1);
    }
    mainLoop = function() {
      val = escape(queryField.value);
      if(lastVal != val && searching == false){
        var cacheResult = cache[val];
        if (cacheResult)
          showQueryDiv(val, cacheResult[0]);
        else
          doRemoteQuery(val);
        lastVal = val;
      }
      setTimeout("mainLoop()", 100);
      return true;
    }
    ;
    function getDiv (divID)		//COMMON
    {
      if (!globalDiv) {
        if (!document.getElementById(divID)) {
          var newNode = document.createElement("div");
          newNode.setAttribute("id", divID);
          document.body.appendChild(newNode);
        }
        globalDiv = document.getElementById(divID);
        var x = queryField.offsetLeft;
        var y = queryField.offsetTop + queryField.offsetHeight;
        var parent = queryField;
        while (parent.offsetParent) {
          parent = parent.offsetParent;
          x += parent.offsetLeft;
          y += parent.offsetTop;
        }
        if (!divFormatted) {
          globalDiv.style.backgroundColor = DIV_BG_COLOR;
          globalDiv.style.fontFamily = "Verdana, Geneva, Arial, Helvetica, sans-serif";
          globalDiv.style.padding = "1px";
          globalDiv.style.border = "1px solid black";
          globalDiv.style.fontSize = "53%";
    	 // globalDiv.style.width="150px";
          globalDiv.style.position = "absolute";
          globalDiv.style.left = x + "px";
          globalDiv.style.top = y + "px";
          globalDiv.style.visibility = "hidden";
          globalDiv.style.zIndex = 10000;
          divFormatted = true;
        }
      }
      return globalDiv;
    }
    function showQueryDiv (queryString, resultArray1)	//COMMON
    {
      var div = getDiv(divName);
      while (div.childNodes.length > 0)
        div.removeChild(div.childNodes[0]);
      for (var i = 0; i < resultArray1.length; i++)
      {
        var result = document.createElement("div");
        result.style.cursor = "pointer";
        result.style.borderBottom = "1px solid #777777";
        result.style.padding = "3px 0px 3px 0px";
        _unhighlightResult(result);
        result.onmousedown = selectResult;
        result.onmouseover = highlightResult;
        result.onmouseout = unhighlightResult;
        var result1 = document.createElement("span");
        result1.className = "result1";
        result1.style.textAlign = "left";
        //result1.style.fontWeight = "bold";
        result1.innerHTML = resultArray1[i];
        result.appendChild(result1);
        div.appendChild(result);
      }
      var isCached = cache[queryString];
      if (!isCached)
        addToCache(queryString, resultArray1);
       if(resultArray1.length == 0){
        }
      showDiv(resultArray1.length > 0);
    }
    function selectResult()	//COMMON
    {
      _selectResult(this);
    }
    function _selectResult(item)	//COMMON
    {
      var spans = item.getElementsByTagName("span");
      if (spans) {
        for (var i = 0; i < spans.length; i++) {
          if (spans[i].className == "result1") {
            queryField.value = spans[i].innerHTML;
            lastVal = val = escape(queryField.value);
            searching = false;
            mainLoop();
            queryField.focus();
            showDiv(false);
            return;
          }
        }
      }
    }
    function highlightResult()	//COMMON
    {
      _highlightResult(this);
    }
    function _highlightResult(item)	//COMMON
    {
      item.style.backgroundColor = DIV_HIGHLIGHT_COLOR;
    }
    function unhighlightResult()	//COMMON
    {
      _unhighlightResult(this);
    }
    function _unhighlightResult(item)	//COMMON
    {
      item.style.backgroundColor = DIV_BG_COLOR;
    }
    function showDiv (show)	//COMMON
    {
      var div = getDiv(divName);
      if (show)
        div.style.visibility = "visible";
      else
        div.style.visibility = "hidden";
      adjustiFrame();
    }
    function hideDiv ()
    {
      showDiv(false);
      var code = document.forms[0].amfiregno.value; 
      var name = document.forms[0].brokcode.value; 
      if(code != "")
      {
    	  		
      			getIECDCode(code);
    		
      }
      else if(name != ""){
    			
      			getIECDName(name);
    			
      }
      document.forms[0].brokcode.focus();
    }
    function getIECDCode(idField){
    	xmlHttp=getXMLHTTP();
      if(xmlHttp){
        xmlHttp.open("GET", "Ajax/ajaxARNNO.jsp?id="+ idField, true);
        xmlHttp.onreadystatechange = function() {
          if (xmlHttp.readyState == 4 && xmlHttp.responseText) {
         	var iecddata = xmlHttp.responseText;
          	var array = iecddata.split("|");
       		document.forms[0].brokcode.value =((array[0]!="") ? array[0]: "");
            document.forms[0].amfiregno.value = ((array[1]!="") ? array[1]: "");
    		document.forms[0].brokname.value =((array[2]!="") ? array[2]: "");
       		if(document.forms[0].brokcode.value == "")
       		{
    			document.forms[0].amfiregno.value = "";
    			document.forms[0].brokname.value = "";
    			document.forms[0].brokcode.value = "";
    			alert("ARN No. doesn't exist");
    			document.forms[0].amfiregno.focus();
       		}
            val = document.forms[0].brokcode.value + "|" + document.forms[0].amfiregno.value+ "|" + document.forms[0].brokname.value;
            }
        }
        ;
        xmlHttp.send(null);
      }
    }
    function getIECDName(idField){
    
    	xmlHttp=getXMLHTTP();
      if(xmlHttp){
        xmlHttp.open("GET", "/FormCPR1Web/CPR/Ajax/ajaxIECDname.jsp?id="+ idField, true);
        xmlHttp.onreadystatechange = function() {
          if (xmlHttp.readyState == 4 && xmlHttp.responseText) {
         	var iecddata = xmlHttp.responseText;
    		var array = iecddata.split("|");
       		document.forms[0].brokcode.value =((array[0]!="") ? array[0]: "");
            document.forms[0].amfiregno.value = ((array[1]!="") ? array[1]: "");
    		document.forms[0].brokname.value =((array[2]!="") ? array[2]: "");
       		if(document.forms[0].brokcode.value == "")
       		{
       		document.forms[0].amfiregno.value = "";
       		document.forms[0].brokcode.value = "";
    		document.forms[0].brokname.value = "";
       		alert("ARN No. doesn't exist");
       		}
            val =  document.forms[0].brokcode.value + "|" + document.forms[0].amfiregno.value+ "|" + document.forms[0].brokname.value;	
            }
        }
        ;
        xmlHttp.send(null);
      }
    }
    function getXMLHTTP(){	 //COMMON
      var A = null;
      try{
        A = new ActiveXObject("Msxml2.XMLHTTP");
      }catch(e){
        try{
          A = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(oc){
          A = null;
        }
      }
      if(!A && typeof XMLHttpRequest != "undefined") {
        A = new XMLHttpRequest();
      }
      return A;
    }
    function doRemoteQuery (queryString)	//COMMON
    {
      searching = true;
      if(xmlHttp && xmlHttp.readyState != 0) {
        xmlHttp.abort()
      }
      xmlHttp=getXMLHTTP();
      if(xmlHttp){
        xmlHttp.open("GET", lookupURL + queryString, true);
        xmlHttp.onreadystatechange = function() {
          if (xmlHttp.readyState == 4 && xmlHttp.responseText && searching) {
            eval(xmlHttp.responseText);
            searching = false;
          }
        }
        xmlHttp.send(null);
      }
    }
    function keypressHandler (evt)	//COMMON
    {
      var div = getDiv(divName);
      if (div.style.visibility == "hidden")
        return true;
      if(!evt && window.event) {
        evt = window.event;
      }
      var key = evt.keyCode;
      var KEYUP = 38;
      var KEYDOWN = 40;
      var KEYENTER = 13;
      var KEYTAB = 9;
      if ((key != KEYUP) && (key != KEYDOWN) && (key != KEYENTER) && (key != KEYTAB))
        return true;
      var selNum = getSelectedSpanNum(div);
      var selSpan = setSelectedSpan(div, selNum);
      if ((key == KEYENTER) || (key == KEYTAB)) {
        if (selSpan)
          _selectResult(selSpan);
        evt.cancelBubble=true;
        return false;
      } else {
        if (key == KEYUP)
          selSpan = setSelectedSpan(div, selNum - 1);
        if (key == KEYDOWN)
          selSpan = setSelectedSpan(div, selNum + 1);
        if (selSpan)
          _highlightResult(selSpan);
      }
      showDiv(true);
      return true;
    }
    function getSelectedSpanNum (div)	//COMMON
    {
      var count = -1;
      var spans = div.getElementsByTagName("div");
      if (spans) {
        for (var i = 0; i < spans.length; i++) {
          count++;
          if (spans[i].style.backgroundColor != div.style.backgroundColor)
            return count;
        }
      }
      return -1;
    }
    function setSelectedSpan (div, spanNum)	//COMMON
    {
      var count = -1;
      var thisSpan;
      var spans = div.getElementsByTagName("div");
      if (spans) {
        for (var i = 0; i < spans.length; i++) {
          if (++count == spanNum) {
            _highlightResult(spans[i]);
            thisSpan = spans[i];
          } else {
            _unhighlightResult(spans[i]);
          }
        }
      }
      return thisSpan;
    }
        	function closewin()	//COMMON
        	{
        	
        	window.close();
        	}
    function resetCompanyName(form){	
    document.forms[0].brokcode.value = "";
    globalDiv = false;
    divFormatted = false;
    cache = new Object();
    queryField = document.getElementsByName('amfiregno').item(0);
    searching = false;
    lastVal = "";
    val = "";
    lookupURL = 'Ajax/ARNNO.jsp?id='; 
    }
    function resetCompanyCode(form){
    document.forms[0].amfiregno.value = "";
    globalDiv = false;
    divFormatted = false;
    cache = new Object();
    queryField = document.getElementsByName('brokcode').item(0);
    searching = false;
    lastVal = "";
    val ="";
    lookupURL = 'IECDS1.jsp?id=';
    }
  • gits
    Recognized Expert Moderator Expert
    • May 2007
    • 5390

    #2
    what script-errors do you get?

    kind regards

    Comment

    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032

      #3
      Changed the thread title to better describe the problem. Please avoid words such as help.

      What's the error message?

      Comment

      Working...