By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,905 Members | 894 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,905 IT Pros & Developers. It's quick & easy.

Make Ajax query to retrieve value from text box input

P: 20
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.

Expand|Select|Wrap|Line Numbers
  1. <script>
  2. var queryField;
  3. var lookupURL;
  4. var divName;
  5. var ifName;
  6. var lastVal = "";
  7. var val = ""
  8. var xmlHttp;
  9. var cache = new Object();
  10. var searching = false;
  11. var globalDiv;
  12. var divFormatted = false;
  13. var DIV_BG_COLOR = "white";
  14. var DIV_HIGHLIGHT_COLOR = "#FFC50B";
  15. function InitQueryCode (hiddenDivName)
  16. {
  17.     var queryFieldName="amfiregno";
  18.     var lookupURLPrefix="Ajax/ARNNO.jsp?id=";
  19.   queryField = document.getElementsByName(queryFieldName).item(0);
  20.   queryField.onblur = hideDiv;    //not common
  21.   queryField.onkeydown = keypressHandler;
  22.   queryField.autocomplete = "off";
  23.   lookupURL = lookupURLPrefix;
  24.   if (hiddenDivName)
  25.     divName = hiddenDivName;
  26.   else
  27.     divName = "querydiv";
  28.   ifName = "queryiframe";
  29.   addToCache("", new Array());
  30.   setTimeout("mainLoop()", 100);
  31. }
  32. function addToCache (queryString, resultArray1) //Common
  33. {
  34.   cache[queryString] = new Array(resultArray1);
  35. }
  36. mainLoop = function() {
  37.   val = escape(queryField.value);
  38.   if(lastVal != val && searching == false){
  39.     var cacheResult = cache[val];
  40.     if (cacheResult)
  41.       showQueryDiv(val, cacheResult[0]);
  42.     else
  43.       doRemoteQuery(val);
  44.     lastVal = val;
  45.   }
  46.   setTimeout("mainLoop()", 100);
  47.   return true;
  48. }
  49. ;
  50. function getDiv (divID)        //COMMON
  51. {
  52.   if (!globalDiv) {
  53.     if (!document.getElementById(divID)) {
  54.       var newNode = document.createElement("div");
  55.       newNode.setAttribute("id", divID);
  56.       document.body.appendChild(newNode);
  57.     }
  58.     globalDiv = document.getElementById(divID);
  59.     var x = queryField.offsetLeft;
  60.     var y = queryField.offsetTop + queryField.offsetHeight;
  61.     var parent = queryField;
  62.     while (parent.offsetParent) {
  63.       parent = parent.offsetParent;
  64.       x += parent.offsetLeft;
  65.       y += parent.offsetTop;
  66.     }
  67.     if (!divFormatted) {
  68.       globalDiv.style.backgroundColor = DIV_BG_COLOR;
  69.       globalDiv.style.fontFamily = "Verdana, Geneva, Arial, Helvetica, sans-serif";
  70.       globalDiv.style.padding = "1px";
  71.       globalDiv.style.border = "1px solid black";
  72.       globalDiv.style.fontSize = "53%";
  73.      // globalDiv.style.width="150px";
  74.       globalDiv.style.position = "absolute";
  75.       globalDiv.style.left = x + "px";
  76.       globalDiv.style.top = y + "px";
  77.       globalDiv.style.visibility = "hidden";
  78.       globalDiv.style.zIndex = 10000;
  79.       divFormatted = true;
  80.     }
  81.   }
  82.   return globalDiv;
  83. }
  84. function showQueryDiv (queryString, resultArray1)    //COMMON
  85. {
  86.   var div = getDiv(divName);
  87.   while (div.childNodes.length > 0)
  88.     div.removeChild(div.childNodes[0]);
  89.   for (var i = 0; i < resultArray1.length; i++)
  90.   {
  91.     var result = document.createElement("div");
  92.     result.style.cursor = "pointer";
  93.     result.style.borderBottom = "1px solid #777777";
  94.     result.style.padding = "3px 0px 3px 0px";
  95.     _unhighlightResult(result);
  96.     result.onmousedown = selectResult;
  97.     result.onmouseover = highlightResult;
  98.     result.onmouseout = unhighlightResult;
  99.     var result1 = document.createElement("span");
  100.     result1.className = "result1";
  101.     result1.style.textAlign = "left";
  102.     //result1.style.fontWeight = "bold";
  103.     result1.innerHTML = resultArray1[i];
  104.     result.appendChild(result1);
  105.     div.appendChild(result);
  106.   }
  107.   var isCached = cache[queryString];
  108.   if (!isCached)
  109.     addToCache(queryString, resultArray1);
  110.    if(resultArray1.length == 0){
  111.     }
  112.   showDiv(resultArray1.length > 0);
  113. }
  114. function selectResult()    //COMMON
  115. {
  116.   _selectResult(this);
  117. }
  118. function _selectResult(item)    //COMMON
  119. {
  120.   var spans = item.getElementsByTagName("span");
  121.   if (spans) {
  122.     for (var i = 0; i < spans.length; i++) {
  123.       if (spans[i].className == "result1") {
  124.         queryField.value = spans[i].innerHTML;
  125.         lastVal = val = escape(queryField.value);
  126.         searching = false;
  127.         mainLoop();
  128.         queryField.focus();
  129.         showDiv(false);
  130.         return;
  131.       }
  132.     }
  133.   }
  134. }
  135. function highlightResult()    //COMMON
  136. {
  137.   _highlightResult(this);
  138. }
  139. function _highlightResult(item)    //COMMON
  140. {
  141.   item.style.backgroundColor = DIV_HIGHLIGHT_COLOR;
  142. }
  143. function unhighlightResult()    //COMMON
  144. {
  145.   _unhighlightResult(this);
  146. }
  147. function _unhighlightResult(item)    //COMMON
  148. {
  149.   item.style.backgroundColor = DIV_BG_COLOR;
  150. }
  151. function showDiv (show)    //COMMON
  152. {
  153.   var div = getDiv(divName);
  154.   if (show)
  155.     div.style.visibility = "visible";
  156.   else
  157.     div.style.visibility = "hidden";
  158.   adjustiFrame();
  159. }
  160. function hideDiv ()
  161. {
  162.   showDiv(false);
  163.   var code = document.forms[0].amfiregno.value; 
  164.   var name = document.forms[0].brokcode.value; 
  165.   if(code != "")
  166.   {
  167.  
  168.               getIECDCode(code);
  169.  
  170.   }
  171.   else if(name != ""){
  172.  
  173.               getIECDName(name);
  174.  
  175.   }
  176.   document.forms[0].brokcode.focus();
  177. }
  178. function getIECDCode(idField){
  179.     xmlHttp=getXMLHTTP();
  180.   if(xmlHttp){
  181.     xmlHttp.open("GET", "Ajax/ajaxARNNO.jsp?id="+ idField, true);
  182.     xmlHttp.onreadystatechange = function() {
  183.       if (xmlHttp.readyState == 4 && xmlHttp.responseText) {
  184.          var iecddata = xmlHttp.responseText;
  185.           var array = iecddata.split("|");
  186.            document.forms[0].brokcode.value =((array[0]!="") ? array[0]: "");
  187.         document.forms[0].amfiregno.value = ((array[1]!="") ? array[1]: "");
  188.         document.forms[0].brokname.value =((array[2]!="") ? array[2]: "");
  189.            if(document.forms[0].brokcode.value == "")
  190.            {
  191.             document.forms[0].amfiregno.value = "";
  192.             document.forms[0].brokname.value = "";
  193.             document.forms[0].brokcode.value = "";
  194.             alert("ARN No. doesn't exist");
  195.             document.forms[0].amfiregno.focus();
  196.            }
  197.         val = document.forms[0].brokcode.value + "|" + document.forms[0].amfiregno.value+ "|" + document.forms[0].brokname.value;
  198.         }
  199.     }
  200.     ;
  201.     xmlHttp.send(null);
  202.   }
  203. }
  204. function getIECDName(idField){
  205.  
  206.     xmlHttp=getXMLHTTP();
  207.   if(xmlHttp){
  208.     xmlHttp.open("GET", "/FormCPR1Web/CPR/Ajax/ajaxIECDname.jsp?id="+ idField, true);
  209.     xmlHttp.onreadystatechange = function() {
  210.       if (xmlHttp.readyState == 4 && xmlHttp.responseText) {
  211.          var iecddata = xmlHttp.responseText;
  212.         var array = iecddata.split("|");
  213.            document.forms[0].brokcode.value =((array[0]!="") ? array[0]: "");
  214.         document.forms[0].amfiregno.value = ((array[1]!="") ? array[1]: "");
  215.         document.forms[0].brokname.value =((array[2]!="") ? array[2]: "");
  216.            if(document.forms[0].brokcode.value == "")
  217.            {
  218.            document.forms[0].amfiregno.value = "";
  219.            document.forms[0].brokcode.value = "";
  220.         document.forms[0].brokname.value = "";
  221.            alert("ARN No. doesn't exist");
  222.            }
  223.         val =  document.forms[0].brokcode.value + "|" + document.forms[0].amfiregno.value+ "|" + document.forms[0].brokname.value;    
  224.         }
  225.     }
  226.     ;
  227.     xmlHttp.send(null);
  228.   }
  229. }
  230. function getXMLHTTP(){     //COMMON
  231.   var A = null;
  232.   try{
  233.     A = new ActiveXObject("Msxml2.XMLHTTP");
  234.   }catch(e){
  235.     try{
  236.       A = new ActiveXObject("Microsoft.XMLHTTP");
  237.     } catch(oc){
  238.       A = null;
  239.     }
  240.   }
  241.   if(!A && typeof XMLHttpRequest != "undefined") {
  242.     A = new XMLHttpRequest();
  243.   }
  244.   return A;
  245. }
  246. function doRemoteQuery (queryString)    //COMMON
  247. {
  248.   searching = true;
  249.   if(xmlHttp && xmlHttp.readyState != 0) {
  250.     xmlHttp.abort()
  251.   }
  252.   xmlHttp=getXMLHTTP();
  253.   if(xmlHttp){
  254.     xmlHttp.open("GET", lookupURL + queryString, true);
  255.     xmlHttp.onreadystatechange = function() {
  256.       if (xmlHttp.readyState == 4 && xmlHttp.responseText && searching) {
  257.         eval(xmlHttp.responseText);
  258.         searching = false;
  259.       }
  260.     }
  261.     xmlHttp.send(null);
  262.   }
  263. }
  264. function keypressHandler (evt)    //COMMON
  265. {
  266.   var div = getDiv(divName);
  267.   if (div.style.visibility == "hidden")
  268.     return true;
  269.   if(!evt && window.event) {
  270.     evt = window.event;
  271.   }
  272.   var key = evt.keyCode;
  273.   var KEYUP = 38;
  274.   var KEYDOWN = 40;
  275.   var KEYENTER = 13;
  276.   var KEYTAB = 9;
  277.   if ((key != KEYUP) && (key != KEYDOWN) && (key != KEYENTER) && (key != KEYTAB))
  278.     return true;
  279.   var selNum = getSelectedSpanNum(div);
  280.   var selSpan = setSelectedSpan(div, selNum);
  281.   if ((key == KEYENTER) || (key == KEYTAB)) {
  282.     if (selSpan)
  283.       _selectResult(selSpan);
  284.     evt.cancelBubble=true;
  285.     return false;
  286.   } else {
  287.     if (key == KEYUP)
  288.       selSpan = setSelectedSpan(div, selNum - 1);
  289.     if (key == KEYDOWN)
  290.       selSpan = setSelectedSpan(div, selNum + 1);
  291.     if (selSpan)
  292.       _highlightResult(selSpan);
  293.   }
  294.   showDiv(true);
  295.   return true;
  296. }
  297. function getSelectedSpanNum (div)    //COMMON
  298. {
  299.   var count = -1;
  300.   var spans = div.getElementsByTagName("div");
  301.   if (spans) {
  302.     for (var i = 0; i < spans.length; i++) {
  303.       count++;
  304.       if (spans[i].style.backgroundColor != div.style.backgroundColor)
  305.         return count;
  306.     }
  307.   }
  308.   return -1;
  309. }
  310. function setSelectedSpan (div, spanNum)    //COMMON
  311. {
  312.   var count = -1;
  313.   var thisSpan;
  314.   var spans = div.getElementsByTagName("div");
  315.   if (spans) {
  316.     for (var i = 0; i < spans.length; i++) {
  317.       if (++count == spanNum) {
  318.         _highlightResult(spans[i]);
  319.         thisSpan = spans[i];
  320.       } else {
  321.         _unhighlightResult(spans[i]);
  322.       }
  323.     }
  324.   }
  325.   return thisSpan;
  326. }
  327.         function closewin()    //COMMON
  328.         {
  329.  
  330.         window.close();
  331.         }
  332. function resetCompanyName(form){    
  333. document.forms[0].brokcode.value = "";
  334. globalDiv = false;
  335. divFormatted = false;
  336. cache = new Object();
  337. queryField = document.getElementsByName('amfiregno').item(0);
  338. searching = false;
  339. lastVal = "";
  340. val = "";
  341. lookupURL = 'Ajax/ARNNO.jsp?id='; 
  342. }
  343. function resetCompanyCode(form){
  344. document.forms[0].amfiregno.value = "";
  345. globalDiv = false;
  346. divFormatted = false;
  347. cache = new Object();
  348. queryField = document.getElementsByName('brokcode').item(0);
  349. searching = false;
  350. lastVal = "";
  351. val ="";
  352. lookupURL = 'IECDS1.jsp?id=';
  353. }
  354.  
Jul 15 '08 #1
Share this Question
Share on Google+
2 Replies


gits
Expert Mod 5K+
P: 5,353
what script-errors do you get?

kind regards
Jul 15 '08 #2

acoder
Expert Mod 15k+
P: 16,027
Changed the thread title to better describe the problem. Please avoid words such as help.

What's the error message?
Jul 15 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.