How to retrieve specific lines with XML - JavaScript (Ajax)

Need to retrieve 1 specific line per click

Page 1 of 1

2 Replies - 843 Views - Last Post: 30 September 2008 - 06:02 PM

#1 skillionaire  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 13-September 08

How to retrieve specific lines with XML - JavaScript (Ajax)

Posted 29 September 2008 - 04:44 PM

Alright, this has to be my first time in Ajax.

I have this xml file with 10 quotes. What I would like to do is on clicking a submit btn, only 1 quote will display, on the 2nd click it will display a new quote and so on.
All this inside a small box. To call this I'm using Javascript

So far I got everything working except I hit a brick wall and can't figure out how to display 1 line per click. Any advice/help? I would tremendously appreciate it!

XML(sample_quotes.xml)
<?xml version="1.0" encoding="utf-8"?>
<quotes>
	<heading>Quotes about Life</heading>
	<quote>
		<person>Buddha</person>
		<text>If we could see the miracle of a single flower clearly, our whole life would change.</text>
	</quote>
	<quote>
		<person>Carl Jung</person>
		<text>There are as many nights as days, and the one is just as long as the other in the year's course. Even a happy life cannot be without a measure of darkness, and the word 'happy' would lose its meaning if it were not balanced by sadness.</text>
	</quote>
	<quote>
		<person>Helen Keller</person>
		<text>Security is mostly a superstition. It does not exist in nature, nor do the children of men as a whole experience it. Avoiding danger is no safer in the long run than outright exposure. Life is either a daring adventure or nothing.</text>
	</quote>
	<quote>
		<person>Henry James</person>
		<text>Be not afraid of life. Believe that life is worth living, and your belief will help create the fact.</text>
	</quote>
	<quote>
		<person>Martin Luther King Jr.</person>
		<text>An individual has not started living until he can rise above the narrow confines of his individualistic concerns to the broader concerns of all humanity.</text>
	</quote>
	<quote>
		<person>Mark Twain</person>
		<text>Let us so live that when we come to die even the undertaker will be sorry.</text>
	</quote>
	<quote>
		<person>Oscar Wilde</person>
		<text>To live is the rarest thing in the world. Most people exist, that is all.</text>
	</quote>
</quotes>





HTML:

<body>

<div id="wrapper">

<div class="header">
<h1>Ajax Quotes</h1>
</div><!-- END OF HEADER-->

<div class="quotebox">
<div id="MyID">&nbsp;</div>
</div><!-- END OF QUOTING BOX-->

<form name="myform" id="myform" method="post"action=""  > 
	<div class="quotes">
	  <input type="submit" name="btnNext" id="btnNext" value="Next Quote"  onclick="return store(this)"/>
	</div>
	<!-- quotes-->
</form><!-- end of form-->


</div><!--END OF WRAPPER-->


</body>



Javascript(request.js):

var request;

try{
	request = new XMLHttpRequest();
}catch(e){
	try{
		request = new ActiveXObject("MSXml.XMLHTTP");
	}catch(e1){
		try{
			request = new ActiveXObject("Microsoft.XMLHTTP");
		}catch(e2){
			request = null;
		}
	}
}



Javascript(global.js):

window.onload = function(){
	
	
	request.open('POST', 'sample_quotes.xml',true);
	
	
	request.onreadystatechange = function(){
		
		//4 being all loaded
		if(request.readyState == 4){
			//A file has loaded
			switch(request.status){
				case 200:
					//ok
					//alert('OK.');
	//---------//////////////// DISPLAY QUOTES \\\\\\\\\\\\\\\\\\--------------			
		var text =	request.responseXML.getElementsByTagName("text")
				
				
				for(i=0;i<text.length;i++){
					
					var p = document.createElement("p");
					var t = document.createTextNode(text[i].childNodes[0].nodeValue);
					p.appendChild(t);
					document.getElementById('MyID').appendChild(p);
				}
	//---------//////////////// DISPLAY QUOTES ENDS \\\\\\\\\\\\\\\\\\--------------				

				
					break;
				case 404:
					//File not found
					alert('Sorry. My dog ate the file.');
					break;
				case 403:
					//Permission Denied
					alert("Sorry. My mom won't let me give you the file");
					break;
				case 500:
				//Server Side error
				alert("Sorry. PHP feel asleep while building your file.");
				break;
				default:
					alert("I don't know what happened. But it wasn't good. lol");
			}
		}
	}
	
	request.send(null);
}


Any small contribution will help me a lot. I tried googling (best dictionary), tried searching in my book (unfortunately it won't tell you where you're wrong) and now I'm stranded.

If I miss any info please let me know.

****EDIT**** Sorry for misspelling - it's late and grumpy.
Also, I know you can make each quote unique by giving them "[1]" "[2]" and so on... but how would Javascript know who's 1 or 2?

This post has been edited by skillionaire: 29 September 2008 - 04:47 PM


Is This A Good Question/Topic? 0
  • +

Replies To: How to retrieve specific lines with XML - JavaScript (Ajax)

#2 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Re: How to retrieve specific lines with XML - JavaScript (Ajax)

Posted 29 September 2008 - 05:18 PM

why you are using xml is beyond me, but there are a few things here. You should remove the switch cases, you don't need to handle 404, etc.
Also the onreadystatechange isn't the way to catch this, remove it for something like:
if(xmlhttp)
	{
		xmlhttp.open('GET', "sample_quotes.xml", false);
		xmlhttp.send(null);
		var text = xmlhttp.responseXML.getElementsByTagName("text");
	}
	else
	{
		alert("Connection Failed!");
	}



**I have not completed it, but I am only a little xml parsing away.

The excessive comments don't really add anything to your code, as the lines you are describing are fairly obvious what they do, so in my opinion they should be removed or at least reduced the added //////////////////// detracts from the code.

My last suggestion would be to combine all your javascript. you are relying on a variable in a different file for your ajax call and this could destroy your code in practice should the files load in the wrong order.
Was This Post Helpful? 0
  • +
  • -

#3 skillionaire  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 13-September 08

Re: How to retrieve specific lines with XML - JavaScript (Ajax)

Posted 30 September 2008 - 06:02 PM

Hey William_Wilson,

Thanks for the reply.

I currently still am stuck at the same point. Cannot figure out how to switch "quote lines text" on a click of a button.

I just need any advice on how to approach this. I tried looking everywhere and nothing helps me with what I need to do.

Please, could you or anyone point me to the right direction? Thanks.

Oh and the reason why I'm using xml is for study/practice.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1