Hi,

Is there anyone who can write a simple code for refreshing the contents of only one DIV container on one page? What I need is when someone clicks on "more..." link, only the content of that particular container will change. The rest of the page will stay the same.

<script type="text/javascript">
<!--
function replaceContent() {
 
     document.getElementById("your_div").innerHTML = "Some new content."
 
}
-->
</script>
...
<a href="#" onclick="replaceContent()">more...</a>

That's it in its simplest form. Modify accordingly.

Thanks, ADAM. I'll try it out tonight.

The code works fine but it does the job only once. I don't know how to re-use it. The content is too large for only one reload. I'll try and investigate AJAX code. What I need is a code that can read for example .txt files or any other type which could contain the text I need to reload. I would split the content into a few of those. I don't know if that is possible or not, though.

<script type="text/javascript">
<!--
function replaceContent(show) {
 
     var display = new Array();
     display[1] = "Some new content.";
     display[2] = "Some other content.";
     display[3] = "Some more content.";
     
     document.getElementById("your_div").innerHTML = display[show];
 
}
-->
</script>
...
<a href="#" onclick="replaceContent(1)">more1...</a>
<a href="#" onclick="replaceContent(2)">more2...</a>
<a href="#" onclick="replaceContent(3)">more3...</a>
<div id="your_div"></div>

Thank you!

FYI, frofi: my post was not meant to be the be-all and end-all answer to your problem, but to give you an idea of how the content is replaced. Sometimes it's good to play with code, deconstruct it, see what it does, and then you can manipulate it for your own evil purposes.

Originally Posted by ADAM Web Design

FYI, frofi: my post was not meant to be the be-all and end-all answer to your problem, but to give you an idea of how the content is replaced. Sometimes it's good to play with code, deconstruct it, see what it does, and then you can manipulate it for your own evil purposes.

I uderstand that. But I know nothing about Java. I've managed to play and adjust code for displaying time and date but this time there was no way for my logic to come up with (show) or display[1], [2]....

Everything is working fine except for text decorations (like bold or color). The java code doesn't seem to accept HTML within the replaced text which, of course, disturbs the page design. Is there a way around it? Please, have a look at www.frofi.co.uk/new/index.htm
I need the code for the window on the left. When you click on "more..." it displays the rest of the article. Then another one must start... Blue line, bold title and then text.


__________________________________________________ ______________________________________
Are you ignoring me? We'll see if you still be ignoring me after I've taken action against your family and friends.

Now here is what I meant! It took me about 24 hours to find the code. I still can't make more than one reload, but at least it accepts HTML. If anyone knows how to make it work over and over again in the same DIV container, please let me know.

<script language="javascript">
function loadurl(dest) { 
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { /* do nothing */ }

xmlhttp.onreadystatechange = triggered;
xmlhttp.open("GET", dest);
xmlhttp.send(null);

}
function triggered() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
document.getElementById("yourDiv").innerHTML = xmlhttp.responseText;}
}
</script>

<div id="your div" onclick="loadurl('/yourFolder/yourFile.txt')">Initial content</div>

Hey frofi,

The code you posted I fully understand is what has been coined the term AJAX, To do what you want is not easy and could take you a while to actually understand how it all works.

To simply outline what happens:

When a request from your page asks for content from somewhere else (another page, output from a script, etc).

You remain on your page, till the content has been fully loaded and sent back to you, from there you take that content and you manipulate it into your site.

That manipulation into your site will appear instantly as if new content has been added, refreshed, etc (well it should do but in some circumstances caching problems get in the way).

I know this sounds like what you want, but the code above you provided does not handle the caching problems that you face with IE, I guess just changing this line to:

xmlhttp.open('GET', dest + encodeURIComponent('?time=' + new Date().getTime()));

May or may not work, but you do need to append a randomly generated string on the end of the URL so IE thinks it's a new page request otherwise it will continue to use it's own cache.

Cheers,

MC

I understand how it works and that's why I know it needs some special code. I also understand what your solution brings. The problem is, it will load the same .txt file over and over again with every click. What I want it to do is to load a different .txt file (a specified one or in some logical order) with every click, so that the continuity of text doesn't break.

Originally Posted by mastercomputers

Hey frofi,

The code you posted I fully understand is what has been coined the term AJAX, To do what you want is not easy and could take you a while to actually understand how it all works.

To simply outline what happens:

When a request from your page asks for content from somewhere else (another page, output from a script, etc).

You remain on your page, till the content has been fully loaded and sent back to you, from there you take that content and you manipulate it into your site.

That manipulation into your site will appear instantly as if new content has been added, refreshed, etc (well it should do but in some circumstances caching problems get in the way).

I know this sounds like what you want, but the code above you provided does not handle the caching problems that you face with IE, I guess just changing this line to:

xmlhttp.open('GET', dest + encodeURIComponent('?time=' + new Date().getTime()));

May or may not work, but you do need to append a randomly generated string on the end of the URL so IE thinks it's a new page request otherwise it will continue to use it's own cache.

Cheers,

MC

Interesting note. I'm wondering if there is a way to make the div refresh instead of firing onclick?