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)
CODE
<?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:
CODE
<body>
<div id="wrapper">
<div class="header">
<h1>Ajax Quotes</h1>
</div><!-- END OF HEADER-->
<div class="quotebox">
<div id="MyID"> </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):
CODE
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):
CODE
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 Sep, 2008 - 03:47 PM
29 Sep, 2008 - 03:44 PM
| 