Help with some javascript and php to refresh only a div and not the whole page.

[blurredvision]

To make this as simple as possible, I'll describe a highly simplified version of a site I am designing.

Let's say I have a page that is separated into two divs, one on the left and one on the right. We'll call them "leftdiv" and "rightdiv". In "leftdiv", I currently have a working version of the fantastic php file tree, as seen here: http://abeautifulsite.net/note.../demo/demo_classic.php

What I would like to happen is that when I click on a file in that tree in "leftdiv", it will open that file in "rightdiv" without refreshing the entire screen.

I found this bit of code that does work, but I need it to be dynamic and show the file the user wants to see, not some canned text sitting in an array in the script code.


------------------------------------------------------------------

<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>

------------------------------------------------------------------



Like I said, that code works, but I don't know anything about javascript. If I can get some help changing the javascript code above, I can take care of the rest. Those "onclick" events will simply be moved into argument for the php function to create the file tree.

I appreciate any help!

 

[MSCoder610]

I might just use an iframe in the right div, and after a click in the left div, update the target of the iframe.

I was going to suggest looking into XmlHttpRequest / AJAX, but I was skimming too fast (don't think that would work for showing arbitrary files).

 

[blurredvision]

Originally posted by: MSCoder610
I might just use an iframe in the right div, and after a click in the left div, update the target of the iframe.

I'm actually looking into that right now.

 

[Titan]

If you can generate all of the hidden content on page load and then just show/hide when your left button is clicked, you don't need iFrames. I can show you that Javascript.

You basically give your div that changes an ID, then set the correct content to display when clicking. Lots of ways to do this, like generating the innerHTML all at once, or having it there and hidden and just setting the display to "block".

If you expect a file to change without the page reloading, then you will need something AJAX-y like an iFrame.

 

[GilletteCat]

What type of content do you have in mind for those files that you want to display?
The reason for the question is that if they are images, it is rather simple. You are already utilizing innerHTML inside the function, so, instead of the current text you can pass the appropriate html fragment:

<script type="text/javascript">
function replaceContent(show) {

var display = new Array();
display[1] = "<img src='image_1.gif'>";
display[2] = "<img src='image_2.gif'>";
display[3] = "<img src='image_3.gif'>";

document.getElementById("your_div").innerHTML = display[show];

}
</script>

You have to remember that your images have to reside in the same directory as this page itself. Otherwise, you simply have to include the path to the folder where they reside inside the src property in the function above.

 

[blurredvision]

They actually aren't images, I copied and pasted that code that I found, but didn't replace the generic examples. I'm actually working with only text files.

However, the more I've been looking at this, the more complicated it will be to explain. I tried to make it simple, but it's not. 🙂 I'm going to head to lunch, and when I get back, I'll give it my best shot.

 

[Ken g6]

I think I might be able to give you an AHAH moment. 😉

This might even be the page I worked from last time I used AHAH.

 

[GilletteCat]

This is exactly what he needs because of the use of innerHTML. The same reason i went with src, thinking those might be images. But for text stream, this is the way to go.
:thumbsup: