asked on

document.getElementById(DivId).innerHTML = AJAX.responseText

I am trying to buid a preloader for an ASP page.The submit button on the asp page has on the onclick event a function which is called the function is :
<script>
function ajaxRequest(url,DivId)
{
var AJAX;
try
{
AJAX = new XMLHttpRequest();
}
catch(e)
{
try
{
AJAX = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
AJAX = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX.");
return false;
}
}
}
AJAX.onreadystatechange = function()
{
if(AJAX.readyState == 4)
{
if(AJAX.status == 200)
{
document.getElementById(DivId).innerHTML = AJAX.responseText;
}
else
{
alert("Error: "+ AJAX.statusText +" "+ AJAX.status);
}
hideLoadingPanel();
}
else
{
displayLoadingPanel();
}
}
AJAX.open("get", "Sub_Report_Packing_Lines.asp", true);
AJAX.send(null);
}
</script>

When I click the button the preloader gif loads but it freezez then windows comes up with an error saying error:'document.getElementById( ).Null or not an object.If I click on the error window saying I don't want to debug the gif stays up in a "freezed" state untill the page loads.then the other asp page I called with the submit button loads all right.The amount of time the preloader stays on is perfect as if I buid a query from the original page which will go through a small amount of data preloader stay on for short time.If the amount of data is larger than the preloader stay on for longer accordingly.
This shows me that the code is working all right at some sort of level but I don't understand why I get the div error.What is that div used for anyway to show the output of the function?
If yes do I have to define it and if yes where?Please help I am so close .

This is the whole html part of the asp page where the button is 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Start_Report</title>
<script>
function ajaxRequest(url,DivId)
{
var AJAX;
try
{
AJAX = new XMLHttpRequest();
}
catch(e)
{
try
{
AJAX = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
AJAX = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX.");
return false;
}
}
}
AJAX.onreadystatechange = function()
{
if(AJAX.readyState == 4)
{
if(AJAX.status == 200)
{
document.getElementById(DivId).innerHTML = AJAX.responseText;
}
else
{
alert("Error: "+ AJAX.statusText +" "+ AJAX.status);
}
hideLoadingPanel();
}
else
{
displayLoadingPanel();
}
}
AJAX.open("get", "Sub_Report_Packing_Lines.asp", true);
AJAX.send(null);
}
</script>
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(duration=.5)">
<script src="Scripts/RoundedCornersPanel/RoundedCornersPanel.js" type="text/javascript"></script>
<script src="Scripts/Web20AJAXLoadingPanel/Scripts/Web20AJAXLoadingPanel.js" type="text/javascript"></script>
<meta content="CodeCharge Studio 3.2.0.4" name="GENERATOR">
<script language="JavaScript" type="text/javascript">
 
//Begin CCS script
//Include Common JSFunctions @1-5C08C693
</script>
<script language="JavaScript" src="ClientI18N.asp?file=Functions.js&amp;locale={res:CCS_LocaleID}" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript" src="ClientI18N.asp?file=DatePicker.js&amp;locale={res:CCS_LocaleID}" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript">
//End Include Common JSFunctions
 
//Include User Scripts @1-5EED8E1E
</script>
<script language="JavaScript" src="js/menu/ADxMenu.js" type="text/javascript"></script>
<link href="Styles/adx.css" type="text/css" rel="stylesheet">
<link href="Styles/Flamenco1/Menu.css" type="text/css" rel="stylesheet">
<script language="JavaScript" type="text/javascript">
//End Include User Scripts
 
//Date Picker Object Definitions @1-179FCDD0
 
var Grid2_DatePicker_s_Start_Start1 = new Object(); 
Grid2_DatePicker_s_Start_Start1.format           = "yyyy/mm/dd hh:nn:ss";
Grid2_DatePicker_s_Start_Start1.style            = "Styles/Flamenco1/Style.css";
Grid2_DatePicker_s_Start_Start1.relativePathPart = "";
Grid2_DatePicker_s_Start_Start1.themeVersion = "3.0";
 
var Grid2_DatePicker_s_Start_Stop1 = new Object(); 
Grid2_DatePicker_s_Start_Stop1.format           = "yyyy/mm/dd hh:nn:ss";
Grid2_DatePicker_s_Start_Stop1.style            = "Styles/Flamenco1/Style.css";
Grid2_DatePicker_s_Start_Stop1.relativePathPart = "";
Grid2_DatePicker_s_Start_Stop1.themeVersion = "3.0";
 
