below is the jquery ajax function and load.php file on the server side that supposed to load pages dynamically from different directories on my site but its not fully working. it only loads first and last pages in my nav menu #Browse_Page1
and #Charts_Page1
but it never loading the rest.
this is my nav menu.
<nav>
<ul id='menu' class="menu-items">
<li><a href="#Browse_Page1" class="albums active" id="page1-link"><i class="arcd-archive"></i></br>Browse</a></li>
<li><a href="#Top_albums_Page1" class="pages" id="page2-link"><i class="arcd-music97"></i></br>Top albums</a></li>
<li><a href="#Top_artists_Page1" class="albums" id="page3-link"><i class="arcd-microphone52"></i></br>Top artists</a></li>
<li><a href="#Top_lists_Page1" class="pages" id="page4-link"><i class="arcd-numbered8"></i></br>Top lists</a></li>
<li><a href="#Charts_Page1" class="pages" id="page4-link"><i class="arcd-rising9"></i></br>Charts</a></li>
</ul>
</nav>
and this is the jquery ajax function
$(function () {
$('header nav a').on('click', function () {
var linkClicked = $(this).attr('href');
var data = {
page : linkClicked.replace(/\D/g, ''),
directory : linkClicked.replace(/(_Page(.*)|#)/g,'')
}
$("header nav a").removeClass("active");
$(this).addClass("active");
$('#loading').css('visibility', 'visible');
$.post('load.php', data, function(msg) {
$('#main-content').html(msg);
$('#loading').css('visibility', 'hidden');
$('#main-content section').hide().fadeIn();
}, 'html');
});
});
finally this is the load.php on server side
<?php
$page = filter_var( $_POST['page'], FILTER_VALIDATE_INT);
$dir = filter_var( $_POST['directory'], FILTER_SANITIZE_STRING);
if ( $page !== false && $dir !== false ) {
$link = $dir . '/' . $dir . '_Page' . $page . '.html';
if ( file_exists( $link ) ) {
echo file_get_contents( $link );
} else {
echo 'There is no such page!';
}
}
?>
anyone have a idea where i am wrong or what i am missing, please help me to get out of this. thanks in advance.