I want to use a audio player in my page, but the player can't be reloaded when the page refresh. So, I divided the template in 3 divs: header, content and footer, where the player is. To redirect to another page, I use ajax to refresh only content div. At the same time, I'm using htaccess to redirect everything to index.php, my base template. I'm doing like that to always validade every request, to display the page requested, when exist, or a 404 page when not exist. The problem is when I redirect to any page, for example, "/about". Because the htaccess, the index.php is going to the content div. I want to load my base template in index.php only one time. Is there a workaround for my scenario. I'm dont want to use any information from the client-side, like headers. Just for secury reasons. Below, there's an example of my code:
My index.php
<?php
//Creating base template...;
//Here, will be a URI validation
$uri = $_SERVER["REQUEST_URI"];
?>
<script>
$(document).on('click', "a", function(e){
$.ajax({
async: false,
url: document.location.pathname,
type: 'post',
success: function(ret) {
$("#content").html(ret);
}
});
return false;
});
</script>
<div id="header">
<a href="/home">Home</a>
<a href="/about">About</a>
</div>
<div id="content">
<h1>Content Here</h1>
</div>
<div id="footer">
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
My htaccess
RewriteEngine On
DirectoryIndex index.php
RewriteRule ^(.*)$ index.php [L]
My about.html page
</h1>About Page</h1>