//End Date Picker Object Definitions
 
//_OnLoad @1-2F43613D
 
function _OnLoad()
{
    var result;
//End _OnLoad
 
//Close _OnLoad @1-BC33A33A
    return result;
}
//End Close _OnLoad
 
//bind_events @1-C6C5CA6C
function bind_events() {
    addEventHandler("Menu1Container", "load", load_ADxMenu);
    addEventHandler("", "load", _OnLoad);
}
//End bind_events
 
window.onload = bind_events; //Assign bind_events @1-19F7B649
 
//End CCS script
</script>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="Styles/{CCS_Style}/Style_ie6.css"><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="Styles/{CCS_Style}/Style_Components_ie6.css"><![endif]-->
<link media="screen, tv, projection" href="Styles/adx.css" type="text/css" rel="stylesheet">
<script src="js/menu/ADxMenu.js" type="text/javascript"></script>
<link media="screen, tv, projection" href="Styles/Flamenco1/Menu.css" type="text/css" rel="stylesheet">
<link href="Styles/Flamenco1/Style_doctype.css" type="text/css" rel="stylesheet">
</head>
<body id="DivId">
&nbsp;&nbsp;&nbsp; 
<div id="DivId">
</div>
<table align="left" border="0">
  <tr>
    <td>
      <!-- BEGIN Menu Menu1 -->
      <div class="MenuStyle" id="Menu1Container">
        <ul class="adxm {Menu1:MenuType} level1">
          <!-- BEGIN Item -->
          <!-- BEGIN OpenLevel -->
          <ul class="level{Menu1:Item_Level}">
            <!-- END OpenLevel -->
            <li {Menu1:DefaultItem}><a href="{ItemLink_Src}" class="{Menu1:Submenu}" target="{Menu1:Target}" title="{Menu1:Title}">{ItemLink}</a> 
            <!-- BEGIN CloseItem --></li>
 <!-- END CloseItem -->
            <!-- BEGIN CloseLevel -->
          </ul>
 </li>
 <!-- END CloseLevel --><!-- END Item -->
        </ul>
 
      </div>
      <!-- END Menu Menu1 --></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>
<hr style="COLOR: #ff6600" size="2">
<p></p>
<table align="center" border="0">
  <tr>
    <td>&nbsp;</td> 
    <td>
      <!-- BEGIN Record Grid2 -->
      <form name="{HTMLFormName}" action="{Action}" method="post">
        <h2>Generate Report&nbsp;All Lines</h2>
 
        <table>
          <!-- BEGIN Error -->
          <tr>
            <td colspan="2">{Error}</td>
          </tr>
          <!-- END Error -->
          <tr>
            <td><label for="Grid2s_Start_Start">StartDate:</label></td> 
            <td><input id="Grid2s_Start_Start" style="WIDTH: 168px; HEIGHT: 22px" maxlength="100" size="18" value="{s_Start_Start}" name="{s_Start_Start_Name}">
              <!-- BEGIN DatePicker DatePicker_s_Start_Start1 --><a href="javascript:showDatePicker('{Name}','{FormName}','{DateControl}');" id="Grid2DatePicker_s_Start_Start1"><img id="Grid2DatePicker_s_Start_Start1_Image" alt="Show Date Picker" src="Styles/Flamenco1/Images/DatePicker.gif" border="0"></a>&nbsp;&nbsp;<!-- END DatePicker DatePicker_s_Start_Start1 --></td>
          </tr>
 
          <tr>
            <td>Stop Date:</td> 
            <td><input id="Grid2s_Start_Stop" style="WIDTH: 168px; HEIGHT: 22px" size="22" value="{s_Start_Stop}" name="{s_Start_Stop_Name}">
              <!-- BEGIN DatePicker DatePicker_s_Start_Stop1 --><a href="javascript:showDatePicker('{Name}','{FormName}','{DateControl}');" id="Grid2DatePicker_s_Start_Stop1"><img id="Grid2DatePicker_s_Start_Stop1_Image" alt="Show Date Picker" src="Styles/Flamenco1/Images/DatePicker.gif" border="0"></a>&nbsp;&nbsp;<!-- END DatePicker DatePicker_s_Start_Stop1 --></td>
          </tr>
 
          <tr>
            <td><label for="Grid2Grid2Order">Sort by</label></td> 
            <td>
              <select id="Grid2Grid2Order" name="Grid2Order">
                {Grid2Order_Options}
              </select>
 <label for="Grid2Grid2Dir" style="display: none;">{res:CCS_SortDir}</label> 
              <select id="Grid2Grid2Dir" name="Grid2Dir">
                {Grid2Dir_Options}
              </select>
 </td>
          </tr>
 
          <tr>
            <td><label for="Grid2Grid2PageSize">Records per page</label></td> 
            <td>
              <select id="Grid2Grid2PageSize" name="{Grid2PageSize_Name}">
                {Grid2PageSize_Options}
              </select>
 </td>
          </tr>
 
          <tr>
            <td align="right" colspan="2">
              <!-- BEGIN Button Button_DoSearch --><input id="Grid2Button_DoSearch" onclick="ajaxRequest()" type="submit" alt="Search" value="Search" name="{Button_Name}"><!-- END Button Button_DoSearch --></td>
          </tr>
        </table>
      </form>
      &nbsp;&nbsp;<!-- END Record Grid2 -->&nbsp;&nbsp;</td>
  </tr>
