Cómo llamar a AJAX en un archivo de plugin de WordPress

Question

Cómo llamar a AJAX en un archivo de plugin de WordPress

19 jul 2014, 08:29:51

Vistas: 13.5K

Votos: 0

Soy nuevo usando AJAX con WordPress. Aquí estoy obteniendo el valor de una opción seleccionada en var test usando la siguiente función, cuando hago alert me muestra el valor correcto.

Este valor de var test necesito enviarlo usando AJAX y quiero OBTENER este valor en una variable PHP.

¿Qué necesito para llamar a AJAX y obtener el valor de la variable de script var test en PHP dentro del archivo del plugin donde tengo ambas funciones y el select box?

Función jQuery:

jQuery("#time_slot").change(function()
{
    // Obtener el valor del select
    var test= time_slot.value;
    alert(test);
    
});

Select Box:

<select name="time_slot" id="time_slot" class="time_slot">
<option value="">Elige una hora</option>
<option value="1:00 - 3:00">01:00 AM-03:00 AM</option>
<option value="3:00 - 5:00">03:00 AM-05:00 AM</option>
</select>

Sanjay Nakate

211

ajax

Todas las respuestas a la pregunta

Utiliza las acciones Ajax integradas de WordPress:

Tu código jQuery se verá así:

$('#ajax_form').bind('submit', function() {
    var form = $('#ajax_form');
    var data = form.serialize();
    data.action = 'MyPlugin_GetVars'
    $.post('/wp-admin/admin-ajax.php', data, function(response) {
        alert(response);           
    });
return false;

El código de tu plugin será algo como:

add_action("wp_ajax_MyPlugin_GetVars", "MyPlugin_GetVars");
add_action("wp_ajax_nopriv_MyPlugin_GetVars", "MyPlugin_GetVars");

function MyPlugin_GetVars(){
    global $wpdb;
    // usa $wpdb para tus inserciones

    //Haz aquí tus operaciones Ajax
    // Podrías hacer include('/wp-content/plugins/test/getvars.php') pero deberías
    // evitar eso y mover el código a esta función
}

Para más información visita AJAX en Plugins

TBI Infotech

989

19 jul 2014 08:40:38

Comentarios

¿puedes decirme la estructura de archivos según el código de la pregunta?

Sanjay Nakate

19 jul 2014 08:59:35

por favor mira a continuación, puede serte de ayuda. Aquí está tu código PHP.

<?php

function ajax_enqueuescripts() {
    wp_enqueue_script('ajaxloadpost', plugins_url().'/your-plugin-name/js/my-ajax.js', array('jquery'));
    wp_localize_script( 'ajaxloadpost', 'ajax_postajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

add_action('wp_enqueue_scripts', ajax_enqueuescripts);

add_action('wp_ajax_nopriv_ajax_ajaxhandler', 'my_action_callback' );
add_action('wp_ajax_ajax_ajaxhandler', 'my_action_callback' );

function my_action_callback(){  
    print_r($_GET);
    die;
}

Y aquí está tu código JS. Necesitas crear un nuevo archivo JS y colocar el siguiente código en tu nuevo archivo JS.

jQuery(document).ready(function(){
 jQuery("#time_slot").change(function()
{

    var test= time_slot.value;

jQuery.ajax({
        type: 'GET',
        url: ajax_postajax.ajaxurl,
        data: {
            action: 'ajax_ajaxhandler',
            test : test   
        },
        success: function(data) {
            alert(data);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Error");
        }
    });

    return false;
  });
});

Para más detalles, puedes revisar aquí

Jigar Gorakhiya

65

19 jul 2014 08:53:58

Comentarios

qué hacer con este /your-plugin-name/js/my-ajax.js ¿puedes elaborarlo?

Sanjay Nakate

19 jul 2014 09:17:37

Necesitas poner tu código JavaScript en my-ajax.js (nombre del archivo JS). Así que "/your-plugin-name/js/my-ajax.js" será la ruta a tu archivo JS.

Jigar Gorakhiya

19 jul 2014 09:37:22

booking.php es el nombre del archivo donde estoy obteniendo valores Jqery que debo enviar en una llamada ajax, entonces ¿dónde pondré esta función ajax_enqueuescripts() { y puedo crear el archivo js debajo del archivo booking.php? ¿y puedo poner el nombre de ese archivo js en?

Sanjay Nakate

19 jul 2014 09:44:52

recibiendo el error de sintaxis: error inesperado T_STRING, esperando T_FUNCTION en esta línea del hook add_action('wp_enqueue_scripts', ajax_enqueuescripts);

Sanjay Nakate

19 jul 2014 09:53:33

he hecho todo lo que dijiste en la respuesta pero sigo recibiendo el error anterior

Sanjay Nakate

19 jul 2014 09:56:00

Mostrar los 9 comentarios restantes

Añade esto en tu archivo PHP del plugin

 add_action("wp_ajax_ajax_plugin_call", "ajax_plugin_call_callback"); 
 add_action("wp_ajax_nopriv_ajax_plugin_call", "ajax_plugin_call_callback");

Función Ajax en la página PHP

function ajax_plugin_call_callback{
   global $wpdb;
   print_r($_POST) ; 
   // escribe tu código PHP aquí
   die;

}

Tu código Javascript debería verse así

jQuery(document).ready(function(){
  jQuery('#formID').bind('submit', function() { // Botón de envío del formulario
      var form_value =  jQuery('#formID'); 
      var form_data = form_value.serialize(); // Serializa el formulario
      form_data['action']='ajax_plugin_call'; // Acción 
     jQuery.post('<?php  echo admin_url('admin-ajax.php'); ?>',form_data,function(response){

         // Aquí está la respuesta Ajax

       });
    }
 });

Por favor revisa esto, te ayudará con las llamadas Ajax en WordPress para tu plugin.

Riteshdjoshi

101

19 jul 2014 13:32:48

Comentarios

Gracias por tu respuesta, pero por favor elabora más. Tu respuesta se considera un "code dump" (volcado de código sin explicación).

engelen

19 jul 2014 13:54:21

@engelen hola, he usado AJAX como var data = { current_datedddd: sdfdsfsdf, post_id: "'.$duplicate_of.'", action: "call_addon_price1" '.$attribute_fields_str.' }; alert(sdfdsfsdf); está enviando el valor de tiempo pero en la función action: "call_addon_price1" no puedo almacenarlo en una variable usando POST

Sanjay Nakate

19 jul 2014 14:27:35

¿Puedes decirme qué es "$attribute_fields_str"?

Riteshdjoshi

19 jul 2014 14:31:15

@engelen puedes revisar mi llamada ajax http://test.skovian.com/thefoodieclub.com/dine/dine/lunch-at-olive-bistro/

Sanjay Nakate

19 jul 2014 14:34:55

Por favor prueba esto add_action("wp_ajax_ajax_call_addon_price1", "call_addon_price1_callback"); add_action("wp_ajax_nopriv_call_addon_price1", "call_addon_price1_callback");

  function call_addon_price1_callback(){
   prueba esto en tu plugin
   print_r($_POST);
   die;
  }

Riteshdjoshi

19 jul 2014 14:45:11

Primero debes encolar el script y definir la URL. Luego tienes que crear una función para tu callback de AJAX y agregar una acción de WordPress que lo llame. Aquí hay un video donde lo explico, espero que te ayude. :)

https://www.youtube.com/watch?v=R7OK-TtNuEc

Brandon J Brotsky

126

25 jul 2014 05:27:20

Sanjay Nakate 211 · Accepted Answer · 2014-07-21T08:56:52Z

He llamado a AJAX usando el siguiente código, funciona correctamente. Aquí estoy enviando la variable time a esta página usando POST $.post("'. plugins_url().'/woocommerce-booking/gettime.php",

var time=0;
jQuery("#time_slot").change(function()
                                {   
                                time=time_slot.value;
                            $.post("'. plugins_url().'/woocommerce-booking/gettime.php",
                                 {name: time},
                                  function(response){
                                  console.log(response);
                                  }
                                );  
                                 });

Mi archivo gettime.php se verá como el siguiente y obtendrá la respuesta de mi llamada AJAX.

<?php session_start();
    echo $name= $_POST["name"];
    file_put_contents("name.txt", $name)

 ?>