File-read Into Div Through Ajax. I’m Missing Something Small I Think!

[rmpotter]

Hello. I'm doing something very simple, and yet it's not working.. maybe I'm missing something.I need to read a text file, through ajax, and into a div. I can easily write to the file through ajax, but not read. Here is what I have:

function ajaxLoader(url){if(document.getElementById){var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : newXMLHttpRequest();}if(x)	{x.onreadystatechange = function() 		{if(x.readyState == 4 && x.status == 200) 				{						el = document.getElementById('content');						el.innerHTML = x.responseText;				}		}x.open("GET",url, true);x.send(null);}}

<a class="blocklink" href="#" id="readg" onclick="ajaxLoader('guestBook.txt');return false;">Read The Guestbook</a></p>

<div id="content" style="width:600px;">

I've been stuck on this all day. I am able to use all of the same code, and output a regular html file to the div, but not this .txt file. The txt file has all of the read write privileges it needs. At one point, I also changed the ajax to open a normal html page into the div, instead of a txt file, and it worked as it should. So my problem seems to be opening the text file itself...

[justsomeguy]

Are you getting any Javascript errors? If you run this in Firebug and check the request and response headers, what do you see there? It may be a good idea to use console.log to send the XHR object to Firebug after the request finishes so that you can look through the properties and see if the content is somewhere other than the responseText property. The text file is probably being served as text/plain, where a web page would be text/html. That may influence where the content goes in the XHR object.

[jeffman]

x is your AJAX object. For the onreadystatechange function to work, x needs to be global, not local to ajaxLoader(). If it's local, x is destroyed when ajaxLoader terminates, which means your onreadystatechange function is destroyed. In other words, there is no object and no function to receive the data when it comes.I am aware that tutorials out there show the AJAX object declared as local. But when you examine the code in their demonstrations, you'll see that they keep the AJAX object global, not local. Drives me nuts.Do you have a closing </div> tag for <div id="content" style="width:600px;"> ?

[justsomeguy]

That will actually work, that's a closure. Since it defines the function and the function refers to the variable, it won't destroy the variable after ajaxLoader ends. Of course, it may cause a small memory leak.

function test(){  var x = 'some text';  setTimeout(function()  {	alert(x);  }, 1000);}

That will show the value of that variable in the function when it executes. Since the function and the variable are both defined in the same scope, the variable exists in the scope of the new function also.

[rmpotter]

x is your AJAX object. For the onreadystatechange function to work, x needs to be global, not local to ajaxLoader(). If it's local, x is destroyed when ajaxLoader terminates, which means your onreadystatechange function is destroyed. In other words, there is no object and no function to receive the data when it comes.I am aware that tutorials out there show the AJAX object declared as local. But when you examine the code in their demonstrations, you'll see that they keep the AJAX object global, not local. Drives me nuts.Do you have a closing </div> tag for <div id="content" style="width:600px;"> ?

So I changed the x variable to global, and it still didn't work :)Also, yes, I do end the div. I thought this was gonna be easy. I just want to view a text file in the damn div. The content of the text file is enclosed with the <pre></pre> tag.

[rmpotter]

Are you getting any Javascript errors? If you run this in Firebug and check the request and response headers, what do you see there? It may be a good idea to use console.log to send the XHR object to Firebug after the request finishes so that you can look through the properties and see if the content is somewhere other than the responseText property. The text file is probably being served as text/plain, where a web page would be text/html. That may influence where the content goes in the XHR object.

I don't seem to be getting any javascript errors.The firebug tells me the headers contain: text/plain.I'm not sure where to check the responseText property though.

[rmpotter]

Oh, I forgot to mention, the response is empty for the link that calls the ajax... In fact, I will give you the URL for the site.Keep in mind, this is a dumbed down site, so I can practice little things on... and these little things are now giving me a headache.http://nait.jtlnet.com/~fpkj5v0r/programmer.phpgo to the guestbook, and read guestbookif you write in the guestbook, it does get entered, so that is good.

[dsonesuk]

well i just tested your script, and it works fine in both firefox and ie7, on home pc and your web link? it shows:"17th November 2009 Marcus Weinkauf mweinkauf@gmail.comtester test"

[rmpotter]

well i just tested your script, and it works fine in both firefox and ie7, on home pc and your web link? it shows:"17th November 2009 Marcus Weinkauf mweinkauf@gmail.comtester test"

ooohhh man, classic case of not clearing my cache.. I'll never learn!Thanks everybody I truly appreciate the help! I love how forums work, and I love the people that work on them!

[ShadowMage]

ooohhh man, classic case of not clearing my cache.. I'll never learn!

Hey don't feel so bad. That gets me all the time!