</table>
<br>
<hr style="COLOR: #ff6600" size="2">
</body>
</html>

Open in new window

Member_2_4913559

It doesn't appear you are sending in the proper parameters for your function

function ajaxRequest(url,DivId)

onclick="ajaxRequest()

When the function tries to call document.getElementById() it returns Null:
document.getElementById(DivId).innerHTML = AJAX.responseText;

I dont know what div you want to post to or the url you are requestion from but if you supply those parameters I think it might work.

dday

Latzi_Marian

ASKER

I don't really want to pass any parameter in between the pages.All I want is when I click the submit button to have the loading *..gif showing in the middle of the screen as it does now and when the submit button href is loaded make the *.gif dissapear and show the page which is finished loading.
As I said it's all working except I have the document.getElementById() it returns Null error and I have to push the do not debug button on the error popup to get it working.If I push the submit button the error message comes up let's say 1 second later I get rid of it but the gif will stay up untill the page is loaded then it will dissapear as it should .So that bit is ok.As I said this is not my league (Ajax & Javascript) so I don't really know what that div is all about .Why do I need it in the first place?

Member_2_4913559

Check out lines 38-40 in your code snippet.

status == 200 is going to indicate a successful response. It wants to place the returned response into a div. This div is selected on line 40. Since you have a div with id="DivId" on the page you can change the javascript to try to place the ajax response there. You were pretty close just needing to add quotes on the line:

document.getElementById('DivId').innerHTML = AJAX.responseText;

This should get rid of the Null Error.

I'm sorry I thought from the complexity of the code, and the way you phrased your question that you would be able to have success if I just found the bug and pointed it out to you. I hope this helps.

dday

Member_2_4913559

PS:

lines 125-127:
<body id="DivId">
   
<div id="DivId">

Both your body and the div here have the same ID. This will cause an error as well. Pick the location you would like the ajax response to be placed into and keep the id="DivId" there. Any other elements on the page that have this id need to have their id changed to something unique.

dday

ASKER CERTIFIED SOLUTION

Member_2_4913559

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Latzi_Marian

ASKER

Hi,

I've got the code working by making line 46 from my code the same with line 50.So in other words I use only displayLoadingPanel().This is because the something strange happens when I call the asp page for the ajax code the state is ready when the grid from the result page comes up.But at that stage the grid is still empty.No data in it just the frame of the grid.so the empty grid shows up in the div but the panel is gone so the page shows an empty grid untill the data comes up but at that stage the stae changes again I suppose so I fixed this by using the dispalyLodingPanel() twice and I did hide the div as well by saying document.getElementById(DivId).style.display = "none"; .It works perfectly with Firefox and Opera but with IE and Safari the Ajax loading panel loads ok but the GIF ANIMATION DOESN'T PLAY!!!
This I knew from the very start that it won't be an easy job.I just don't know why IE doesn't play the .gif from the Ajax panel.
Firefox is perfect.I did upgrade ie to v 8 to v7 and still the same problem.
Have you got any ideea what to do next.Should I try to somehow "force" the gif to refresh or something with a Java fucntion?What do you think.I can leave it as it is as it's working but the Ajax panel shows a static image.It would be nicer to show the playing Gif.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Start_Report</title>
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(duration=.5)">
<script src="Scripts/RoundedCornersPanel/RoundedCornersPanel.js" type="text/javascript"></script>
<script src="Scripts/Web20AJAXLoadingPanel/Scripts/Web20AJAXLoadingPanel.js" type="text/javascript"></script>
<meta content="CodeCharge Studio 3.2.0.4" name="GENERATOR">
<script language="JavaScript" type="text/javascript">
 
