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
– Meghdad Hadidi, Commented Dec 13, 2011 at 10:07

Ayman Safadi · Accepted Answer · 2011-12-13 12:43:11Z

0

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.

answered Dec 13, 2011 at 12:43

Ayman Safadi

11.6k1 gold badge30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bstpierre · Accepted Answer · 2011-12-13 15:33:12Z

0

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.

answered Dec 13, 2011 at 15:33

bstpierre

31.5k16 gold badges74 silver badges105 bronze badges

Comments

Ami · Accepted Answer · 2012-08-29 15:55:43Z

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, 2012 at 15:55

Ami

1

1 Comment

Mere Development Over a year ago

Good plan. Could you provide an example for the OP to improve your answer? What you have written is more of a 'comment'.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related