Eliminar fila de tabla personalizada en WordPress usando AJAX

Question

Eliminar fila de tabla personalizada en WordPress usando AJAX

22 feb 2014, 18:02:40

Vistas: 18.7K

Votos: 3

Desde mi tabla personalizada ($table = $wpdb->prefix . 'user_req';) muestro datos con $wpdb->get_results() y un bucle foreach:

mi tabla

Logré actualizar la base de datos con los valores individuales del formulario donde hay un botón "Enviar". Pero, desde esta tabla quiero eliminar cualquier fila haciendo clic en el botón (x) a la derecha de cada fila. Podría usar $_GET[] y eliminar fácilmente la fila, pero en este caso quiero usar AJAX.

El botón (x) a la derecha de cada fila es en realidad:

<input type="button" class="delete" title="Excluir este elemento"/>

No tengo mucha experiencia en programación, así que estoy teniendo dificultades. La mayoría de las soluciones que encuentro son para PHP-mySQL básico, pero estoy intentando hacerlo de la manera WordPress. Pude preparar mi consulta de eliminación con $wpdb:

<?php $wpdb->delete( $table, array( 'post_id' => $products->post_id ) ); ?>

Pero no pude implementarlo de manera WordPress-AJAX. Por lo tanto, cualquier ayuda sería muy apreciada.

Mayeenul Islam

12.9K

ajax wpdb personalización

Todas las respuestas a la pregunta

Comentarios

Muchísimas gracias por la respuesta detallada. Pero, me temo que no entiendo la parte del if( wp_verify_nonce( $id[2], $id[0] . '_' . $id[1] ) ). No puedo hacer coincidir esta parte con otros tutoriales (como este). Y sin hacer cambios a tu código, si ejecuto mi página me da un error fatal en el segundo producto - mostrando: No se puede redeclarar la función delete_row(). Pegué tanto la función como el <script>jQuery(document).on... dentro del bucle.

Mayeenul Islam

24 feb 2014 18:12:08

En ese tutorial lo hacen de manera diferente. Una forma perfectamente válida. Cuando explotas la cadena delete_12_94f3a1e666 obtienes delete en el índice [0] del array, 12 en el índice [1], 94f3a1e666 en el índice [2]. Si miras la referencia de la función, el primer parámetro de wp_verify_nonce es el nonce y luego el nonce_name. Estoy verificando el nonce en la sentencia if. delete_row(): parece que hay otra función llamada delete_row() en tu instalación. Renombra esta. No quieres la función dentro del bucle. En tu archivo functions.php o en un plugin personalizado.

CommandZ

24 feb 2014 18:46:04

Cuando cambies el nombre de la función, también necesitarás renombrarla en los add_actions. Este código no es copiable/pegable directamente. No conozco tu configuración completa. Necesitas modificarlo para tu configuración específica. Por ejemplo: en la función delete_row() necesitas configurar correctamente $wpdb->delete() porque no funcionará tal como está.

CommandZ

24 feb 2014 18:52:07

¿Puedes estar en el bucle para un chat conmigo?

Mayeenul Islam

24 feb 2014 18:56:05

@Mayeenul Islam: ¿Qué preguntas tienes en este momento? Puedo dirigirte a los recursos apropiados. Estás muy cerca de hacer que esto funcione. ¡Asegúrate de tener el plugin debug bar instalado! ¡También usa la consola de javascript en tu navegador para depurar el javascript!

CommandZ

24 feb 2014 19:00:22

Mostrar los 3 comentarios restantes

CommandZ 238 · Accepted Answer · 2014-02-22T18:29:51Z

Nonce

Vas a querer configurar un campo oculto nonce o al elemento para que puedas verificar la solicitud. Echa un vistazo al codex para ver ejemplos.

Configurando el ID del POST y el Nonce

Necesitarás añadir el ID del post específico al botón de eliminar o a un campo de entrada oculto asociado con esa entrada. Tengo el ejemplo configurado para que necesites añadir el post_id y el nonce al ID del elemento en un formato como #delete_postid_nonce. Tu ID de elemento debería terminar así: #delete_12_94f3a1e666.

Podrías asignarlo usando: $element_id = 'delete_' . $products->post_id . '_' . wp_create_nonce('delete_' . $products->post_id );

Añadir Acciones

Estas necesitan colocarse en functions.php o en un plugin personalizado.

Notarás que hay dos llamadas add_action. Una es para usuarios privilegiados (es decir, están logueados) y otra es para usuarios no privilegiados. Elimina una u otra si no necesitas ambas. Puedes leer más sobre esto en el Codex.

Función Delete_Row()

Esto necesita colocarse en functions.php o en un plugin personalizado.

Aquí estás obteniendo el id que enviamos en el objeto data de la llamada ajax. Eso se analiza y se coloca en el array POST ya que el type de la llamada ajax está configurado como POST.

Luego haces explode() al ID del id del elemento enviado en la llamada ajax (ej. '#delete_12_94f3a1e666') lo que te dejaría con $id = array('delete', 12, '94f3a1e666');. Así que el post_id es igual al índice [1].

Luego haces echo para devolver data a la porción success de la llamada ajax. Y luego terminas la función php llamando a `die'.

Necesitarás modificar este código para que funcione al 100%.

JS:

jQuery(document).on('click', '.delete', function () {
    var id = this.id;
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {"action": "your_delete_action", "element_id": id},
        success: function (data) {
            //ejecuta cosas al tener éxito aquí. Puedes usar la variable `data` en el  
           //retorno así que podrías publicar un mensaje.  
        }
    });
});

PHP:

function delete_row() {
    $id = explode('_', sanitize_text($_POST['element_id']));
    if (wp_verify_nonce($id[2], $id[0] . '_' . $id[1])) {
                $table = 'yourtable';
        $wpdb->delete( $table, array( 'post_id' => $id[1] ) );

        echo 'Post eliminado';
        die;
    } else {
        echo 'Nonce no verificado';
        die;
    }

}

add_action('wp_ajax_your_delete_action', 'delete_row');
add_action( 'wp_ajax_nopriv_your_delete_action', 'delete_row');