//Begin CCS script
//Include Common JSFunctions @1-5C08C693
</script>
<script language="JavaScript" src="ClientI18N.asp?file=Functions.js&amp;locale={res:CCS_LocaleID}" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript" src="ClientI18N.asp?file=DatePicker.js&amp;locale={res:CCS_LocaleID}" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript">
//End Include Common JSFunctions
 
//Include User Scripts @1-5EED8E1E
</script>
<script language="JavaScript" src="js/menu/ADxMenu.js" type="text/javascript"></script>
<link href="Styles/adx.css" type="text/css" rel="stylesheet">
<link href="Styles/Flamenco1/Menu.css" type="text/css" rel="stylesheet">
<script language="JavaScript" type="text/javascript">
//End Include User Scripts
 
//Date Picker Object Definitions @1-179FCDD0
 
var Grid2_DatePicker_s_Start_Start1 = new Object(); 
Grid2_DatePicker_s_Start_Start1.format           = "yyyy/mm/dd hh:nn:ss";
Grid2_DatePicker_s_Start_Start1.style            = "Styles/Flamenco1/Style.css";
Grid2_DatePicker_s_Start_Start1.relativePathPart = "";
Grid2_DatePicker_s_Start_Start1.themeVersion = "3.0";
 
var Grid2_DatePicker_s_Start_Stop1 = new Object(); 
Grid2_DatePicker_s_Start_Stop1.format           = "yyyy/mm/dd hh:nn:ss";
Grid2_DatePicker_s_Start_Stop1.style            = "Styles/Flamenco1/Style.css";
Grid2_DatePicker_s_Start_Stop1.relativePathPart = "";
Grid2_DatePicker_s_Start_Stop1.themeVersion = "3.0";
 
//End Date Picker Object Definitions
 
//_OnLoad @1-2F43613D
 
function _OnLoad()
{
    var result;
//End _OnLoad
 
//Close _OnLoad @1-BC33A33A
    return result;
}
//End Close _OnLoad
 
//bind_events @1-C6C5CA6C
function bind_events() {
    addEventHandler("Menu1Container", "load", load_ADxMenu);
    addEventHandler("", "load", _OnLoad);
}
//End bind_events
 
window.onload = bind_events; //Assign bind_events @1-19F7B649
 
//End CCS script
</script>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="Styles/{CCS_Style}/Style_ie6.css"><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="Styles/{CCS_Style}/Style_Components_ie6.css"><![endif]-->
<link media="screen, tv, projection" href="Styles/adx.css" type="text/css" rel="stylesheet">
<script src="js/menu/ADxMenu.js" type="text/javascript"></script>
<link media="screen, tv, projection" href="Styles/Flamenco1/Menu.css" type="text/css" rel="stylesheet">
<link href="Styles/Flamenco1/Style_doctype.css" type="text/css" rel="stylesheet">
</head>
<body>
&nbsp;&nbsp;&nbsp; 
<div id="DivId">
  <script>
function ajaxRequest(url,DivId)
{
var AJAX;
try
{
AJAX = new XMLHttpRequest();
}
catch(e)
{
try
{
AJAX = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
AJAX = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX.");
return false;
}
}
}
AJAX.onreadystatechange = function()
{
if(AJAX.readyState == 4)
{
if(AJAX.status == 200)
{
document.getElementById("DivId").style.display="none";
}
else
{
alert("Error: "+ AJAX.statusText +" "+ AJAX.status);
}
//hideLoadingPanel()
displayLoadingPanel();
}
else
{
//hideLoadingPanel();
displayLoadingPanel();
}
}
AJAX.open("get", "http://localhost/GF_Data_Reporting/Sub_Report_Packing_Lines.asp", true);
AJAX.send(null);
}
</script>
</div>
<table align="left" border="0">
  <tr>
    <td>
      <!-- BEGIN Menu Menu1 -->
      <div class="MenuStyle" id="Menu1Container">
        <ul class="adxm {Menu1:MenuType} level1">
          <!-- BEGIN Item -->
          <!-- BEGIN OpenLevel -->
          <ul class="level{Menu1:Item_Level}">
            <!-- END OpenLevel -->
            <li {Menu1:DefaultItem}><a href="{ItemLink_Src}" class="{Menu1:Submenu}" target="{Menu1:Target}" title="{Menu1:Title}">{ItemLink}</a> 
            <!-- BEGIN CloseItem --></li>
 <!-- END CloseItem -->
            <!-- BEGIN CloseLevel -->
          </ul>
 </li>
 <!-- END CloseLevel --><!-- END Item -->
        </ul>
 
      </div>
      <!-- END Menu Menu1 --></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>
