Execute php function only when clicked (wordpress)

Question

For one of my wordpress site php files, I have the following code:

  <div class="tabs">
      <a href="#tab1" id="items_id">Items</a>
  </div>
  <div class="section" id="tab1">
    <?php get_template_part('page/tab1'); ?>            
  </div>

So, it will call the tab1.php file into the div id="tab1"section.

However, I want to make it so that the get_template_part is only executed or called when the Items tab is clicked.

What would be the jQuery to call or execute the get_template_part function?

EDIT:

So, what I am trying to achieve is similar to Ajax. Since the get_template_part function won't be called till the "Items"tab is clicked, the browser does not have to call unnecessary files and slow down the page.

Let me know if you think this is the best way to do it.

Thanks!

Answer 1

Though the idea behind is already illustrated by Raphael in his answer, I intervene to add some details.

the best way to use AJAX with Wordpress is to use its built-in way of handling it, and that by sending requests to wp-admin/admin-ajax.php( I know the “admin” part of the file name is a bit misleading. but all requests in the front-end (the viewing side) as well as the admin can be processed in admin-ajax.php, with a lot of benefits, especially for security. And for the server-side code php that will be executed, it should be placed in functions.php.

Your jQuery code will look something like:

 $(document).ready(function() {
        $('.tabs a').click(function(e) {
            e.preventDefault();

            var tab_id = $(this).attr('id'); 


            $.ajax({
                type: "GET",
                url: "wp-admin/admin-ajax.php", 
                dataType: 'html',
                data: ({ action: 'yourFunction', id: tab_id}),
                success: function(data){
                          $('#tab'+tab_id).html(data);
                },
                error: function(data)  
                {  
                alert("Error!");
                return false;
                }  

            }); 

    }); 
}); 

infunctions.php of your theme (or directly in your plugin file), add:

add_action('wp_ajax_yourFunction', 'yourFunction');
add_action('wp_ajax_nopriv_yourFunction', 'yourFunction');

and define in the same file yourFunction callback function like this:

    function yourFunction() {

// get id
    // your php code

    die();

    }

For the javascript part, take a look at ajax() and its shorthand get(). And for the best practices using AJAX with Wordpress, there are many tutorials on the web (I will be back to give one). Good luck

Edit:

As it is mentionned by Karl, you can use .load() instead of ajax(), It should be noted that .load() is just a wrapper for $.ajax(). It adds functionality which allows you to define where in the document the returned data is to be inserted. Therefore really only usable when the call only will result in HTML. It is called slightly differently than the other as it is a method tied to a particular jQuery-wrapped DOM element. Therefore, one would do: $('#divWantingContent').load(...) which internally calls .ajax().

But my original answer is on how to organize php code respecting Wordpress best practices.

Answer 2

You can't really call a PHP function from javascript because by the time the browser sees the page, the PHP has already executed (or in your case, not executed )

The only way for you to do what you want is to spin the PHP function off into a separate script and then call that file using AJAX. Have the script echo HTML, and then insert the HTML into the tab1 div in the AJAX callback.

Answer 3

I think the easiest solution for you would be to use the jQuery load() function. It is the easiest way to achieve what you describe. The only issue that when someone clicks the header, there will be a delay to get the subitems as they do not exist yet (which would be the case for any situation where you delay the load.

HTML:

  <div class="tabs">
      <a href="#tab1" id="items_id">Items</a>
  </div>
  <div class="section" id="tab1"></div>

JS:

$(function () { 
     //wait for the page to finish loading
   $('#items_id').click (function (e){
     //watch for the items header to be clicked
   e.preventDefault();
    //prevent it from opening a link
    $('#tab1').load('tab1.php');
   //load the tab1.php file, or whatever file INTO the div
   });
})