Wordpress: cómo llamar a una función de complemento con una llamada ajax?

Question

Estoy escribiendo un plugin de Wordpress MU, incluye un enlace con cada publicación y quiero usar ajax para llamar a una de las funciones de complemento cuando el usuario hace clic en este enlace, y luego actualizar dinámicamente el texto de enlace con salida de esa función.

Estoy atascado con la consulta de AJAX. Tengo esta forma complicada, claramente hack-ish, de hacerlo, pero no está funcionando del todo. ¿Cuál es la forma 'correcta' o 'wordpress' de incluir la funcionalidad ajax en un complemento?

(Mi código de corte actual está por debajo. Al hacer clic en el enlace no consigo el mismo resultado que me meto en la página wp como cuando voy directamente a la muestra-ajax.php en mi navegador generan.)

Tengo mi código [1] establecido de la siguiente manera:

mu-plugins/sample.php:

<?php 
/* 
Plugin Name: Sample Plugin 
*/ 
if (!class_exists("SamplePlugin")) { 
    class SamplePlugin { 
    function SamplePlugin() {} 
    function addHeaderCode() { 
     echo '<link type="text/css" rel="stylesheet" href="'.get_bloginfo('wpurl'). 
      '/wp-content/mu-plugins/sample/sample.css" />\n'; 
     wp_enqueue_script('sample-ajax', get_bloginfo('wpurl') . 
      '/wp-content/mu-plugins/sample/sample-ajax.js.php', 
      array('jquery'), '1.0'); 

    } 
    // adds the link to post content. 
    function addLink($content = '') { 
     $content .= "<span class='foobar clicked'><a href='#'>click</a></span>"; 
     return $content; 
    } 
    function doAjax() { // 
     echo "<a href='#'>AJAX!</a>"; 
    } 
    } 
} 
if (class_exists("SamplePlugin")) { 
    $sample_plugin = new SamplePlugin(); 
} 
if (isset($sample_plugin)) { 
    add_action('wp_head',array(&$sample_plugin,'addHeaderCode'),1); 
    add_filter('the_content', array(&$sample_plugin, 'addLink')); 
} 

mu-plugins/muestra/muestra-ajax.js.php:

<?php 
if (!function_exists('add_action')) { 
    require_once("../../../wp-config.php"); 
} 
?> 
jQuery(document).ready(function(){ 
    jQuery(".foobar").bind("click", function() { 
     var aref = this; 
     jQuery(this).toggleClass('clicked'); 
     jQuery.ajax({ 
      url: "http://mysite/wp-content/mu-plugins/sample/sample-ajax.php", 
      success: function(value) { 
      jQuery(aref).html(value); 
      } 
     }); 
    }); 
}); 

mu-plugins/muestra/muestra-ajax.php:

<?php 
if (!function_exists('add_action')) { 
    require_once("../../../wp-config.php"); 
} 
if (isset($sample_plugin)) { 
    $sample_plugin->doAjax(); 
} else { 
    echo "unset"; 
} 
?> 

[1] Nota: El siguiente tutorial me consiguió este momento, pero estoy perplejo en este punto. http://www.devlounge.net/articles/using-ajax-with-your-wordpress-plugin

Answer 1

TheDeadMedic no está del todo bien. WordPress ha incorporado capacidades AJAX. Enviar su solicitud a /wp-admin/admin-ajax.php ajax usando POST con el argumento de la 'acción':

jQuery(document).ready(function(){ 
    jQuery(".foobar").bind("click", function() { 
     jQuery(this).toggleClass('clicked'); 
     jQuery.ajax({ 
      type:'POST', 
      data:{action:'my_unique_action'}, 
      url: "http://mysite/wp-admin/admin-ajax.php", 
      success: function(value) { 
      jQuery(this).html(value); 
      } 
     }); 
    }); 
}); 

Entonces engancharlo en el plugin de este tipo si sólo se quiere que funcione para los usuarios registrados :

add_action('wp_ajax_my_unique_action',array($sample_plugin,'doAjax')); 

o engancharlo al igual que esto funcione sólo a no usuarios registrados:

add_action('wp_ajax_nopriv_my_unique_action',array($sample_plugin,'doAjax')); 

uso, tanto si quieres que funcione para todo el mundo.

admin-ajax.php ya usa algunos nombres de acción, así que asegúrese de mirar el archivo y no usar los mismos nombres de acción, o bien accidentalmente intentará hacer cosas como eliminar comentarios, etc.

EDIT

Disculpa, no he entendido bien la pregunta. Pensé que estabas preguntando cómo hacer una solicitud de Ajax. De todos modos, dos cosas que probaría:

Primero, haga que su función repita la palabra AJAX sin la etiqueta a. A continuación, trate de cambiar su llamada AJAX por lo que tiene tanto un éxito y una devolución de llamada completo:

jQuery(document).ready(function(){ 
    jQuery(".foobar").bind("click", function() { 
     var val = ''; 
     jQuery(this).toggleClass('clicked'); 
     jQuery.ajax({ 
      type:'POST', 
      data:{action:'my_unique_action'}, 
      url: "http://mysite/wp-admin/admin-ajax.php", 
      success: function(value) { 
      val = value; 
      }, 
      complete: function(){ 
      jQuery(this).html(val); 
      } 
     }); 
    }); 
}); 

Answer 2

WordPress ambiente

En primer lugar, con el fin de lograr esta tarea, se recomienda registrar a continuación, poner en cola un script jQuery que enviará la solicitud al servidor. Estas operaciones se engancharán en el gancho de acción wp_enqueue_scripts.En el mismo enlace debe poner wp_localize_script que se usa para incluir Javascript arbitrario. De esta forma, habrá un objeto JS disponible en el front end. Este objeto lleva la url correcta para ser utilizada por el manejador jQuery.

favor, eche un vistazo a:

1. wp_register_script(); función
2. wp_enqueue_scripts gancho
3. wp_enqueue_script(); función
4. wp_localize_script(); función

del archivo: functions.php medio

add_action('wp_enqueue_scripts', 'so_enqueue_scripts'); 
function so_enqueue_scripts(){ 
    wp_register_script('ajaxHandle', get_template_directory() . 'PATH TO YOUR JS FILE', array(), false, true); 
    wp_enqueue_script('ajaxHandle'); 
    wp_localize_script('ajaxHandle', 'ajax_object', array('ajaxurl' => admin_url('admin-ajax.php'))); 
} 

del archivo: jquery.ajax.js

Este archivo hace que la llamada AJAX.

jQuery(document).ready(function($){ 
    //Some event will trigger the ajax call, you can push whatever data to the server, simply passing it to the "data" object in ajax call 
    $.ajax({ 
    url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function 
    type: 'POST', 
    data:{ 
     action: 'myaction', // this is the function in your functions.php that will be triggered 
     name: 'John', 
     age: '38' 
    }, 
    success: function(data){ 
     //Do something with the result from server 
     console.log(data); 
    } 
    }); 
}); 

del archivo: functions.php 2/2

último en su archivo functions.php no debería ser la función activada por su llamada Ajax. Recuerde los sufijos:

1. wp_ajax (Permitir que la función sólo para usuarios registrados o las operaciones del panel de administración)
2. wp_ajax_nopriv (permitir que la función de ningún usuario de privilegio)

Estos sufijos más el componer acción el nombre de su acción:

wp_ajax_myaction o wp_ajax_nopriv_myaction

add_action('wp_ajax_myaction', 'so_wp_ajax_function'); 
add_action('wp_ajax_nopriv_myaction', 'so_wp_ajax_function'); 
function so_wp_ajax_function(){ 
    //DO whatever you want with data posted 
    //To send back a response you have to echo the result! 
    echo $_POST['name']; 
    echo $_POST['age']; 
    wp_die(); // ajax call must die to avoid trailing 0 in your response 
} 

Espero que ayude!

Avísame si algo no está claro.

Answer 3

Solo para agregar una información. Si desea recibir un objeto a partir de una función de método de clase php: FICHA

js

jQuery(document).ready(function(){ 
jQuery(".foobar").bind("click", function() { 
    var data = { 
     'action': 'getAllOptionsByAjax', 
     'arg1': 'val1', 
     'arg2': $(this).val() 
    }; 
    jQuery.post(ajaxurl, data, function(response) { 
     var jsonObj = JSON.parse(response); 
    }); 
}); 

archivo PHP

public static function getAllOptionsByAjax(){ 

    global $wpdb; 

    // Start query string 
    $query_string = "SELECT * FROM wp_your_table WHERE col1='" . $_POST['arg1'] . "' AND col2 = '" . $_POST['arg2'] . "' "; 

    // Return results 
    $a_options = $wpdb->get_results($query_string, ARRAY_A); 
    $f_options = array(); 
    $f_options[null] = __('Please select an item', 'my_domain'); 
    foreach ($a_options as $option){ 
     $f_options [$option['id']] = $option['name']; 
    } 
    $json = json_encode($f_options); 
    echo $json; 
    wp_die(); 
}