Wordpress: comment appeler une fonction plugin avec un appel ajax?

Question

J'écris un plugin Wordpress MU, il inclut un lien avec chaque poste et je veux utiliser ajax pour appeler l'une des fonctions plugin lorsque l'utilisateur clique sur ce lien, puis mettre à jour dynamiquement le lien texte avec sortie de cette fonction.

Je suis coincé avec la requête ajax. J'ai cette façon compliquée, clairement bidouillante, de le faire, mais ça ne marche pas vraiment. Quelle est la manière «correcte» ou «wordpress» d'inclure la fonctionnalité ajax dans un plugin?

(Mon code actuel de hack est ci-dessous. Lorsque je clique sur le lien Générer je ne reçois pas la même sortie que je reçois dans la page wp que quand je vais directement à l'échantillon-ajax.php dans mon navigateur.)

J'ai mon code [1] mis en place comme suit:

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/échantillon/échantillon 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/échantillon/échantillon ajax.php:

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

[1] Note: Le tutoriel suivant m'a loin, mais je suis perplexe à ce moment. http://www.devlounge.net/articles/using-ajax-with-your-wordpress-plugin

Answer 1

TheDeadMedic n'a pas tout à fait raison. WordPress a construit dans les capacités AJAX. Envoyez-nous votre demande ajax à /wp-admin/admin-ajax.php POST en utilisant l'argument « action »:

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); 
      } 
     }); 
    }); 
}); 

Accrocher ensuite dans le plug-in comme celui-ci si vous voulez que cela fonctionne pour les utilisateurs connectés :

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

ou le crochet comme cela fonctionne uniquement pour les non-utilisateurs connectés:

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

Utilisez les deux si vous voulez que cela fonctionne pour tout le monde. Admin-ajax.php utilise déjà des noms d'actions, alors assurez-vous de parcourir le fichier et n'utilisez pas les mêmes noms d'action, sinon vous allez accidentellement essayer de supprimer des commentaires, etc.

EDIT

Désolé, je n'ai pas bien compris la question. Je pensais que vous demandiez comment faire une requête ajax. Quoi qu'il en soit, deux choses que je vais essayer:

Tout d'abord, faites que votre fonction fasse écho au mot AJAX sans la balise a. Ensuite, essayez de changer votre appel ajax donc il a à la fois un succès et un rappel complet:

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

environnement WordPress

Tout d'abord, afin de réaliser cette tâche, il est recommandé d'enregistrer puis enqueue un script jQuery qui enverra la requête au serveur. Ces opérations seront accrochées dans le crochet d'action wp_enqueue_scripts.Dans le même crochet, vous devriez mettre wp_localize_script qu'il est utilisé pour inclure du Javascript arbitraire. De cette façon, il y aura un objet JS disponible à l'avant. Cet objet porte l'URL correcte à utiliser par le handle jQuery.

S'il vous plaît jeter un oeil à:

1. wp_register_script(); fonction
2. wp_enqueue_scripts crochet
3. wp_enqueue_script(); fonction
4. fonction wp_localize_script();

fichier: functions.php 1/2

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'))); 
} 

fichier: jquery.ajax.js

Ce fichier fait l'appel 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); 
    } 
    }); 
}); 

fichier: functions.php 2/2

Enfin sur votre fichier functions.php il devrait y avoir la fonction déclenchée par votre appel ajax. Rappelez-vous les suffixes:

1. wp_ajax (permettant la fonction uniquement pour les utilisateurs enregistrés ou des opérations de panneau d'administration)
2. wp_ajax_nopriv (permettre à la fonction pour qu'aucun utilisateur de privilège)

Ces suffixes plus la Compose d'action le nom de votre action:

wp_ajax_myaction ou 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 
} 

J'espère que ça aide! Faites-moi savoir si quelque chose n'est pas clair.

Answer 3

Juste pour ajouter une information. Si vous souhaitez recevoir un objet à partir d'une fonction de méthode de classe php:

js fichier

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); 
    }); 
}); 

fichier 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(); 
}