Results 1 to 3 of 3

Thread: ajax content error

  1. #1
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question ajax content error

    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.
    Last edited by sparkythex; 10-08-2009 at 06:17 PM. Reason: more details

  2. #2
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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/
    Last edited by sparkythex; 10-08-2009 at 06:20 PM. Reason: misspell

  3. #3
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by sparkythex View Post
    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>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •