web-dev-qa-db-fra.com

Modifier les méta-post avec des cases à cocher sur le front-end

J'essaie de créer une interface afin que deux champs personnalisés pour un type d'article personnalisé puissent être édités sur le serveur avec des cases à cocher. J'aimerais afficher des cases à cocher vides si aucun de ces champs n'a de valeur et permettre à un utilisateur de cocher une case ou les deux, et de définir les champs correspondants sur true (ou simplement une valeur, je suppose - je ne sais pas si un postmeta peut avoir une valeur booléenne) (de préférence via AJAX).

Ma première pensée est d’utiliser le plugin Front End Editor de Scribu, bien que cela ne résolve évidemment pas ce cas d’utilisation sans quelques ajustements. Cependant, je me suis dit que je demanderais à voir si quelqu'un d'autre a déjà fait quelque chose comme ça, ou a des suggestions sur la manière spécifique d'implémenter le plugin FEE pour le faire (ou si je devrais chercher ailleurs).

Modifier pour développer: cela se passe sur une page répertoriant plusieurs publications. J'essaie donc de trouver un moyen de faire en sorte que cela fonctionne pour plus d'une publication sur une page. Voici à quoi ressemble la page en ce moment:

enter image description here

Et voici le balisage pour cette table:

    <table>
                <thead>
                    <tr>
                        <th>Date/Time</th>
                        <th>Job ID</th>
                        <th>Customer Name</th>
                        <th>File Size</th>
                        <th>Details</th>
                        <th>Download</th>
                        <th>Scheduled</th>
                        <th>Completed</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">Details</a></td>
                        <td><a href="http://example.com/wp-content/uploads/gravity_forms/1-884e859c1f31e83338dbdaefd3bb2853/2012/08/CC-Content-Checklist.docx">Download 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">Details</a></td>
                        <td><a href="http://example.com/wp-content/uploads/gravity_forms/1-884e859c1f31e83338dbdaefd3bb2853/2012/08/Copy-Corner-Proposal-7-17-121.pdf">Download 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">Details</a></td>
                        <td><a href="http://example.com/wp-content/uploads/gravity_forms/1-884e859c1f31e83338dbdaefd3bb2853/2012/08/Process-and-deadlines-Copy-Corner2.pdf">Download 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">Details</a></td>
                        <td><a href="http://example.com/wp-content/uploads/gravity_forms/1-884e859c1f31e83338dbdaefd3bb2853/2012/08/CC-Wireframes1.pdf">Download 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>
custom-taxonomyajaxtermsfront-end
2
Travis Northcutt

Mon instinct serait de lancer mon propre rappel AJAX. Vous connaissez évidemment l'identifiant de la publication (puisque vous l'avez au début) et le nom des champs, postez-la simplement sur WP à l'aide de AJAX et définissez les valeurs par programme.

Un exemple non testé (props to Kailey Lampert ):

// Add checkboxes to post content
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;
}

// Add scripts to the 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
}

// Add handlers within WordPress to deal with the AJAX post
add_action( 'wp_ajax_update_custom_fields', 'cba_update_custom_fields' ); // for logged-in users
add_action( 'wp_ajax_nopriv_update_custom_fields', 'cba_update_custom_fields' ); // for logged-out users
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( 'updated' );
}

Mise à jour basée sur le balisage

Maintenant que nous en savons un peu plus sur ce que vous faites, nous pouvons être un peu plus spécifiques sur le code JS que vous devez utiliser.

En gros, je vous recommande de configurer une classe personnalisée et certains éléments de données dans vos cases à cocher. Alors, où vous avez des choses comme:

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

Devenir des choses comme:

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

Maintenant, vous pouvez configurer un écouteur d'événement jQuery sur toute la table, qui examine chaque entrée individuellement:

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

        // ... Now send off your AJAX request as before
    });
});

Cet écouteur d'événements attendra l'événement change de tous les éléments <input> ayant la classe ajax-checkbox. Il extraira ensuite les valeurs que vous avez codées en dur (générées par PHP, j'espère) de l'attribut data- afin que vous puissiez les envoyer dans votre demande AJAX. Vous devrez fusionner ceci avec les exemples ci-dessus ou le code personnalisé que vous avez déjà écrit pour distribuer les messages.

3
EAMann