I have been trying to load the content of a link to a div element without reloading the page. I found this solution 'http://wecodesign.com/demos/stackoverflow-7071545.htm' and have tried it but I couldn't get it to work.
What I am doing is exactly the same, but for some reason it doesn't work.
This is the Jquery part:
<script type="text/javascript">
function updateContainer( url ){
dynamicCon = '#mainContent';
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>
And this is the PHP bit I use to output the HTML:
echo '<li><a href = "/getPost.php?q='. $row['id'] .' " rel="dynamicLoad" >'. $row['title'] .'</a> </li> <br>';
But this sends me to the link instead of loading it into the div. The div I want the content to load into is called "mainContent". Now, I can't say I know JQuery but everything looks OK to me but obviously I am missing something.
UPDATE: I tried linking to a later library, restart the server, cleared the browser cache and changed the Javascript to:
function updateContainer( url ){
dynamicCon = '#mainContent';
ObjTag = $( dynamicCon );
$("#mainContent").load(url)
}
$( document ).ready( function() {
$( 'a[rel="dynamicLoad"]' ).bind( "click", function( event ) {
url = $( this ).attr( 'href' );
updateContainer( url );
event.preventDefault();
event.stopPropagation();
});
});
Now, when I try to load a link the mainContent div becomes empty (certainly an improvement considering the situation)
UPDATE 2: I uploaded the thing on the net if you want to poke around. electricbrownie.net
