Question

I have a simple html/css webpage: http://www.eveo.org

All my content is located in my “content” div, 400px tall, and 960px wide. How could I update my content into that div without actually refreshing the web-page?

Answer 1

Adding onto the jQuery aspect, here’s an example where I do that very thing.

I have on my page a link which opens a container which is absolutely positioned where you clicked with your mouse, in this container is the contents of the link you clicked on. There’s a lot more code than What I’m showing here which performs my specific task, but this should be abstracted enough for you to use.

Live Demo: http://wecodesign.com/demos/stackoverflow-7071545.htm

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script type="text/javascript">
function updateContainer( url ) {
    dynamicCon = '#dynamicContainer';    
    ObjTag = $( dynamicCon );
    ObjTag.load( url );
}
$( document ).ready( function() {
    $( 'a[rel="dynamicLoad"]' ).bind( "click", function( event ) {
        url = $( this ).attr( 'href' );
        updateContainer( url );
        event.preventDefault();
        event.stopPropagation();
    });
});
</script>

<ul>
    <li><a href="stackoverflow-7071545-1.htm" rel="dynamicLoad">Page 1</a></li>
    <li><a href="stackoverflow-7071545-2.htm" rel="dynamicLoad">Page 2</a></li>
    <li><a href="stackoverflow-7071545-3.htm">Page 3 (Will not dynamic load)</a></li>
</ul>
<div id="dynamicContainer"></div>

In case you’re not familiar with jQuery, I’ll explain a few things

• jQuery is a library that makes developing JavaScript apps a lot easier, and it’s tested cross-browser, I’ve included Google’s publicly available version so I don’t have to host it, This will make the page load faster because users most likely have this Google version cached.
• In my updateContainer() function, I specify the container using jQuery selector syntax, then I put it into a jQuery tag $() so it becomes an object that I can then manipulate. I then use load to dynamically update it with the url that was passed to the function.
• $(document).ready(function() {} ); is a pretty universally used thing in jQuery, it basically says, run what’s in the curly braces when the document is ready.
• I put a rel=”dynamicLoad” on the anchor tags I want to affect, I do this because you may not want all links to load dynamically into this container. what the selector a[rel="dynamicLoad"] does is finds all anchor tags with this rel tag attribute and modifies them with the code I specify.
• I grab the url and send it to the updateContainer() function, then I run event.preventDefault() and event.stopPropagation() to stop the link from doing what it normally does by default, which is to open the page, you’ll notice that I passed “event” into the function call.