Question

I loaded wordpress page titles in top of my theme using get_pages() function like a navigation menu:

<ul>
<?php $pages = get_pages('child_of=0&parent=0&echo=0'); 

   foreach($pages as $page){
     echo '<li class=pages id=menu_'.$page->ID.' >';
     echo $page->title;
     echo '</li>';
   }
?>
</ul>

Note:

1. that the printed page titles doesn’t have link to the page.
2. and all <li> tags have same class=pages
3. and each <li> tag has an id related to current $page->ID

and I’ve used Jquery for call a function to show children of each page on click of each <li> tag with 2 last character of id attribute like below:

<script type=text/javascript>
  $(document).ready(function(){
    $('.pages').click(function(){
      var id = $(this).attr('id');
      id = id.substring(5,7);
      $('body').append(<?php get_pages('child_of=id&echo=1'); ?>);
    });
  });
</script>

Bu It doesn’t work, it seems the PHP block code called when page loaded.
Please help me to call the wordpress get_pages function on click event of each <li> to load children of pages.

Answer 1

Nobody is going to do this for you, but here are a few resources that may help you figure it out and lead you down the right path:

Intro to AJAX:
http://www.w3schools.com/Ajax/ajax_intro.asp

Intro to AJAX (video):
http://www.youtube.com/watch?v=tJXLRLDWjn4

Everything you need to know about AJAX and how to use it with WordPress:
http://codex.wordpress.org/AJAX
Hint: follow the links under the “Developer Information” section.