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

AJAX: readystate staying at 1

100+
P: 219
I'm having a little trouble getting this ajax to work. Everytime I select a value in the page below I'm seeing that the readyState is 1, but never changes from 1.

Here is my html:

Expand|Select|Wrap|Line Numbers
  1.    <div id="cgStatuses">
  2.         <SELECT name="cgStatus" id="cgStatus">
  3.             <option>Select an alert</option>
  4.             <cfoutput query="cgalerts">
  5.                 <cfset #cgDate# = #DateFormat(#date#,"mm/dd/yy")#>
  6.                 <cfset #cgTime# = #TimeFormat(#time#,"HH:mm")#>
  7.                 <option value=#RecID#>#cgDate# #cgTime# - #Diversion# #CodeGreySts#</option>
  8.             </cfoutput>
  9.         </SELECT>
  10.         <a href="javascript:codegreyadmin('view',this)">View</a>
  11.         <a href="javascript:codegreyadmin('edit',this)">Edit</a>
  12.         <a href="javascript:codegreyadmin('del',this)">Delete</a>
  13.         <div id="notify">
  14.             <!-- Ajax message here -->
  15.         </div>
  16.     </div>
  17.  
Here is my javascript:

Expand|Select|Wrap|Line Numbers
  1. function handleHttpResponse(element) {
  2.     alert(xmlHttp.readyState);
  3.     if (xmlHttp.readyState == 4) {
  4.         var results = xmlHttp.responseText.split(',');
  5.         var testing = xmlHttp.responseText;
  6.         alert("Test: " + results[1] + results[2] + results[3] + testing);
  7.         var str = results[1];
  8.         updatepage(element,str);
  9.     }
  10. }
  11.  
  12. //This function will update an id on a page and insert the value into it.
  13. function updatepage(pageID,str) {
  14.     document.getElementById(pageID).innerHTML = str;
  15. }
  16.  
  17. function codegreyadmin(action,which){
  18.     n = which.value;
  19.     var x=document.getElementById("cgStatus");
  20.     alert(x);
  21.     n = x.value;
  22.     var url = 'codegreyadmin.cfm?RecID=' + n + '&action=' + action;
  23.     alert(url);
  24.     xmlHttp.open("GET",url, true);
  25.     xmlHttp.onreadystatechange = handleHttpResponse('notify');
  26.     xmlHttp.send(null);
  27. }
  28.  
Here is the coldfusion page I'm calling:

Expand|Select|Wrap|Line Numbers
  1. <cfoutput>10,11,12</cfoutput>
  2.  
Please note: I have junk data in a lot of this so that I can test it. Once I know the functionality works, then I put useful data in.
Nov 12 '07 #1
Share this Question
Share on Google+
13 Replies


gits
Expert Mod 5K+
P: 5,328
hi ...

you call your response-handling-function immedatly ... you have to use a closure:

Expand|Select|Wrap|Line Numbers
  1. xmlHttp.onreadystatechange = function() {
  2.     handleHttpResponse('notify');
  3. };
kind regards
Nov 12 '07 #2

100+
P: 219
Sweet thanks gits! I'm a moron, can't believe I missed that.
Nov 12 '07 #3

gits
Expert Mod 5K+
P: 5,328
hi ...

no problem :) ... come back whenever you have more questions ...

kind regards
Nov 12 '07 #4

100+
P: 219
That did the trick. Things are working much better now.
Nov 14 '07 #5

100+
P: 219
I seem to be having some issues once again. It's been a while since I did ajax so I'm slow. I keep getting the readyState as 1, it's not getting to 4.

Expand|Select|Wrap|Line Numbers
  1. function getHTTPObject(){
  2.     var xhr = false;
  3.     if(window.XMLHttpRequest) {
  4.         xhr = new XMLHttpRequest();
  5.     } 
  6.     else if(window.ActiveXObject) {
  7.         try{
  8.             xhr = new ActiveXObject("Msxml2.XMLHTTP");
  9.         }
  10.         catch(e) {
  11.             try{
  12.                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
  13.             }
  14.             catch(e){
  15.                 xhr=false;
  16.             }
  17.         }
  18.     }
  19.     return xhr;
  20. }
  21.  
  22. function getFile(file){
  23.     //instantiate an XMLHttpRequest object
  24.     var request = getHTTPObject();
  25.     if(request){
  26.         request.onreadystatechange=function() {
  27.             displayResponse(request);
  28.         };
  29.         request.open("GET",file,true);
  30.         request.send(NULL);
  31.     }
  32. }
  33. function displayResponse(request){
  34.     alert(request.readyState);
  35.     if (request.readyState==4){
  36.         if (request.status=200 || request.status==304){
  37.             alert(request.responseTest);
  38.         }
  39.     }
  40. }
  41.  
Expand|Select|Wrap|Line Numbers
  1. <a href="test.txt" onclick="getFile(this.href);return false;">Click here to view test.txt</a>
  2.  
