Refreshing just a section of a page using javascript

@_Melanie_Apr 22.2007

Hi there,

I have a page that in one <div> generates a random quote…in order to generate a new random quote I have to refresh the ~~[b]~~whole[/b] page.

Is there a way to just refresh that little div…using a button

all the source is at ~~[url]~~www.tri-state-evangelistic.org[/url]

the JS is also on that index page so you can see what is going on

to post a comment

JavaScript

10 Comments(s) _↴

@sftrprodApr 22.2007 — #You'd have to use AJAX really, with some sort of server side script. Do you have PHP enabled? In that case, I can help you.

@_Melanie_authorApr 22.2007 — #The website is a godaddy account

and yes it is a linux server, so i can use php

help me please ?

@sftrprodApr 22.2007 — #Infact, you won't even need the PHP.

You see the <p> tags surrounding the quote?

Change that to <p id="quotearea">allthestuffinside</p>

Then copy and paste everything INSIDE that <p> tag (don't cut it, you still need it there) into a seperate file, and call that file quotes.htm

Then in the head of your document, put this:

[CODE]<script type="text/javascript">
 var ajax = {
 
  getReqObject: function() {
 
   if (window.XMLHttpRequest) {
   return new XMLHttpRequest();
   } else if(window.ActiveXObject) {
   return new ActiveXObject("Microsoft.XMLHTTP");
   } else {
   return false;
   }
  },
 
  get: function(url, callback) {
 
   var reqObject = this.getReqObject();
   if (this.getReqObject == false) {
   alert("error");
   } else {
   reqObject.onreadystatechange = function() {
 
   if (reqObject.readyState == 4) {
   var result = reqObject.responseText;
   eval(callback);
   }
 
   };
   reqObject.open('GET', url, true);
   reqObject.send(null);
   }
  }
 }
 
 function replaceinnerHTML(e, s) {
 document.getElementById(e).innerHTML = s;
 }
 
 function getnewquote() {
 ajax.get('quotes.htm', 'replaceinnerHTML('quotearea', result)');
 }
 </script>[/CODE]

Then set the submit button to do onClick="getnewquote()"

Should work.

@JMRKERApr 22.2007 — #You could use the AJAX method, but it would seem to me to be overkill.

See if you can use the following:

[code=php]
 <html>
 <head>
 <title>Random Quotes</title>
 <script type="text/javascript">
 
 Quotes = new Array();
 Quotes[0] = 'Random Quote 1';
 Quotes[1] = 'Random Quote 2';
 Quotes[2] = 'Random Quote 3';
 Quotes[3] = 'Random Quote 4';
 Quotes[4] = 'Random Quote 5';
 Quotes[5] = 'Random Quote 6';
 Quotes[6] = 'Random Quote 7';
 Quotes[7] = 'Random Quote 8';
 Quotes[8] = 'Random Quote 9';
 Quotes[9] = 'Random Quote 10';
 // you may import this as a javascript source file: Quotes.js
 
 function RndQuote(id) {
 var r = Math.floor(Math.random()*Quotes.length);
 document.getElementById(id).innerHTML = Quotes[r];
 }
 </script>
 </head>
 <body>
 <a href="javascript:void(0)" onclick="RndQuote('quotes')">Random Quotes</a>
 <div id='quotes'></div>
 
 </body>
 </html>
 [/code]

Three possible modifications:

1. Put random quotes into a seperate .js file

2. Set an event time to call the RndQuote() function after a period of time.

3. Use a timer in an "onLoad=" call of the RndQuote() function.

@_Melanie_authorApr 22.2007 — #ok did that......

I included even the <p id> tag in quote.htm

now what happens is the same quote appears but a the box gets longer and longer with every click

here is the page i tested it on

www.tri-state-evangelistic.org/randomquotetest.html

what did I do wrong?

@JMRKERApr 22.2007 — #Looks to me that you are creating the display with:

document.write("<p>"" + quotes[index] + ""</p>");

It needs to be created only once in the <BODY> portion.

The program updates the area in the <DIV> region </DIV> of my script.

Note also that my method does not use the AJAX code at all!

Also, check the error console to assure you don't have other problems.

@_Melanie_authorApr 22.2007 — #ok JMarker....that seemed to work out great

I am tweaking it a bit but overall it is wonderful

Thanks to you BOTH for all your help and patience!!!!

@JMRKERApr 23.2007 — #You are most welcome, but there is only one of us.

Glad I could help.

You might be able to set the minimum or maximum "height" of the quote area with a few CSS words so that it minimized the "jump" when different length quotes are presented.

BTW, site looks pretty good already.

@Logic_AliApr 23.2007 — #ok did that......

I included even the <p id> tag in quote.htm

now what happens is the same quote appears but a the box gets longer and longer with every click

here is the page i tested it on

www.tri-state-evangelistic.org/randomquotetest.html

what did I do wrong?[/QUOTE]All you need is to add IDs to the relevant elements:

[CODE]//display the quotation
 document.write("<p id='quoteArea'>"" + quotes[index] + ""</p>");
 document.write("<p style="text-align: right;"><span id='authorArea' style="color: rgb(32, 96, 160);">" + authors[index] + "</span><br></p>" + "n");
 [/CODE]

Then change the [I]getnewquote[/I] function to

[CODE]function getnewquote()
 {
 var idx; 
 
 while( (idx=Math.floor(Math.random()*quotes.length)) == index )
 ;
 
 document.getElementById('quoteArea').firstChild.data=quotes[index=idx];
 document.getElementById('authorArea').firstChild.data=authors[index]; 

 }[/CODE]

@sftrprodApr 23.2007 — #Argh. I'm in the AJAX mind set at the moment, and I started off thinking that the quote script was a server-side script so I carried on thinking like that. :S

My mistake.

The non-AJAX method is a lot better.

Also in #JavaScript _↴

read txt file line by line problem only fixes after a page refresh Javascript array

Success!

Help @_Melanie_ spread the word by sharing this article on Twitter...

Tweet This

Refreshing just a section of a page using javascript

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Refreshing just a section of a page using javascript

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