Asynchronous JavaScript question.

[Babillon]

I'm building a page and plan on using some Asynchronous JavaScript (AJAX without the XML basically). Anywho, the problem is, it just doesn't seem to work at all.

I've slowly worked my way through the code and I can't figure out for the life of me why it's just not working. I've tried using alert() to show my progress through the script, but it won't even show the first alert() which I had put before the function even creates it's first variable. I remove the code and leave only the alert() and it pops up.

Here is the JavaScript code is question:
function ajaxLauncher()
{
var args = ajaxLauncher.arguments;
var httpRequest = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHTTPRequest();

switch (args[0])
{
case "begin_exe"
{
alert("Working!");
setContent();
ajaxLauncher("show_content", "mainContent[0]", "content");
break;
}
case "show_content"
{
if (httpRequest)
{
httpRequest.onreadystatechange = function()
{
if (httpRequest.readyState == 4 && httpRequest.Status == 200)
{
container = document.getElementByID(args[2]);
container.innerHTML = httpRequest.responseText;
}
}
httpRequest.open("GET", args[1], true);
httpRequest.send(null);
}
break;
}
}
}

function setContent()
{
mainContent = new Array();
mainContent[0] = "index2.html";
}

I'm calling it on my page's onload event.

Any help would be very much appreciated.

 

[jemminger]

two errors:

1. XMLHTTPRequest should be XMLHttpRequest
2. switch() syntax is

switch(condition) {
case:
statements;
break;
}

not

switch(condition) {
case {
statements;
break;
}
}

function ajaxLauncher()
{
  var args = ajaxLauncher.arguments;
  var httpRequest = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

  switch (args[0])
  {
    case "begin_exe":
      alert("Working!");
      setContent();
      ajaxLauncher("show_content", "mainContent[0]", "content");
      break;
    
    case "show_content":
      if (httpRequest)
      {
        httpRequest.onreadystatechange = function()
        {
          if (httpRequest.readyState == 4 && httpRequest.Status == 200)
          {
            container = document.getElementByID(args[2]);
            container.innerHTML = httpRequest.responseText;
          }
        }
        httpRequest.open("GET", args[1], true);
        httpRequest.send(null);
      }
      break;
    
  }
}

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

 

[Babillon]

Many thanks for the pointing out the obvious flaws. Goes to show how much a second set of eyes can help...


However, I seem to have another flaw... I have the alert()s working now, and I keep getting the alert() in the function() { .... } section repeating, over and over again, and then not showing the alert before or after the innerHTML assignment... I'm trying to put a .html file into that section, but it almost seems as if the IF statement is failing...

Any clues?

 

[Babillon]

Ah. Scratch that above post, I figured out what it was, yet another case of me not noticing something.

However, my new problem is odd...


{
alert(httpRequest.readyState);
container = document.getElementByID(args[2]);
container.innerHTML = httpRequest.responseText;
alert("Where is it?");
}



Here's where the problem rests... I get the alert(httpRequest.readyState) however, nothing else happens.

I've tried having the tag to be used by the getElementByID section as either a table or a div, but niether seems to work. I don't get to see the alert("Where is it?"); prompt either.

At first I was trying with a full HTML page, one which would show up properly in any browser, then I tried it with only the content of the body tags, but still no luck.

I'm stumped.

 

[jemminger]

try
alert( httpRequest.responseText );

to see what it contains


-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

 

[Babillon]

Okay, I did that, and lo and behold, it's giving me what I want to see, but it's only inside of the alert.. I tried changing the innerHTML section to innerHTML = "<p>HI!</p>";

But I still got nothing, still no final alert() popping up.

I'll post the HTML file that's calling the java.

<html>
<head>
<!--
Created by: Babillon.NET and PhatJesus.com
Created on: November 10th, 2005
Created with: syn and CFStudio
-->
<script type="text/JavaScript" src="clientside.js">
</script>
<script type="text/JavaScript" src="ajax.js">
</script>
<title>
Babbling Jesus!
</title>
<link rel="stylesheet" href="data/sheet1.css" type="text/css" />
</head>
<body onload="ajaxLauncher('begin_exe', 'index2.html', 'content')">
<table style="width:100%;height:80px" cellpadding=0 cellspacing=0 border=0>
<tr>
<td style="width:250px;background-images:url(images/ttl.png)">
<img src="images/ttl.png" alt="Babling Jesus.com" />
</td>
<td class="top2">
<img src="images/spacer.gif" alt="Don't Judge Me" width="350px" height="1px" />
</td>
<td style="width:37px;background-image:url(images/top.png)">
<img src="images/top.png" alt="/" />
</td>
<td style="width:100%;background-color:#17235D">
</td>
</tr>
</table>
<table style="width:100%;height:25px" cellpadding=0 cellspacing=0 border=0>
<tr>
<td class="btm" style="width:600px;">
<table style="height:25px;width:600px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<a href="">Home</a>
</td>
<td style="background-color:#17235D;width:1">
</td>
<td>
<a href="">News</a>
</td>
<td style="background-color:#17235D;width:1">
</td>
<td>
<a href="">Store</a>
</td>
<td style="background-color:#17235D;width:1">
</td>
<td>
<a href="">Store</a>
</td>
<td style="background-color:#17235D;width:1">
</td>
<td>
<a href="">Babillon.NET</a>
</td>
<td style="background-color:#17235D;width:1">
</td>
<td>
<a href="">PhatJesus</a>
</td>
<td style="background-color:#17235D;width:1">
</td>
<td>
<a class="fakelink"><div onClick="showHide('login'); httpGetPage('index2.html')">Log In</div></a>
</td>
</tr>
</table>
</td>
<td style="width:37px;background-image:url(images/top.png)">
<img src="images/btm.png" alt="/" />
</td>
<td style="width:100%;background-color:#17235D">
</td>
</tr>
</table>
<div class="login" id="login" name="login">
<table>
<tr>
<td>
Username:
<input type="text" id="username" />
</td>
<td>
Password:
<input type="password" id="password" />
</td>
<td>
<input type="button" onClick="showHide('login');" value="Submit" />
</td>
</tr>
</table>
</div>
<table class="btm" id="tester" name="tester">
<tr>
<td id="tdtester" name="tdtester">
Test!
</td>
</tr>
</table>
<div class="btm" id="contentstuff">
</div>
</body>
</html>


