Fetching HTML into a <div> and overwrite content.

Question

Hello everyone,

I have a website with a top panel and a body part. The top panel can be toggled between hidden and shown. The body part should contain the actual content of the website.

As I don't want to hard-code every single site, I would like to stay with the panel and only reload the content.

This seems to can be done using AHAH and this tutorial.

The problem is that, if new content is loaded, it just pushes the old content down. My question is, how can I overwrite the old content with the new, fetched content?

Thanks a lot in advance for the help!

Answer 1

Use:

document.getElementById('yourDivID').innerHTML = theHTML;

However any JavaScript in theHTML will not be evaluated.

Answer 2

If you're using jQuery:

$("#divid").html("some html value goes here");

Answer 3

The prototype.js library has a good function, Ajax.Updater(), to do this sort of thing, and it is less limited than the ahah.js lib, it sounds (can harvest a chunk of any page, local or remote, unlike AHAH). Like jquery, there is a special $() function to get at stuff, use that to prune before appending.

$( 'target_div_id').childElements().each( function( child) { child.remove(); } )
Ajax.Updater( 'target_div_id', 'related_page.html')

Trailing options can be added to refine how much of the downloaded "page" is used.

Ajax.Updater Element

Answer 4

Jquery would be the best way, here is a link to that page;

http://docs.jquery.com/Attributes/html#val

Answer 5

thanks a lot to everyone of you, i will have a look! I have already been using javascript and innerHTML i was just thinking there would be a better way to do this. So i will stick with this.