test.txt contains a line of text thats it. I am just trying to get the alert to popup with the text from the file.

This is a refresher for me so i'm sorry for being a dummy.
Mar 12 '08 #6

gits
Expert Mod 5K+
P: 5,328
may be that's a typo?

Expand|Select|Wrap|Line Numbers
  1. request.responseTest
change it to:

Expand|Select|Wrap|Line Numbers
  1. request.responseText
kind regards
Mar 13 '08 #7

100+
P: 219
may be that's a typo?

Expand|Select|Wrap|Line Numbers
  1. request.responseTest
change it to:

Expand|Select|Wrap|Line Numbers
  1. request.responseText
kind regards
Yeah that was a type, sorry. I wasn't even worried about that line yet because I keep getting a 1 from my alert(request.readyState) call.
Mar 13 '08 #8

100+
P: 219
When I click on my link to process the alert, it opens up the page instead of processing the alert text.
Mar 13 '08 #9

100+
P: 219
I got it working now, I was being dumb. I had another function in my file with the same name, I think I need to take the rest of the week off.
Mar 13 '08 #10

gits
Expert Mod 5K+
P: 5,328
:) ... so do that ...

kind regards
Mar 13 '08 #11

P: 2
Hi everyone, I am having the same problem.

http.ReadyState is always 1 no matter what I do. I am using a jsp.

I never get to the alert Response Completed.

Thanks for your help

PAGE 1.
Expand|Select|Wrap|Line Numbers
  1. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3.    "http://www.w3.org/TR/html4/loose.dtd">
  4.  
  5. <html>
  6.     <head>
  7.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8.         <title>Ingrese datos</title>
  9.  
  10.         <script language="javascript" type="text/javascript">
  11.  
  12.         var url = "query.jsp";
  13.         var http = getHTTPObject();
  14.  
  15.         function submitData(){
  16.             var rrn = document.ancelData.inputTrmExtId.value;
  17.             if(isEmpty(rrn))
  18.                 alert("rrn vacio");
  19.             var trnum = document.ancelData.NroTrmAcm.value;
  20.             if(isEmpty(trnum))
  21.                 alert("trnum vacio");
  22.             queryWS2Ancel(rrn, trnum);
  23.         };
  24.  
  25.         function queryWS2Ancel(rrn, trnum) {
  26.            var poststr = "rrn=" +escape(encodeURI(rrn)+"&trnum=" + encodeURI(trnum));
  27.  
  28.            http.onreadystatechange = handleHttpResponse;
  29.            http.open("POST", url, true);
  30.            http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  31.            http.setRequestHeader("Content-length", poststr.length);
  32.            http.setRequestHeader("Connection", "close");
  33.            http.send(poststr);
  34.         };
  35.  
  36.         function handleHttpResponse() {
  37.             //alert("entre response, status="+http.readyState);
  38.             if (http.readyState == 4) {
  39.                 //alert("entre al response 2");
  40.                 if (http.status == 200) {
  41.  
  42.                     alert("Response completed");
  43.                     var trnQuery = http.responseXML.getElementsByTagName("NroTRMACM")[0].childNodes[0].nodeValue;
  44.                     //alert("trn=" + trnQuery);
  45.                     var codQuery = http.responseXML.getElementsByTagName("ErrorCod")[0].childNodes[0].nodeValue;
  46.                     var msgQuery = http.responseXML.getElementsByTagName("ErrorMSG")[0].childNodes[0].nodeValue;
  47.  
  48.                     var mdiv = document.getElementById("Response");
  49.                     mdiv.innerHTML = "<div style=\"color:green\">"+trnQuery+" - "+ codQuery +" - "+ msgQuery+"</ div>";
  50.  
  51.                 } else {
  52.                     alert ( "Not able to retrieve name" );
  53.                 }
  54.             }
  55.         };
  56.  
  57.         function getHTTPObject() {
  58.             var xmlhttp;
  59.  
  60.             if (window.XMLHttpRequest) {
  61.                  xmlhttp = new XMLHttpRequest();
  62.             } else if (window.ActiveXObject) {
  63.                 try {
  64.                     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  65.                 } catch (e)
  66.                 {
  67.                     try {
  68.                         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  69.                     } catch (e) {}
  70.                 }
  71.             } else {
  72.                 alert("Your browser does not support XMLHTTP.");
  73.             }
  74.  
  75.             return xmlhttp;
  76.         };
  77.  
  78.         function isEmpty(field){
  79.             if (field == "" || field == null)
  80.                 return true;
  81.             else
  82.                 return false;
  83.         };
  84.  
  85.         </script>
  86.  
  87.     </head>
  88.     <body>
  89.         <h1>Ingrese los datos</h1> <br>
  90.         <form name="ancelData" id="ancelData">
  91.             Reference Number(RRN): <input type="text" name="inputTrmExtId" id="inputTrmExtId"> <br>
  92.             Numero Tramite: <input type="text" name="NroTrmAcm" id="NroTrmAcm"> <br>
  93.             <input type="submit" value="Consultar" onclick="javascript:submitData();">
  94.         </form>
  95.  
  96.         <div id="Response"></div>
  97.  
  98.     </body>
  99. </html>