<hr style="COLOR: #ff6600" size="2">
<p></p>
<table align="center" border="0">
  <tr>
    <td>&nbsp;</td> 
    <td>
      <!-- BEGIN Record Grid2 -->
      <form name="{HTMLFormName}" action="{Action}" method="post">
        <h2>Generate Report&nbsp;All Lines</h2>
 
        <table>
          <!-- BEGIN Error -->
          <tr>
            <td colspan="2">{Error}</td>
          </tr>
          <!-- END Error -->
          <tr>
            <td><label for="Grid2s_Start_Start">StartDate:</label></td> 
            <td><input id="Grid2s_Start_Start" style="WIDTH: 168px; HEIGHT: 22px" maxlength="100" size="18" value="{s_Start_Start}" name="{s_Start_Start_Name}">
              <!-- BEGIN DatePicker DatePicker_s_Start_Start1 --><a href="javascript:showDatePicker('{Name}','{FormName}','{DateControl}');" id="Grid2DatePicker_s_Start_Start1"><img id="Grid2DatePicker_s_Start_Start1_Image" alt="Show Date Picker" src="Styles/Flamenco1/Images/DatePicker.gif" border="0"></a>&nbsp;&nbsp;<!-- END DatePicker DatePicker_s_Start_Start1 --></td>
          </tr>
 
          <tr>
            <td>Stop Date:</td> 
            <td><input id="Grid2s_Start_Stop" style="WIDTH: 168px; HEIGHT: 22px" size="22" value="{s_Start_Stop}" name="{s_Start_Stop_Name}">
              <!-- BEGIN DatePicker DatePicker_s_Start_Stop1 --><a href="javascript:showDatePicker('{Name}','{FormName}','{DateControl}');" id="Grid2DatePicker_s_Start_Stop1"><img id="Grid2DatePicker_s_Start_Stop1_Image" alt="Show Date Picker" src="Styles/Flamenco1/Images/DatePicker.gif" border="0"></a>&nbsp;&nbsp;<!-- END DatePicker DatePicker_s_Start_Stop1 --></td>
          </tr>
 
          <tr>
            <td><label for="Grid2Grid2Order">Sort by</label></td> 
            <td>
              <select id="Grid2Grid2Order" name="Grid2Order">
                {Grid2Order_Options}
              </select>
 <label for="Grid2Grid2Dir" style="display: none;">{res:CCS_SortDir}</label> 
              <select id="Grid2Grid2Dir" name="Grid2Dir">
                {Grid2Dir_Options}
              </select>
 </td>
          </tr>
 
          <tr>
            <td><label for="Grid2Grid2PageSize">Records per page</label></td> 
            <td>
              <select id="Grid2Grid2PageSize" name="{Grid2PageSize_Name}">
                {Grid2PageSize_Options}
              </select>
 </td>
          </tr>
 
          <tr>
            <td align="right" colspan="2">
              <!-- BEGIN Button Button_DoSearch --><input id="Grid2Button_DoSearch" onclick="ajaxRequest()" type="submit" alt="Search" value="Search" name="{Button_Name}"><!-- END Button Button_DoSearch --></td>
          </tr>
        </table>
      </form>
      &nbsp;&nbsp;<!-- END Record Grid2 -->&nbsp;&nbsp;</td>
  </tr>
</table>
<br>
<hr style="COLOR: #ff6600" size="2">
</body>
</html>

Open in new window

Latzi_Marian

ASKER

I meant to say "I've got the code working by making line 117 from my code the same with line 122. on the above posted code.

Latzi_Marian

ASKER

Helped me to sort out the problem.Thank you.