Modificare i meta dei post con checkbox in front-end

Question

Modificare i meta dei post con checkbox in front-end

9 ago 2012, 19:26:44

Visualizzazioni: 1.68K

Voti: 2

Sto cercando di creare un'interfaccia che permetta di modificare due campi personalizzati per un custom post type direttamente in front-end utilizzando delle checkbox. Vorrei mostrare checkbox vuote se nessuno di questi campi ha valori, e permettere all'utente di selezionare una o entrambe le caselle, impostando i corrispondenti campi a true (o semplicemente con un valore qualsiasi - non sono sicuro se un postmeta possa avere un valore booleano) preferibilmente via AJAX.

La mia prima idea è usare il plugin Front End Editor di Scribu, anche se ovviamente non risolve direttamente questo caso d'uso senza alcune modifiche. Tuttavia, ho pensato di chiedere per vedere se qualcun altro ha già fatto qualcosa di simile, o ha suggerimenti su come implementare specificamente il plugin FEE per fare questo (o se dovrei cercare altrove).

Modifica per espandere: questo verrà applicato a una pagina che elenca più post, quindi sto cercando di capire come farlo funzionare per più di un singolo post per pagina. Ecco come appare attualmente la pagina:

Interfaccia tabellare con checkbox per modificare i meta dei post

Ed ecco il markup per quella tabella:

    <table>
                <thead>
                    <tr>
                        <th>Data/Ora</th>
                        <th>ID Lavoro</th>
                        <th>Nome Cliente</th>
                        <th>Dimensione File</th>
                        <th>Dettagli</th>
                        <th>Download</th>
                        <th>Programmato</th>
                        <th>Completato</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">Dettagli</a></td>
                        <td><a href="http://example.com/wp-content/uploads/gravity_forms/1-884e859c1f31e83338dbdaefd3bb2853/2012/08/CC-Content-Checklist.docx">Scarica File</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">Dettagli</a></td>
                        <td><a href="http://example.com/wp-content/uploads/gravity_forms/1-884e859c1f31e83338dbdaefd3bb2853/2012/08/Copy-Corner-Proposal-7-17-121.pdf">Scarica File</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">Dettagli</a></td>
                        <td><a href="http://example.com/wp-content/uploads/gravity_forms/1-884e859c1f31e83338dbdaefd3bb2853/2012/08/Process-and-deadlines-Copy-Corner2.pdf">Scarica File</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">Dettagli</a></td>
                        <td><a href="http://example.com/wp-content/uploads/gravity_forms/1-884e859c1f31e83338dbdaefd3bb2853/2012/08/CC-Wireframes1.pdf">Scarica File</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

tassonomia personalizzata ajax termini front end

Commenti

Puoi fornirci un esempio di markup per la pagina? Questo ci aiuterà a identificare i selettori JS corretti...

EAMann

10 ago 2012 22:29:07

@EAMann ottima idea. Ho anche aggiunto uno screenshot.

Travis Northcutt

10 ago 2012 22:48:35

Tutte le risposte alla domanda

Commenti

Ampliando l'idea di @EAMann, ecco un plugin demo/test che aggiunge alcune checkbox e salva la loro selezione via ajax: https://gist.github.com/3308061

Kailey Lampert

9 ago 2012 21:11:03

@KaileyLampert wow, fantastico! A questo punto ho quasi tutto funzionante - l'unico intoppo è che ottengo una risposta '0' invece di 'Updated'. Hai qualche suggerimento su come debugare questo problema?

Travis Northcutt

10 ago 2012 18:40:07

Penso che parte del mio problema sia che sto cercando di far funzionare questo sistema per più post sulla stessa pagina (vedi la mia modifica sopra), ma il javascript controlla solo se un input di ogni tipo è selezionato o meno, senza verificare a quale post id corrispondono le checkbox selezionate. Non sono sicuro su come sistemare la situazione, però.

Travis Northcutt

10 ago 2012 22:11:46

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

Il mio istinto sarebbe quello di creare un mio callback AJAX. Ovviamente conosci l'ID del post (dal momento che lo hai sul frontend) e i nomi dei campi, semplicemente inviali a WP usando AJAX e imposta i valori in modo programmatico.

Un esempio non testato (crediti a Kailey Lampert):

// Aggiungi checkbox al contenuto del post
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;
}

// Aggiungi script al footer
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+'" />');
            $.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
}

// Aggiungi gestori in WordPress per gestire il post AJAX
add_action( 'wp_ajax_update_custom_fields', 'cba_update_custom_fields' ); // per utenti loggati
add_action( 'wp_ajax_nopriv_update_custom_fields', 'cba_update_custom_fields' ); // per utenti non loggati
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( 'aggiornato' );
}

Aggiornamento basato sul markup

Ora che sappiamo un po' di più su quello che stai facendo, possiamo essere più specifici sul codice JS che devi usare.

Fondamentalmente, quello che ti consiglio di fare è impostare una classe personalizzata e alcuni attributi data all'interno dei tuoi checkbox. Quindi dove hai elementi come:

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

Diventano cose come:

<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>

Ora, puoi impostare un listener di eventi jQuery sull'intera tabella che esamina ogni input individualmente:

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

        // ... Ora invia la tua richiesta AJAX come prima
    });
});

Questo listener di eventi aspetterà l'evento change di tutti gli elementi <input> che hanno la classe ajax-checkbox. Estrae poi i valori che hai hard-codato (spero generati da PHP) dagli attributi data- in modo da poterli inviare nella tua richiesta AJAX. Dovrai unire questo con gli esempi sopra o con il codice personalizzato che hai già scritto per inviare i messaggi.