Greetings, I am encountering an issue with the following code snippet (located in a js file named ajax.js)
$(function(){
$("#loading").hide();
$("ul#nav a").click(function(){
page = "content/"+$(this).attr('href')
$("#loading").ajaxStart(function(){
$(this).show()
})
$("#loading").ajaxStop(function(){
$(this).hide();
})
$(".content").load(page);
return false;
})
})
Within index.php, at the beginning of the head section, I have included the necessary scripts
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
In the body section, there is a main menu navigation set up like this
<ul id="nav">
<li><a href="page1.php">Here 1</a></li>
<li><a href="page2.php">Here 2 </a></li>
</ul>
Furthermore, here is where the content is loaded
<div class="content">
<img src="imgs/ajax-loader.gif" width="16" height="16" alt="Loading..." id="loading" />
<?php include('content/page1.php'); ?>
</div>
While the above code functions as intended, my problem arises when I try to navigate within page1.php which contains:
<ul id="nav">
<li><a href="page3.php">Here 3 </a></li>
<li><a href="page4.php">Here 4 </a></li>
</ul>
This ultimately disrupts the entire system. The primary navigation links work fine, but upon trying links from other pages, the functionality breaks down. Even after attempting to load the ajax script on every page.php, the issue persists. Any suggestions or solutions?