Sorry for it being so big. So it's been narrowed down to the section of code I'm using to actually show the piece of information picked from the server, but for some reason it's just not showing it.

 

[tsuji]

[1]
>...I get the alert(httpRequest.readyState) however, nothing else happens
>[tt]{
> alert(httpRequest.readyState);
> container = document.getElementByID(args[2]);
> container.innerHTML = httpRequest.responseText;
> alert("Where is it?");
> }[/tt]
Change the line per case-sensitivity.
[tt]container = document.getElementBy[red]Id[/red](args[2]);[/tt]

[2]
>[tt]ajaxLauncher("show_content", "mainContent[0]", "content");[/tt]
[tt]ajaxLauncher("show_content", "mainContent[0]", "content[red]stuff[/red]");[/tt]

 

[tsuji]

Amendment
[2a]
>[tt]ajaxLauncher("show_content", "mainContent[0]", "content");[/tt]
[tt]ajaxLauncher("show_content", [highlight]m[/highlight]ainContent[0[highlight]][/highlight], "content[red]stuff[/red]");[/tt]

 

[Babillon]

Okay, with those changes, I now get the alert saying it's made it past the innerHTML section, but I still don't get anything to show up.

function ajaxLauncher()
{
var args = ajaxLauncher.arguments;
var httpRequest = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

switch (args[0])
{
case "begin_exe":
alert("Working!");
setContent();
ajaxLauncher("show_content", mainContent[0], "contentstuff");
break;

case "show_content":
if (httpRequest)
{
alert("Still working!");
httpRequest.onreadystatechange = function()
{
alert("Hewwo?");
if (httpRequest.readyState == 4 && httpRequest.status == 200)
{
alert(httpRequest.readyState);
alert(httpRequest.responseText);
document.getElementById(args[2]).innerText = httpRequest.responseText;
alert("Where is it?");
}
}
alert("We here yet?");
httpRequest.open("GET", args[1], true);
httpRequest.send(null);
alert("Okay, request sent..");
}
break;
}
}

function setContent()
{
mainContent = new Array();
mainContent[0] = "content.txt";
}



It'll completely pass the code to put the retrieved text into the div tag I have. I have to be doing something else wrong in there, but I can't figure out what...

 

[steven290]

this might be th problem

document.getElementById(args[2]).innerText = httpRequest.responseText;

try

document.getElementById(args[2]).innerHTML = httpRequest.responseText;

also have you considered using prototype/scriptaculous for the ajax it would saving coding/time

 

[tsuji]

You have changed the original to this.
>[tt]document.getElementById(args[2]).innerText = httpRequest.responseText;[/tt]
It is better to keep it to innerHTML.
[tt]document.getElementById(args[2]).inner[blue]HTML[/tt] = httpRequest.responseText;[/tt]
if you want to show thing in ff/nn too.

If it does not show anything, it is most probably your "context.txt" does not exist? or something. Let say put it more radically.
[tt]
function setContent()
{
mainContent = new Array();
//mainContent[0] = "content.txt";
[blue]mainContent[0]="

http://www.google.com";

[/blue]
}
[/tt]
I get sensible thing out.

As an aside, your recurent call the ajaxLaunch() seems unnecessarily playing clever. It really is not a generic need.

 

[tsuji]

Also I forget to bring this issue up too. If you are doing the test on local file system (content.txt), you have to take out the conditional.
>[tt] if (httpRequest.readyState == 4 && httpRequest.status == 200)[/tt]
and relax it a bit temporarily:
[tt] if (httpRequest.readyState == 4 && (httpRequest.status == 200 || httpRequest.status == 0))[/tt]
to accommodate this environment.

 

[Babillon]

A-ha! It works now, thank you very much for your help.

Changing from innerText to innerHTML makes everything show up perfectly, many thanks indeed!

I need to work on making sure to notice stupid little mistakes.

 

[BabyJeffy]

Just as an aside... Opera 6.x (Windows) doesn't support innerHTML. But pretty much everything else does support it (Opera since 7.0, IE since v4, NN since 6.0, FF, Safari etc).

One day someone is going to post a problem they are having with innerHTML and they'll be using Opera 6 - and I'll be able to point them to this thread

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094