Editar metadatos de publicaciones con casillas de verificación en el front-end

Question

Editar metadatos de publicaciones con casillas de verificación en el front-end

9 ago 2012, 19:26:44

Vistas: 1.68K

Votos: 2

Estoy intentando construir una interfaz para que dos campos personalizados de un tipo de publicación personalizada puedan editarse en el front-end con casillas de verificación. Me gustaría mostrar casillas vacías si ninguno de esos campos tiene valores, y permitir que un usuario marque una o ambas casillas, y que los campos correspondientes se establezcan como true (o simplemente tengan algún valor, supongo - no estoy seguro si un postmeta puede tener un valor booleano) (preferiblemente vía AJAX).

Mi primer pensamiento es usar el plugin Front End Editor de Scribu, aunque obviamente no resuelve este caso de uso sin algunos ajustes. Sin embargo, pensé en preguntar para ver si alguien más ha hecho algo similar antes, o tiene sugerencias sobre cómo implementar específicamente el plugin FEE para hacer esto (o si debería buscar en otro lugar).

Edición para ampliar: esto va en una página que lista múltiples publicaciones, así que estoy intentando encontrar una manera de que esto funcione para más de una publicación en una página. Así es como se ve la página actualmente:

Tabla de trabajos con casillas de verificación para programado y completado

Y aquí está el markup para esa tabla:

    <table>
                <thead>
                    <tr>
                        <th>Fecha/Hora</th>
                        <th>ID del Trabajo</th>
                        <th>Nombre del Cliente</th>
                        <th>Tamaño del Archivo</th>
                        <th>Detalles</th>
                        <th>Descargar</th>
                        <th>Programado</th>
                        <th>Completado</th>
                    </tr>
                </thead>
                <tr class="job">
                        <td>8/8/12 1:12pm</td>
                        <td>28</td>
                        <td>Selina Kyle</td>
                        <td>filesize</td>
                        <td><a href="http://example.com/jobs/selina-kyle/" target="_blank">Detalles</a></td>
                        <td><a href="http://example.com/wp-content/uploads/gravity_forms/1-884e859c1f31e83338dbdaefd3bb2853/2012/08/CC-Content-Checklist.docx">Descargar Archivo</a></td>
                        <td><input type="checkbox" name="28-scheduled"  /></td> 
                        <td><input type="checkbox" name="28-completed"  /></td> 
                        <td><input type="hidden" name="post_id" value="28" /></td>
                        <td><span class="response"></span></td>
                </tr>
                <tr class="job">
                        <td>8/8/12 1:06pm</td>
                        <td>26</td>
                        <td>Jim Gordon</td>
                        <td>filesize</td>
                        <td><a href="http://example.com/jobs/jim-gordon/" target="_blank">Detalles</a></td>
                        <td><a href="http://example.com/wp-content/uploads/gravity_forms/1-884e859c1f31e83338dbdaefd3bb2853/2012/08/Copy-Corner-Proposal-7-17-121.pdf">Descargar Archivo</a></td>
                        <td><input type="checkbox" name="26-scheduled"  /></td> 
                        <td><input type="checkbox" name="26-completed"  /></td> 
                        <td><input type="hidden" name="post_id" value="26" /></td>
                        <td><span class="response"></span></td>
                </tr>
                <tr class="job">
                        <td>8/8/12 1:05pm</td>
                        <td>25</td>
                        <td>Lucius Fox</td>
                        <td>filesize</td>
                        <td><a href="http://example.com/jobs/lucius-fox-2/" target="_blank">Detalles</a></td>
                        <td><a href="http://example.com/wp-content/uploads/gravity_forms/1-884e859c1f31e83338dbdaefd3bb2853/2012/08/Process-and-deadlines-Copy-Corner2.pdf">Descargar Archivo</a></td>
                        <td><input type="checkbox" name="25-scheduled"  /></td> 
                        <td><input type="checkbox" name="25-completed"  /></td> 
                        <td><input type="hidden" name="post_id" value="25" /></td>
                        <td><span class="response"></span></td>
                </tr>
                <tr class="job">
                        <td>8/8/12 12:51pm</td>
                        <td>22</td>
                        <td>Bruce Wayne</td>
                        <td>filesize</td>
                        <td><a href="http://example.com/jobs/bruce-wayne-2/" target="_blank">Detalles</a></td>
                        <td><a href="http://example.com/wp-content/uploads/gravity_forms/1-884e859c1f31e83338dbdaefd3bb2853/2012/08/CC-Wireframes1.pdf">Descargar Archivo</a></td>
                        <td><input type="checkbox" name="22-scheduled"  /></td> 
                        <td><input type="checkbox" name="22-completed"  /></td> 
                        <td><input type="hidden" name="post_id" value="22" /></td>
                        <td><span class="response"></span></td>
                </tr>
   </table>

Travis Northcutt

3.4K

taxonomía personalizada ajax términos front end

Comentarios

¿Puedes darnos un ejemplo de marcado para la página? Eso nos ayudaría a definir los selectores JS adecuados ...

EAMann

10 ago 2012 22:29:07

@EAMann buena sugerencia. También agregué una captura de pantalla.

