I'm able to dynamically call page2.php inside a div in page1.php without page reload by 2 js functions written in the header section of page1.php, but the issue is that after I call page2.php I want to click a link inside it to load page3.php in the same DIV of page1.php instead of page2.php, when I click it I get only (page3.php) in the browser
page1.php:
<head>
<script type='text/javascript'>`
function updateContainer( url ) {`
dynamicCon = '#dynamicContainer';
ObjTag = $( dynamicCon );
ObjTag.load( url );
}
$( document ).ready( function() {
$( 'a[data-fancybox-group="dynamicLoad"]' ).bind( "click", function( event ) {
url = $( this ).attr( 'href' );
updateContainer( url );
event.preventDefault();
event.stopPropagation();
});
});
</script>
</head>
<body>
<div id="dynamicContainer"></div>
<a href="blabla" onclick="this.href='page2.php'" data-fancybox-group="dynamicLoad">Load Page 2</a>
</body>
page2.php:
<a href="blabla" onclick="this.href='page3.php'" data-fancybox-group="dynamicLoad">Load Page 3</a>