编辑前端带有复选框的帖子元

时间:2012-08-09 作者:Travis Northcutt

我正在尝试构建一个界面,以便在前端使用复选框编辑自定义帖子类型的两个自定义字段。如果这两个字段都没有值,我希望显示空复选框,并允许用户选中其中一个或两个复选框,并将相应的字段设置为true(或者只是有一些值,我想-不确定Posteta是否可以有布尔值)(最好通过AJAX)。

我的第一个想法是使用Scribu的Front End Editor 插件,但如果不做一些调整,显然无法解决此用例。然而,我想我应该问问其他人以前是否做过类似的事情,或者对如何具体实现收费插件有什么建议(或者我是否应该看看其他地方)。

编辑以扩展:这是在一个列出多篇文章的页面上进行的,因此我正在尝试找出一种方法,使其适用于一个页面上的多篇文章。以下是当前页面的外观:

enter image description here

下面是该表的标记:

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

1 个回复
SO网友:EAMann

我的直觉是推出自己的AJAX回调。显然,您知道post ID(因为它位于前端)和字段名称,只需使用AJAX将其发回WP,并在那里以编程方式设置值即可。

Anuntested示例(道具到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\' );
}
基于标记的更新现在我们对您所做的有了更多的了解,我们可以对您需要使用的JS代码有更具体的了解。

基本上,我建议您在复选框中设置一个自定义类和一些数据元素。因此,您可以使用以下内容:

<td><input type="checkbox" name="28-scheduled"  /></td> 
<td><input type="checkbox" name="28-completed"  /></td> 
变成这样:

<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> 
现在,您可以在整个表上设置一个jQuery事件监听器,分别查看每个输入:

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
    });
});
此事件侦听器将等待change 所有事件<input> 具有ajax-checkbox 班然后,它将从data-属性,以便在AJAX请求中发送它们。您必须将其与上面的示例或已编写的自定义代码合并以分派消息。

结束

相关推荐

使用AJAX的自定义登录不能与IE一起使用

我使用wp\\u登录功能在wordpress中自定义登录。每当用户输入其凭据时,就会使用ajax调用另一个页面。在该页面中,我检查用户凭据,并使用wp\\u登录功能登录用户。然后发送确认信息,当前页面将捕获该信息并显示用户已成功登录。该代码在Chrome和Firefox中可用,但在IE中不起作用。这是AJAX文件中的代码。当前页面收到一个响应,表示用户已登录,但当我刷新时,它仍显示用户未登录(挣扎了几天,请帮帮我$creds = array(); $creds[\'user_login\'] =