Travis Northcutt

10 ago 2012 22:48:35

Todas las respuestas a la pregunta

Comentarios

Ampliando la idea de @EAMann, aquí hay un plugin de demostración/prueba que agrega algunas casillas de verificación y guarda su selección mediante ajax: https://gist.github.com/3308061

Kailey Lampert

9 ago 2012 21:11:03

@KaileyLampert ¡guau, increíble! Ya casi lo tengo funcionando en este punto - el único problema es que estoy obteniendo una respuesta de '0' en lugar de 'Actualizado'. ¿Alguna sugerencia sobre cómo depurar eso?

Travis Northcutt

10 ago 2012 18:40:07

Creo que parte de mi problema es que estoy intentando hacer que esto funcione para múltiples publicaciones en la misma página (ver mi edición anterior), pero el javascript solo verifica si una entrada de cada tipo está marcada o no, sin verificar a qué ID de publicación corresponden las casillas marcadas. Sin embargo, no estoy seguro de cómo rectificar la situación.

Travis Northcutt

10 ago 2012 22:11:46

EAMann 32.2K · Answer 1 · 2012-08-09T19:53:15Z

Mi instinto me dice que debería implementar mi propia devolución de llamada AJAX. Obviamente conoces el ID de la publicación (ya que lo tienes en el frontend) y los nombres de los campos, solo envíalos de vuelta a WordPress usando AJAX y establece los valores de manera programática allí.

Un ejemplo no probado (créditos a Kailey Lampert):

// Añadir checkboxes al contenido de la publicación
add_filter( 'the_content', 'cba_add_checkboxes'); 
function cba_add_checkboxes( $c ) {

    $first = get_post_meta( get_the_ID(), 'first_item_key', true );
    $second = get_post_meta( get_the_ID(), 'second_item_key', true );

    $c .= '<p class="cba"><input type="checkbox"  name="test_value_1" '. checked( $first, 'true', false ) .' /><br />
    <input type="checkbox" name="test_value_2" '. checked( $second, 'true', false ) .' />
    <input type="hidden" name="post_id" value="'. get_the_ID() .'" /><br /><span class="response"></span></p>';

    return $c;
}

// Añadir scripts al pie de página
add_action('wp_footer', 'cba_script');
function cba_script() {
    wp_enqueue_script('jquery');
    ?><script>
    jQuery(function($) {
        var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
        var spinner = '<?php echo admin_url( 'images/loading.gif' ); ?>';
        $('.cba input').click( function() {
            var p = $(this).parent('p');
            p.find('.response').html('<img src="'+spinner+'" alt="Cargando" title="Cargando..." />');
            $.post(ajaxurl, {
                'action': 'update_custom_fields',
                'post_id': p.find('input[name="post_id"]').val(),
                'first_item': p.find('input[name="test_value_1"]').is(':checked'),
                'second_item': p.find('input[name="test_value_2"]').is(':checked')
            }, function( response ) {

                p.find('.response').html(response);

            }, 'text');
        });
    });
    </script><?php
}

// Añadir manejadores dentro de WordPress para gestionar la solicitud AJAX
add_action( 'wp_ajax_update_custom_fields', 'cba_update_custom_fields' ); // para usuarios conectados
add_action( 'wp_ajax_nopriv_update_custom_fields', 'cba_update_custom_fields' ); // para usuarios no conectados
function cba_update_custom_fields() {
    $post_id = $_POST[ 'post_id' ];
    $first_item = $_POST[ 'first_item' ];
    $second_item = $_POST[ 'second_item' ];

    update_post_meta( $post_id, 'first_item_key', $first_item );
    update_post_meta( $post_id, 'second_item_key', $second_item );

    die( 'actualizado' );
}

Actualización basada en el marcado

Ahora que sabemos un poco más sobre lo que estás haciendo, podemos ser más específicos en el código JS que necesitas usar.

Básicamente, lo que recomiendo es configurar una clase personalizada y algunos elementos de datos dentro de tus checkboxes. Así que donde tienes cosas como:

<td><input type="checkbox" name="28-scheduled"  /></td> 
<td><input type="checkbox" name="28-completed"  /></td>

Se convierten en:

<td><input type="checkbox" name="28-scheduled" class="ajax-checkbox" data-post="28" data-type="scheduled" /></td> 
<td><input type="checkbox" name="28-completed" class="ajax-checkbox" data-post="28" data-type="completed" /></td>

Ahora, puedes configurar un escuchador de eventos jQuery en toda la tabla que examine cada input individualmente:

jQuery(function($) {
    $('table').on('change', 'input.ajax-checkbox', function() {
        var $this = $(this), 
            type = $this.data('type'), 
            postID = $this.data('post');

        // ... Ahora envía tu solicitud AJAX como antes
    });
});

Este escuchador de eventos esperará el evento change de todos los elementos <input> que tengan la clase ajax-checkbox. Luego extraerá los valores que has codificado (espero que generados por PHP) de los atributos data- para que puedas enviarlos en tu solicitud AJAX. Tendrás que combinar esto con los ejemplos anteriores o el código personalizado que ya hayas escrito para enviar los mensajes.