i have this function that i used to fetch some pages by jquery ajax that also responsible for active link state of navigation. below is the code that has two same functions that supposed to fetch pages from two different directories and as you seen both functions using same variable name "linkClicked" the problem is that only first function is working and if i removed first function then 2nd function is starting working. what i am trying to say is both functions are not working simultaneously. i know i shouldn't used same variable name twice but changing the variable name to something else also not working!
$(function() {
$('header nav a').click(function() {
var $linkClicked = $(this).attr('href');
document.location.hash = $linkClicked;
var $Top_albumsRoot = $linkClicked.replace('#Top_albums', '');
if (!$(this).hasClass("active")) {
$("header nav a").removeClass("active");
$(this).addClass("active");
$.ajax({
type: "POST",
url: "load.php",
data: 'Top_albums='+$Top_albumsRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#main-content section').hide().fadeIn();
}
}
});
}
else {
event.preventDefault();
}
});
var hash = window.location.hash;
hash = hash.replace(/^#/, '');
switch (hash) {
case 'page2' :
$("#" + hash + "-link").trigger("click");
break;
case 'Top_albums_Pop' :
$("#" + hash + "-link").trigger("click");
break;
case 'page4' :
$("#" + hash + "-link").trigger("click");
break;
}
});
$(function() {
$('header nav a').click(function() {
var $linkClicked = $(this).attr('href');
document.location.hash = $linkClicked;
var $pageRoot = $linkClicked.replace('#page', '');
if (!$(this).hasClass("active")) {
$("header nav a").removeClass("active");
$(this).addClass("active");
$.ajax({
type: "POST",
url: "load2.php",
data: 'page='+$pageRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#main-content section').hide().fadeIn();
}
}
});
}
else {
event.preventDefault();
}
});
var hash = window.location.hash;
hash = hash.replace(/^#/, '');
switch (hash) {
case 'page2' :
$("#" + hash + "-link").trigger("click");
break;
case 'page3' :
$("#" + hash + "-link").trigger("click");
break;
case 'page4' :
$("#" + hash + "-link").trigger("click");
break;
}
});
these are two php files that linked to these functions respectively load.php and load2.php
<!--load.php-->
<?php
if(!$_POST['Top_albums']) die("0");
$page = (int)$_POST['Top_albums'];
if(file_exists('Top-albums/Top_albums'.$page.'.html'))
echo file_get_contents('Top-albums/Top_albums'.$page.'.html');
else echo 'There is no such page!';
?>
<!--load2.php-->
<?php
if(!$_POST['page']) die("0");
$page = (int)$_POST['page'];
if(file_exists('pages/page'.$page.'.html'))
echo file_get_contents('pages/page'.$page.'.html');
else echo 'There is no such page!';
?>
finally this is navigation menu
<li><a href="#page1" class="active" id="page1-link">Page 1</a></li>
<li><a href="#page2" id="page2-link">Page 2</a></li>
<li><a href="#Top_albums3" id="page3-link">Page3</a></li>
<li><a href="#page4" id="page4-link">Page 4</a></li>
so i really need to avoid this conflict to load pages from different directories or if someone have an idea to modify this function to accept different directories at the same time. p.s: remember first php file suppose to check for pages from "Top-albums" folder and 2nd is from "pages" folder. thanks in advance
html:
<header>
<nav>
<ul>
<li><a href="#page1" class="active" id="page1-link">Page 1</a></li>
<li><a href="#page2" id="page2-link">Page 2</a></li>
<li><a href="#Top_albums3" id="page3-link">Page3</a></li>
<li><a href="#page4" id="page4-link">Page 4</a></li>
</ul>
</nav>
JS
$(function() {
$('header nav a').on('click', function() {
var linkClicked = $(this).attr('href');
if(linkClicked.indexOf('page') == true)
{
var $pageRoot = linkClicked.replace('#page', '');
$.ajax({
type: "POST",
url: "load2.php",
data: 'page='+$pageRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#main-content section').hide().fadeIn();
}
}
});
}
else
{
var $Top_albumsRoot = linkClicked.replace('#Top_albums', '');
$.ajax({
type: "POST",
url: "load.php",
data: 'Top_albums='+$Top_albumsRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#main-content section').hide().fadeIn();
}
}
});
}
});
});