ajax content error

**sparkythex** · 10-08-2009, 06:12 PM

i was trying to have my site load a picture & then a text file that is a comment about the picture, currently viewed.
well i had the picture part of it done.
i was able to hard code in a way to do a text file.
so then i tried to adjust what i wrote to also update the comment/note section.

the following code does have me trying this several ways but i really only need one. i don't really care how it is done.

currently i load the picture & the text (text part not working) by an array that is contained within the html javascript.
i would rather have this array loaded by a *.js (javascript file) if that is possible.
the reason is so that i edit my list instead of the html code, i fear at some point i might mess up the html with the constant editing.

this is part of the line that i added to show the comments. if it is removed it does cycle the image ok.



located in:

function showImage(i)

	document.getElementById('newsBox').appendChild(newsArray[n]).src= newstxt[n];



but also in:

function removeImage(i)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<script type="text/javascript">
<!--
//Set the timing for the slideshow here:
var SecondsBetweenImages=2;

//add image URLs here, separated by comma
//relative URL is ok.

var images=new Array('http://irongun.50webs.com/pages/irongun.jpg',
                               'http://irongun.50webs.com/pages/2008-05-07.jpg',
                               'http://irongun.50webs.com/pages/end.jpg');

//for the news & comments part

var newstxt=new Array('http://irongun.50webs.com/news/news1.txt',
                               'http://irongun.50webs.com/news/news2.txt',
                               'http://irongun.50webs.com/news/news3.txt');

//Ok, let's load all the images into an Object Array:
var imageArray=new Array();
for(i=0;i<images.length;i++)
{
	imageArray[i]=document.createElement('img');
	imageArray[i].id='image_'+i;
	imageArray[i].src=images[i];
}

//Ok, let's load all the news into an Object Array:
var newsArray=new Array();
for(n=0;n<newstxt.length;n++)
{
	newsArray[n]=document.createElement('textarea');
	newsArray[n].id='news_'+n;
	newsArray[n].src=images[n];
}

//Functions to navigate images
var current=0;

function First()
{
	removeImage(current);
	current=0;
	showImage(current);
}
function Previous()
{
	removeImage(current);
	current=current-1;
	if(current==-1) current=images.length-1;
	showImage(current);
}
function Next()
{
	removeImage(current);
	current++;
	if(current==images.length) current=0;
	showImage(current);
}
function Last()
{
	removeImage(current);
	current=images.length-1;
	showImage(current);
}

