4thorder(TM) - Code Snippets and Full Scripts

Changing content on a page (without refreshing)

Question:

Hi there - just hoping someone can help me. Total newbie here!! I've created a website using tables as my primary form of layout. Half the website will remain the same throughout the whole site - my question is - is it possible to target one cell in a table to change content while the rest of the page remains the same.
ie (if i have explained badly) the whole page wouldn't need to completely reload - just the section that would change.
Any chance someone could help?!!

Answer:

Like the other posts here very nicely suggest there are many ways to accomplish changing content on a page without refreshing the page. The primary question is where is this new content coming from?

I created a quick demo to show you how to change content of a table cell without refreshing the page.

You can place whatever HTML you wish in the input box (my source - yours may be diferent) and it should work.
For example try, <font size=4>Font Size 4</font>

Change table cell content demo (tested in IE, Firefox and Netscape)

Code:

<HTML>
<HEAD>
<SCRIPT>
function changeContent(which)
{
if(which==0)
{HTMLvalue=document.getElementById("html").value;}
else
{HTMLvalue='Dynamic Content';}
document.getElementById("container").innerHTML=HTMLvalue;
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE border="1" cellpadding="2" style="border-collapse: collapse" width="100%">
 <TR>
  <TD align="center">Static content</TD>
  <TD align="center">Static content</TD>
  <TD align="center">Static content</TD>
 </TR>
 <TR>
  <TD align="center">Static content</TD>
  <TD id="container" align="center" bgcolor="#FFFF00">Dynamic Content</TD>
  <TD align="center">Static content</TD>
 </TR>
 <TR>
  <TD align="center">Static content</TD>
  <TD align="center">Static content</TD>
  <TD align="center">Static content</TD>
 </TR>
</TABLE>
<P>Place HTML here
<INPUT type="text" id="html" size="69" value="&lt;b&gt;howdy!&lt;/b&gt;"></P>
<P><INPUT onClick="changeContent(0)" type="button" value="Change Dynamic Content" name="B1"></P>
<P><INPUT onClick="changeContent(1)" type="button" value="Reset" name="B2"></P>
</BODY>
</HTML>

If this is what you are looking for and still dont understand the details just let me know.

I also wrote a similar article that may explain a bit more about passing information around.

As far as using iframe is concerned, check here. You would just change the information within the iframe and the original page will not reload.

Top of Page