Change div content while remaining on page

[inCahoots]

What's the best way to change the content of a div while remaining on the same page?

I want a list of links to the left, and when one of the links is clicked on, a floated right div to the right populates with the appropriate content.

Thanks in advance.

[skywalker2208]

If you are talking about showing new content without a page refresh then you can use

1. Javascript - where the page already has the content in the page, but is is hidden and javascript will show it by click a link.

2. Javascript, ajax and server side code - You use javascript and ajax to call some a php, asp.net file or some other serve side language and have it return the content you are looking for. When the data is returned javascript will take that data and update the div.

[Major Payne]

I don't use JavaScript on my site. The side bars are fixed for every page and center content only changes making it appear as only the center was loaded. Most content is put on pages using SSI. Frames using the target="" attribute could be used. People don't like frames and have bad things to say about them, but they are useful when properly coded with the correct document type and syntax.

[inCahoots]

Okay, so I'm trying to replace the div contents with javascript. It works perfectly until I try to make the replacement text clickable.

For example, this works:

<div id="articles_author_copy">
<p>Click on an author to the left to view a list of their articles</p>
</div>

<a href="#" onclick="document.getElementById('articles_author_copy').innerHTML='<p>Title of Article Here</p>';">Author name</a>

This doesn't:

<div id="articles_author_copy">
<p>Click on an author to the left to view a list of their articles</p>
</div>

<a href="#" onclick="document.getElementById('articles_author_copy').innerHTML='<a href="#">Title of article here</a>';">Author name</a>

I'm assuming it's some kind of syntax error, I just need someone to point me to what it is.

Any help would be great.

[coothead]

Hi there inCahoots,

Try it like this...

<div id="articles_author_copy">
<p>Click on an author to the left to view a list of their articles</p>
</div>

<a href="#" onclick="document.getElementById('articles_author_copy').innerHTML=
'<a href=\'#\' >Title of article here<\/a>';return false">
Author name
</a>

coothead

[inCahoots]

That works perfectly - Thank you so much!

[coothead]

No problem, you're very welcome.