Calling a function after a click on a button in Wordpress (dev-plugin)

Question

This is my code and I wanna do what is commented near line 73 (//HOW CAN I CALL FUNCTION post_type_search_callback HERE???). The results need to be in the same page, below the "form". I was trying some tutorials about ajax in the web but without succeeded. Pls help! Thanks!

 <?php class OwnersTriplify { const plugin_name = 'Owners-triplify'; public static function head() { } public static function initialize() { add_action('admin_menu', 'owners_triplify_admin_actions'); function owners_triplify_admin_actions() { add_menu_page('Owners Triplify', 'Owners Triplify', 'manage_options', 'owners-triplify/includes/OwnersTriplify.php', 'owners_triplify', plugins_url('owners-triplify/images/icon.png')); } function register_my_setting() { register_setting( 'hd-group', 'hd_options'); } add_action( 'admin_init', 'register_my_setting' ); add_action( 'admin_enqueue_scripts', 'post_type_search_enqueue' ); function post_type_search_enqueue($hook) { if( 'index.php' != $hook ) { // Only applies to dashboard panel return; } wp_enqueue_script( 'ajax-script', plugins_url( '/js/post_type_search_query.js', __FILE__ ), array('jquery') ); // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) ); } function owners_triplify() { ?> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <div id="div1"> <h3>Digite o post-type que deseja triplificar: </h3> <br/> <form method="post" name="form1" action=""> <input name="postType" value="" id="postType"> <input type="hidden" name="action" value="update"> <input type="hidden" name="option_page" value="hd_options"> <button id="button1" name="termoPesquisado" type="submit" class="button-primary">Pesquisar</button> </form> <br/> </div> <script> $("#button1").click(function () { //HOW CAN I CALL FUNCTION post_type_search_callback HERE??? }); /*$("#button1").click(function () { if ( $("#div2").is( ":hidden" ) ) { $("#div2").slideDown(); $("#div1").hide(); } else { } });*/ </script> <?php } function pegaValores($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } $termo = pegaValores($_POST["postType"]); ?> <?php add_action('wp_ajax_post_type_search', 'post_type_search_callback'); function post_type_search_callback() { ?> <div id="div2"> <h3>Digite as equivalências: </h3> <?php global $wpdb; $resultado = $wpdb->get_results("SELECT distinct meta_key FROM $wpdb->postmeta WHERE post_id in(SELECT ID FROM $wpdb->posts WHERE post_type = '".$termo."')"); $correspondencias; $tamanhoResultado = count($resultado); for($i = 1; $i <= $tamanhoResultado; $i++) { $correspondencias[$i] = "correspondencia"; } $contador = 1; //$resultado_array = array(); foreach($resultado as $resultadoX) { echo "<p>". $resultado_array[] = $contador."- ".$resultadoX->meta_key." => ". "<input value=".$correspondencias[$contador]." id='correspondencia".$contador."'/>". "</p>"; //descobrir como colocar $contador + 1 para imprimir, a fim de que inicialize com 0 o contador eo for do correspondencias $contador++; //$datacount = implode('-',$resultado_array); ?> <?php } ?> <button id="button2" name="triplify" onclick="atualizaValores()" class="button-primary" >Triplificar</button> </div> <?php } } } ?> 

Answer 1

php function

Note you are declaring all your functions inside initialize.....better to declare functions outside of other functions and call them as you need them.

add_action( 'wp_ajax_post_type_search_callback', array( 'OwnersTriplify', 'my_action_post_type_search_callback' ) );
add_action( 'wp_ajax_post_type_search_callback', array( 'OwnersTriplify', 'my_action_post_type_search_callback' ) );

function post_type_search_callback() {
    $data= $_POST['variable'];

    $output= 'i was returned with ajax';
    //need to echo output and exit here
echo $output;
exit();
}

jQuery You need to use the word jQuery or define $ for jQuery to work in wordpress.

jQuery(document).ready(function() { // wait for page to finish loading 
   jQuery("#button1").click(function () {

    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'post_type_search_callback',
            variable: 45 // enter in anyname here instead of variable, you will need to catch this value using $_POST['variable'] in your php function.
        },
        success: function (output) {
           console.log(output);
        }
    });

  });
});

further reading:

http://web-profile.com.ua/wordpress/dev/ajax-in-wordpress/