CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Argiris
Argiris

Reputation: 189

Ajax help loading content

Hi I got a problem while using this code (which is in a js 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;
         })
     })

On the index.php first on the head division I include the scripts

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>

And on body division,this is the main menu navigation

<ul id="nav">
  <li><a href="page1.php">Here 1</a></li>
  <li><a href="page2.php">Here 2 </a></li>
</ul>

And here is the code 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>

This code is working perfectly.But my problem is that inside page1.php I got 

<ul id="nav">
  <li><a href="page3.php">Here 3 </a></li>
  <li><a href="page4.php">Here 4 </a></li>
</ul>

and the whole system is not working properly. If i use the links from the main navigation bar its ok but if i try to use links from any of the other pages its not working. I tried to load the ajax script on every page.php but still is not working. Any ideas?

Upvotes: 0

Views: 84

Answers (2)

Amrinder Singh
Amrinder Singh

Reputation: 5482

It is the issue of delegated function, just replace

$("ul#nav a").click(function(){

with

$(document).on('click', 'ul#nav a', function(){

your problem will be solved :)

Upvotes: 0

Mitul
Mitul

Reputation: 3427

OK the issue with the click event binding.

You need to bind the click event on nav a because of the page1.php have nav menu so the content is loaded using the ajax but click event is not bind on new menu item.

So create new function called BindClickEvent 

function BindClickEvent(){
        $("ul#nav a").unbind( "click" );
        $("ul#nav a").bind("click", function(){
            page = "content/"+$(this).attr('href')

            $("#loading").ajaxStart(function(){
               $(this).show()
               })
            $("#loading").ajaxStop(function(){
               $(this).hide();

            })

            $(".content").load(page);
            return false;
         })
}

call BindClickEvent function in page load and page1.php file content also So whenever you will add / remove menu call BindClickEvent function in ajax call response.

Upvotes: 2

Related Questions