SERVER PAGE
Expand|Select|Wrap|Line Numbers
  1. <%
  2.     response.setContentType("text/xml");
  3.     response.setHeader("Cache-Control", "no-cache");
  4.  
  5.     response.getWriter().write("vuelta");
  6. %>
May 7 '09 #12

P: 2
Hi, I have the same problem my readyState staying at 1.

I am using a jsp page, but never get to the Response ended alert.

thanks in advance

Initial Page.
Expand|Select|Wrap|Line Numbers
  1. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3.    "http://www.w3.org/TR/html4/loose.dtd">
  4.  
  5. <html>
  6.     <head>
  7.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8.         <title>Ingrese datos</title>
  9.  
  10.         <script language="javascript" type="text/javascript">
  11.  
  12.         var url = "query.jsp";
  13.         var http = getHTTPObject();
  14.  
  15.         function submitData(){
  16.             var rrn = document.ancelData.inputTrmExtId.value;
  17.             if(isEmpty(rrn))
  18.                 alert("rrn vacio");
  19.             var trnum = document.ancelData.NroTrmAcm.value;
  20.             if(isEmpty(trnum))
  21.                 alert("trnum vacio");
  22.             queryWS2Ancel(rrn, trnum);
  23.         };
  24.  
  25.         function queryWS2Ancel(rrn, trnum) {
  26.            var poststr = "rrn=" +escape(encodeURI(rrn)+"&trnum=" + encodeURI(trnum));
  27.  
  28.            http.onreadystatechange = handleHttpResponse;
  29.            http.open("POST", url, true);
  30.            http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  31.            http.setRequestHeader("Content-length", poststr.length);
  32.            http.setRequestHeader("Connection", "close");
  33.            http.send(poststr);
  34.         };
  35.  
  36.         function handleHttpResponse() {
  37.             //alert("entre response, status="+http.readyState);
  38.             if (http.readyState == 4) {
  39.                 //alert("entre al response 2");
  40.                 if (http.status == 200) {
  41.  
  42.                     alert("Response ended");
  43.                     var trnQuery = http.responseXML.getElementsByTagName("NroTRMACM")[0].childNodes[0].nodeValue;
  44.                     //alert("trn=" + trnQuery);
  45.                     var codQuery = http.responseXML.getElementsByTagName("ErrorCod")[0].childNodes[0].nodeValue;
  46.                     var msgQuery = http.responseXML.getElementsByTagName("ErrorMSG")[0].childNodes[0].nodeValue;
  47.  
  48.                     var mdiv = document.getElementById("Response");
  49.                     mdiv.innerHTML = "<div style=\"color:green\">"+trnQuery+" - "+ codQuery +" - "+ msgQuery+"</ div>";
  50.  
  51.                 } else {
  52.                     alert ( "Not able to retrieve name" );
  53.                 }
  54.             }
  55.         };
  56.  
  57.         function getHTTPObject() {
  58.             var xmlhttp;
  59.  
  60.             if (window.XMLHttpRequest) {
  61.                  xmlhttp = new XMLHttpRequest();
  62.             } else if (window.ActiveXObject) {
  63.                 try {
  64.                     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  65.                 } catch (e)
  66.                 {
  67.                     try {
  68.                         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  69.                     } catch (e) {}
  70.                 }
  71.             } else {
  72.                 alert("Your browser does not support XMLHTTP.");
  73.             }
  74.  
  75.             return xmlhttp;
  76.         };
  77.  
  78.         function isEmpty(field){
  79.             if (field == "" || field == null)
  80.                 return true;
  81.             else
  82.                 return false;
  83.         };
  84.  
  85.         </script>
  86.  
  87.     </head>
  88.     <body>
  89.         <h1>Ingrese los datos</h1> <br>
  90.         <form name="ancelData" id="ancelData">
  91.             Reference Number(RRN): <input type="text" name="inputTrmExtId" id="inputTrmExtId"> <br>
  92.             Numero Tramite: <input type="text" name="NroTrmAcm" id="NroTrmAcm"> <br>
  93.             <input type="submit" value="Consultar" onclick="javascript:submitData();">
  94.         </form>
  95.  
  96.         <div id="Response"></div>
  97.  
  98.     </body>
  99. </html>
  100.  
SERVER PAGE
Expand|Select|Wrap|Line Numbers
  1. <%
  2.     response.setContentType("text/xml");
  3.     response.setHeader("Cache-Control", "no-cache");
  4.  
  5.     response.getWriter().write("vuelta");
  6. %>
May 7 '09 #13

acoder
Expert Mod 15k+
P: 16,027
First check that the server-side page can be accessed and returns the correct output when you access it directly (without Ajax) or via a normal form submit.
May 8 '09 #14

Post your reply

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