Load links in a CSS frame?

Question

I am using this script to load pages in a css frame (div#maincontent). I want the links in the loaded pages to load in this frame instead of just "going" there. I want to do this using jquery. Here is my attempt:

$('#maincontent a').click(function(e) {
    e.preventDefault();
    ajaxpage($(this).attr("href"), 'maincontent');
});

Answer 1

Not sure what ajaxpage is, but if you're just loading a page into a div you can simply use load

Something like this:

$('#maincontent a').click(function(e) {
    e.preventDefault();
    $("#maincontent").load($(this).attr("href"));
});  

---

Edit: If you want the loaded page to have event handlers for click too, you can use load()'s callback function for this. Like this:

function engageLinks() {            
    $('#maincontent a').click(function(e) {
        e.preventDefault();
        $("#maincontent").load($(this).attr("href"), function() {                
            engageLinks();              
        } );
    });
}
  // Call the function the very first time the page is loaded.
  // After that the function will call itself.
engageLinks();

Here's an example.

Answer 2

Replace ajaxpage with $('#maincontent').load($(this).attr("href"));