ASP and AJAX problems

[srkidd12]

Hello,

I am having problems with using AJAX to call information to my primary ASP page from a secondary asp page that brings in the data I want to display.

I'm having the onfocus event trigger the function show() to call in the data from the secondary asp page. However, when I click on the record in the list, nothing happens. The information is suppose to appear ni the div id = "div_id". Please help. I need the information in the secondary asp page to appear in the primary asp page.

Relevant part of primary asp page:

<table width="786" height="215" border="0" cellspacing="0">
  <tr>
    <td width="183" height="213" align="center" valign="top">
    <table width="183" height="196" border="0" cellspacing="0">
      <tr>
        <th height="27" bgcolor="#0099FF" align="center">&nbsp;</th>
      </tr>
      <tr>
        <th height="12" bgcolor="#0099FF" align="center">List Heading</th>
      </tr>
      <tr>
        <td valign="top" align="center"><form id="form3" name="form3" method="get">
        <select name="selectlist" size="10" id="list"onfocus="show(this.value)">
          <%while not rsS.eof%>
          <option id="<%=rsS("ID")%>"><%= rsS("Name") %></option>
          <% rsS.movenext
             wend%>
        </select>
        </form></td>
      </tr>
    </table>
    </td>
    <td width="486" valign="top"><table width="597" border="1" cellspacing="0">
      <tr>
        <th colspan="4" scope="col" bgcolor="#0099FF">Display Heading 1</th>
        <th scope="col" bgcolor="#0099FF">Display Heading 2</th>
      <tr>
        <th width="9%" height="23" bgcolor="#0099FF"><em>Column1 Heading</em></th>
        <th width="9%" bgcolor="#0099FF"><em><strong>Column2 Heading</strong></em></th>
        <th width="30%" bgcolor="#0099FF"><em><strong>Column3 Heading</strong></em></th>
        <th width="26%" bgcolor="#0099FF"><em><strong>Column4 Heading</strong></em></th>
        <th width="26%" bgcolor="#0099FF">&nbsp;</th>
      </tr>
    </table><div id="div_id"></div>
    </td>
  </tr>
</table>

JavaScript (js) page

// JavaScript Document
 
var xmlHttp
 
function show(str)
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="primaryasppage.asp";
url=url+"?variable="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("get",url,true);
xmlHttp.send(null);
}
 
function stateChanged()
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("div_id").innerHTML=xmlHttp.responseText;
}
}
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

Here is the secondary asp page code.

<% 
Set rs = Server.CreateObject("ADODB.Recordset")
        rs.ActiveConnection = "dsn=dsn;uid=user;pwd=pwd;database=db;"
        rs.CursorType = 0
        rs.CursorLocation = 3
        rs.LockType = 1
        rs.Source = ("Stored Procedure @SQLVariable= '" & request.QueryString("variable") & "'")
        rs.Open()
 %>
<% while not rs.eof%>
<% response.Write("<tr>") %>
<% response.Write("<td>") %><%= rs("column1") %><% response.Write("</td><td>")%><%= rs("column2") %><% response.Write("</td><td>")%><%= rs("column3") %> <% response.Write("</td><td>")%><%= rs("column4") %><% response.Write("</td><td> &nbsp; </td>")%>
<% response.Write("</tr>") %>
<% rs.movenext %>
<%wend%>

Thanks.

[markrawlingson]

This can happen if there's a problem with the AJAX response, like a 404 or an error within the ASP script you're trying to call.

In the below code

function stateChanged() {
   if (xmlHttp.readyState==4) {
      document.getElementById("div_id").innerHTML=xmlHttp.responseText;
   }
}
 

You should put in some error handling..

   function stateChanged() {
      if (xmlHttp.readyState==4) {
         document.getElementById("div_id").innerHTML=xmlHttp.responseText;
      } else if(xmlHttp.readyState == 4 && xmlHttp.status != 200) {
         document.getElementById("div_id").innerHTML= 'ERROR! See Below! <br /><br />' + xmlHttp.responseText;
      }
 

So if the page throws a 404, for instance, the div layer will be filled in with something like page cannot be displayed. If it's a scripting error in the page you're trying to call, the div will be filled in with the vbscript error information. Once you get this, if you still can't figure it out.. write back with the error and we'll take it from there :)
Sincerely,
Mark

[DrBunchman]

Another possibility is that the contents of your second page is not displaying because the recordset you create there is not returning any rows.

Have you tried replacing the contents of your secondary page with a simple

<% Response.Write( "variable=" & Request.QuerySt ring("variable" )) %>

to make sure that your data is being passed correctly and to test whether your AJAX call is working at all?

I'd definitely put in the error trapping as Mark said because, although I've tested your script and it worked correctly for me, different browsers handle AJAX differently.

Let us know how you get on.

Dr B

[srkidd12]

This can happen if there's a problem with the AJAX response, like a 404 or an error within the ASP script you're trying to call.

In the below code

function stateChanged() {
   if (xmlHttp.readyState==4) {
      document.getElementById("div_id").innerHTML=xmlHttp.responseText;
   }
}
 

You should put in some error handling..

   function stateChanged() {
      if (xmlHttp.readyState==4) {
         document.getElementById("div_id").innerHTML=xmlHttp.responseText;
      } else if(xmlHttp.readyState == 4 && xmlHttp.status != 200) {
         document.getElementById("div_id").innerHTML= 'ERROR! See Below! <br /><br />' + xmlHttp.responseText;
      }
 

So if the page throws a 404, for instance, the div layer will be filled in with something like page cannot be displayed. If it's a scripting error in the page you're trying to call, the div will be filled in with the vbscript error information. Once you get this, if you still can't figure it out.. write back with the error and we'll take it from there :)
Sincerely,
Mark

No. I'm not get any errors, I'm not getting anything at all in the div.

Should the listbox read like this?
[code]
"><form id="form3" name="form3" method="get">
<select name="selectlis t" size="10" id="list"onfocu s="show(<%=rsS( "ID")%>)">
<%while not rsS.eof%>
<option id="<%=rsS("ID" )%>"><%= rsS("Name") %></option>
<% rsS.movenext
wend%>
</select>
</form>
[code]

[srkidd12]

Thank you to both of you for your help. I did get it to work and it works beautifully now. I managed to fool with it and found out that I did not have the some things done correctly, like using the value of the listbox option instead of the id for it and I changed the div to a span. Thanks again.