Wordpress & Jquery: How to call a wordpress function with jquery on click event of a div?

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:

that the printed page titles doesn't have link to the page.
and all <li> tags have same class=pages
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.

@Shvelo Yes, but I think I tried a wrong way, what's the right answer? Please do this example with ajax. I didn't use ajax at all! — Meghdad Hadidi, Dec 13 '11 at 10:07

score 0 · Answer 1 · answered Aug 29 '12 at 15:55

0

Why don't you simply load everything on the loop (a new foreach for subpages inside the pages' foreach loop) and then use your jQuery function (modified) to toggle the subpages on click?

answered Aug 29 '12 at 15:55

Ami

1

Good plan. Could you provide an example for the OP to improve your answer? What you have written is more of a 'comment'. – Mere Development Oct 01 '12 at 15:35

score 0 · Accepted Answer · answered Dec 13 '11 at 12:43

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.

score 0 · Answer 3 · answered Dec 13 '11 at 15:33

PHP runs on the server. Javascript/jquery runs in the browser. You can't directly run PHP from your javascript.

What you need to do is learn about ajax generally. Then learn about ajax and wordpress.

Then you can use jquery to fetch data from whatever APIs wordpress exposes to fetch the information you want, and display that data to the user.

Wordpress & Jquery: How to call a wordpress function with jquery on click event of a div?

3 Answers3

Linked