If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

this simple example works surprisingly well on simple pages.
you can be more precise than the whole body; updating just the region you need. you can do this by string or dom. one trick is to hard-code 2 comments in your content div, to mark the content you want:

the worst complications arise when trying to do this all flawlessly if you're using javascript on the replaced html. any bound events will be lost. css and links should all still work ok...

depending on the scripting in use, you can often call the onload() event again to re-bind the new html with the event handlers. jQuery's ready() events poses further challenges, because it is not reachable once the event fires. you have to re-add your jquery plugin files to the dom once the content changes. they script files should be already cached by the browser at this point, so performance is much better than the real page load sequence.

you can work around this many ways.
-don't use javascript in the content, and it works 100%
-use ajax and localStorage to memorize the scripts so they can be eval()'d instead of re-added
-use an iframe to point to a simple html chunk that needs refreshing.
-modify any script files to make sure they have a reachable ready handle.
in jquery, you can usually do this at the top of a plug-in file by sneaking an assignment into the ready() call:

Code:

$(function(){ ...

becomes

Code:

$.onloads=$.onloads||{};
$(onloads['myplugin']= function(){ ...

you can then loop through $.onloads and re-fire the scripts that give the page life.

without jQuery, things can be simpler or more complicated, depending on the scripts used.
just make sure that what ever scripts you use can be re-added many times without breaking OR that you can reach the needed onload/ready/init functions.

finnaly, i should mention that if you only update textNodes, the events bound to existing elements will stay intact after the update. by careful use of selectors or extra attribs, you can replace each text piece one-at-a-time using element.textContent='something'. this approach is preferred for things like clocks and status updates as it's the least intrusive to the rest of the page. depending on your template, you might be able to iterate your before and after code's elements instead of using extra markup.

i didn't event mention some of the neat template engines out there these days; they might be worth taking a look at as well.

there's 1001 ways to do it; expect some debugging to get things perfect...