jquery - Execute php function only when clicked (wordpress) -

for 1 of wordpress site php files, have 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, call tab1.php file div id="tab1"section.

however, want make get_template_part executed or called when items tab clicked.

what jquery call or execute get_template_part function?

edit:

so, trying achieve similar ajax. since get_template_part function won't called till "items"tab clicked, browser not have call unnecessary files , slow down page.

let me know if think best way it.

thanks!

though idea behind illustrated raphael in answer, intervene add details.

the best way use ajax wordpress use built-in way of handling it, , sending requests wp-admin/admin-ajax.php( know “admin” part of file name bit misleading. requests in front-end (the viewing side) admin can processed in admin-ajax.php, lot of benefits, security. , server-side code php executed, should placed in functions.php.

your jquery code 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 theme (or directly in plugin file), add:

add_action('wp_ajax_yourfunction', 'yourfunction'); add_action('wp_ajax_nopriv_yourfunction', 'yourfunction'); 

and define in same file yourfunction callback function this:

    function yourfunction() {  // id     // php code      die();      } 

for javascript part, take @ ajax() , shorthand get(). , best practices using ajax wordpress, there many tutorials on web (i give one). luck

edit:

as mentionned karl, can use .load() instead of ajax(), should noted .load() wrapper $.ajax(). adds functionality allows define in document returned data inserted. therefore usable when call result in html. called differently other method tied particular jquery-wrapped dom element. therefore, 1 do: $('#divwantingcontent').load(...) internally calls .ajax().

but original answer on how organize php code respecting wordpress best practices.