//For the slide show
var slideShow=false;
function Play_Stop(obj)
{
        if(!slideShow){
                slideShow=setInterval("Next()",SecondsBetweenImages*1000);
                obj.innerHTML="Stop &gt;"
        }else{
                clearInterval(slideShow);
                obj.innerHTML="Play &gt;"
                slideShow=false;
        }
}
function showImage(i)
{
	document.getElementById('imageBox').appendChild(imageArray[i]).src=images[i];
	document.getElementById('newsBox').appendChild(newsArray[n]).src= newstxt[n];
}
function removeImage(i)
{
        document.getElementById('imageBox').removeChild(document.getElementById('image_'+i));
        document.getElementById('newsBox').removeChild(document.getElementById('news_'+n));
}
function init()
{
	document.getElementById('image_0').src=images[0];
}
var XHR=false;
function loadHTML(url) {
	if (window.XMLHttpRequest) {
		XHR = new XMLHttpRequest();
	}
	else {
		if (window.ActiveXObject) {
			try {
				XHR = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {
                                document.getElementById('imageBox').innerHTML="This document is trying to access an ActiveXObject.  If you trust this site, allow the action by clicking on the bar above.";
                        }
		}
	}

	if (XHR) {
		XHR.onreadystatechange = showContents;
        XHR.open("GET", url, true);
		XHR.send(null);
	}
	else {
		document.getElementById('imageBox').innerHTML = "Error 501: Request not implemented - XMLHttpRequest() method not found in browser library.";
	}
}
function showContents() {
	if (XHR.readyState == 4) {
		if (XHR.status == 200) {
			if (XHR.responseText) {
                                var outMsg=XHR.responseText;
			}
			else {
				var outMsg = "Error 500: Forbidden.";
			}
		}
		else {
			var outMsg = "<h2>Error 404: File Not Found.</h2>";
		}
		document.getElementById('imageBox').innerHTML = outMsg;
	}
}
window.onload=init;
-->
</script>
</head>

<body>
<a href="javascript: void(0)" onclick="First()">&lt;&lt; First</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript: void(0)" onclick="Previous()">&lt; Back</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/archive.html" onclick="loadHTML(this.href); return false;">Archive</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript: void(0)" onclick="Play_Stop(this)">Play &gt;</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript: void(0)" onclick="Next()">Next &gt;</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript: void(0)" onclick="Last()">Last &gt;&gt;</a>
<div id="imageBox">
	<img id="image_0" src="" alt="Loading..." border="1" />
</div>

<div id="newsBox">
news: <br>
	<textarea rows="10" cols="125" readonly="readonly" border="1">
<script language="JavaScript">
<!-- begin 

document.write(newsArray[n]);
// end hiding -->
</script>

</textarea>
<br>
<table border="1">
<script language="JavaScript">
<!-- begin 
document.write(newsArray[n]);
// end hiding -->
</script>
</table>
</div>

</body>
</html>

thanks for looking at my problem even if you can't solve it.

**sparkythex** · 10-08-2009, 06:20 PM

if anyone one wants to look at the source code for how i rotate the image you can view the functioning page. it just has the news/comments parts stripped out so that it doesn't cause problems.
http://irongun.50webs.com/

**sparkythex** · 10-09-2009, 08:19 PM

Originally Posted by sparkythex

i was trying to have my site load a picture & then a text file that is a comment about the picture, currently viewed.
well i had the picture part of it done.
i was able to hard code in a way to do a text file.
so then i tried to adjust what i wrote to also update the comment/note section.

the following code does have me trying this several ways but i really only need one. i don't really care how it is done.

currently i load the picture & the text (text part not working) by an array that is contained within the html javascript.
i would rather have this array loaded by a *.js (javascript file) if that is possible.
the reason is so that i edit my list instead of the html code, i fear at some point i might mess up the html with the constant editing.

thanks for looking at my problem even if you can't solve it.

here is my updated code.
it now load the pic.1 but when i hit the next it doesn't load to the next pic.
however it still doens't load the comments but it does now show under the "news" area it shows error "undefined" when loading or hit next.

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test Page</title>
<script type="text/javascript">
<!--
//Set the timing for the slideshow here:
var SecondsBetweenImages=2;

//add image URLs here, separated by comma
//relative URL is ok.

var images=new Array('http://irongun.50webs.com/pages/irongun.jpg',
                               'http://irongun.50webs.com/pages/2008-05-07.jpg',
                               'http://irongun.50webs.com/pages/end.jpg');

//for the news & comments part

var newstxt=new Array('http://irongun.50webs.com/news/news1.txt',
                               'http://irongun.50webs.com/news/news2.txt',
                               'http://irongun.50webs.com/news/news3.txt');

//Ok, let's load all the images into an Object Array:
var imageArray=new Array();
for(i=0;i<images.length;i++)
{
	imageArray[i]=document.createElement('img');
	imageArray[i].id='image_'+i;
	imageArray[i].src=images[i];
}

//Ok, let's load all the news into an Object Array:
var newsArray=new Array();
for(n=0;n<newstxt.length;n++)
{
	newsArray[n]=document.createElement('textarea');
	newsArray[n].id='news_'+n;
	newsArray[n].src=images[n];
}

//Functions to navigate images
var current=0;

function First()
{
	removeImage(current);
	current=0;
	showImage(current);
}
function Previous()
{
	removeImage(current);
	current=current-1;
	if(current==-1) current=images.length-1;
        if(current==-1) current=newstxt.length-1;
	showImage(current);
}
function Next()
{
	removeImage(current);
	current++;
	if(current==images.length) current=0;
        if(current==newstxt.length) current=0;
	showImage(current);
}
function Last()
{
	removeImage(current);
	current=images.length-1;
        current=newstxt.length-1;
	showImage(current);
}

//For the slide show
var slideShow=false;
function Play_Stop(obj)
{
        if(!slideShow){
                slideShow=setInterval("Next()",SecondsBetweenImages*1000);
                obj.innerHTML="Stop &gt;"
        }else{
                clearInterval(slideShow);
                obj.innerHTML="Play &gt;"
                slideShow=false;
        }
}
function showImage(i)
{
	document.getElementById('imageBox').appendChild(imageArray[i]).src=images[i];
	document.getElementById('newsBox').appendChild(newsArray[n]).src= newstxt[n];
}
function removeImage(i)
{
        document.getElementById('imageBox').removeChild(document.getElementById('image_'+i));
        document.getElementById('newsBox').removeChild(document.getElementById('news_'+n));
}
function init()
{
	document.getElementById('image_0').src=images[0];
        document.getElementById('news__0').src=[0];
}
var XHR=false;
function loadHTML(url) {
	if (window.XMLHttpRequest) {
		XHR = new XMLHttpRequest();
	}
	else {
		if (window.ActiveXObject) {
			try {
				XHR = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {
                                document.getElementById('imageBox').innerHTML="This document is trying to access an ActiveXObject.  If you trust this site, allow the action by clicking on the bar above.";
                        }
		}
	}

	if (XHR) {
		XHR.onreadystatechange = showContents;
        XHR.open("GET", url, true);
		XHR.send(null);
	}
	else {
		document.getElementById('imageBox').innerHTML = "Error 501: Request not implemented - XMLHttpRequest() method not found in browser library.";
                document.getElementById('newsBox').innerHTML = "Error 501: Request not implemented - XMLHttpRequest() method not found in browser library.";
	}
}
function showContents() {
	if (XHR.readyState == 4) {
		if (XHR.status == 200) {
			if (XHR.responseText) {
                                var outMsg=XHR.responseText;
			}
			else {
				var outMsg = "Error 500: Forbidden.";
			}
		}
		else {
			var outMsg = "<h2>Error 404: File Not Found.</h2>";
		}
		document.getElementById('imageBox').innerHTML = outMsg;
                document.getElementById('newsBox').innerHTML = outMsg;
	}
}
window.onload=init;
-->
</script>
</head>

<body>
 <p>   
<a href="javascript: void(0)" onclick="First()">&lt;&lt; First</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript: void(0)" onclick="Previous()">&lt; Back</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/archive.html" onclick="loadHTML(this.href); return false;">Archive</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript: void(0)" onclick="Play_Stop(this)">Play &gt;</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript: void(0)" onclick="Next()">Next &gt;</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript: void(0)" onclick="Last()">Last &gt;&gt;</a></p>
<p><div id="imageBox">
	<img id="image_0" src="" alt="Loading..." border="1" />
</div></p>

<div id="newsBox">
news: <br>
	<textarea id="news_0" rows="10" cols="125" readonly="readonly" border="1">
<script language="JavaScript">
<!-- begin 

document.write(newsArray[n]);
// end hiding -->
</script>
</textarea>
<br>
<table border="1">
<tr><td><script language="JavaScript">
<!-- begin 
document.write(newsArray[n]);
// end hiding -->
</script></td></tr>
</table>
</div>

</body>
</html>

Thread: ajax content error

Thread Tools

Search Thread

ajax content error

Bookmarks

Bookmarks

Posting Permissions